Knockout.js change label text in TelerikGridTemplateColumn via checkbox value

Question

I have a Telerik RadGrid, and in it a GridTemplateColumn that has a Label to show some text that is pulled back from a database. I want to when a checkbox is checked, change the max length of that label to a set number of characters. I do this on the backend with the following code

protected void grdNoteHistory_ItemDataBound(object sender, GridItemEventArgs e)
    {
        if (e.Item is GridDataItem)
        {
            GridDataItem item = (GridDataItem)e.Item;
            HiddenField hdnNoteValue = (HiddenField)item.FindControl("hdnNoteValue");
            Label lblNote = (Label)item.FindControl("lblNote");
            History historyItem = (History)item.DataItem;
            hdnNoteValue.Value = historyItem.Note;
            lblNote.Text = historyItem.Note;

            if (chkCollapseExpand.Checked == true)
            {
                if (lblNote.Text.Length >= 100)
                {
                    lblNote.Text = historyItem.Note.Substring(0, 100) + "...";
                }
                else 
                {
                    lblNote.Text = historyItem.Note;
                }
            }
        } 
    }

The backend handles if the user sorts the grid or some function that will use a postback to maintain the grid's state of text length for that label.

On the front end I am attempting to use knockout.js to bind the checkbox's checked property to the label so that when it is checked all labels in the grid only have a length of 100 characters, but when unchecked the limit is not enforced.

Any help would be appreciated.

Answer 1

Set your checkbox to the value of an observable

<input type="checkbox" data-bind="checked: hasLimit" /></p>

Set your label bound to an KO computed

<label data-bind="text: someTextValue"></label>

And then have someTextValue be based on some other value in the view model

var hasLimit = ko.observable(true);
var someTextValue = ko.computed(function () {
    var txtValue = historyItem.Note;
    if (hasLimit) { return txtValue.Substring(0, 100) + "...";
    return txtValue;
};

The above will start with a limit (and the checkbox will be checked) and then if the user unchecks the box it will show the entire text.