Knockout.js通过复选框值更改TelerikGridTemplateColumn中的标签文本

时间:2013-06-07 16:21:46

标签: c# knockout.js telerik radgrid

我有一个Telerik RadGrid,其中有一个GridTemplateColumn,它有一个Label来显示从数据库中拉回的一些文本。我想在选中复选框时,将该标签的最大长度更改为设定的字符数。我使用以下代码在后端执行此操作

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;
                }
            }
        } 
    }

后端处理用户是否对网格进行排序或某些将使用回发的函数来维护网格的标签文本长度状态。

在前端我试图使用knockout.js将复选框的checked属性绑定到标签,这样当检查时,网格中的所有标签只有100个字符的长度,但是当未选中时,限制不是强制执行。

任何帮助都将不胜感激。

1 个答案:

答案 0 :(得分:3)

将复选框设置为可观察的值

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

将您的标签绑定到KO计算

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

然后让someTextValue基于视图模型中的其他值

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

以上将以限制开始(并且将选中复选框),然后如果用户取消选中该框,则会显示整个文本。