Multiple Checkbox columns - Setting Model Values

[Reid]

I have two checkboxes in a Kendo MVC Grid row and need some understanding as to how to set the dataitem property when they are clicked.  I have been successful when there is one checkbox per row doing the following:

columns.Bound(p => p.bDelete).ClientTemplate("<input type='checkbox' name='bDelete' Id='bDelete' #= bDelete ? checked='checked': '' # class='chkbx'/>")
                         .Width(70).HtmlAttributes(new { style = "text-align: center", title = "Delete Selected" });

<script>
    // Any rows that get checked or unchecked after the form is loaded need
    // to pass though this event to get the underlying record reconciled
    $(function () {


        $('#Grid')
            .on('click',
                '.chkbx',
                function (e) {
                    debugger;

                    var checked = $(this).is(':checked');
                    var grid = $('#Grid').data().kendoGrid;
                    var dataItem = grid.dataItem($(this).closest('tr'));
                    // if we are in insert mode do not let the user check    the                delete checkbox
                    if (dataItem.iProjectSequence == 0) {
                        e.preventDefault();
                        dataItem.set('bDelete', false);                    return;
                    }

                    dataItem.set('bDelete', checked);
                    dataItem.set('bModified', true);
                    dataItem.set('dirty', true);
                    SetRowsModifiedState();
                    SetPageMessage("Data Modified");
                    $("#New").prop("disabled", true);
                    $("#Cancel").prop("disabled", false);
                });
    })
</script>

 

The code above works for a row that has only one checkbox in it.  How do I detect the underlying model value attached to the checkbox being clicked so that I can set *ONLY* that field?

 

Thanks

 

 

 

 

 

 

[Reid]

I discovered the answer to this is to have a event that reacts to the specific checkbox being clicked by name, not just .CSS class ..

<script>
    // Any rows that get checked or unchecked after the form is loaded need
    // to pass though this event to get the underlying record reconciled

    $(function () {
        $('#Grid').on('click', '.bRestricted, function () {

            var checked = $(this).is(':checked');
            var grid = $('#Grid').data().kendoGrid;
            var dataItem = grid.dataItem($(this).closest('tr'));
            dataItem.set(bRestricted, checked);
            SetPageMessage("Fund Sources Modified", null);
            this.dirty = true;
        })
    })


    $(function () {
        $('#Grid').on('click', '.bActive, function () {

            var checked = $(this).is(':checked');
            var grid = $('#Grid').data().kendoGrid;
            var dataItem = grid.dataItem($(this).closest('tr'));
            dataItem.set(bActive, checked);
            SetPageMessage("Fund Sources Modified", null);
            this.dirty = true;

        })
    })

</script>

 

But to the Telerik staff, why should we need to perform this step in JavaScript behind the scenes to begin with?  The checkbox(s) are bound to the column in the client template.  While debugging this I see that that values coming into the controller on an update are not what the view displays.  The model coming into the controller indicate the same values as when the form loaded.  The checking or unchecking of the checkboxes had no effect on the model object.

 

 

[Reid]

One amendment to the code above.  The declaration of the checkboxes need to have the following :

columns.Bound(p => p.bSubFundActive).ClientTemplate("<input type='checkbox' name='bSubFundActive' Id='bSubFundActive' #= bSubFundActive ? checked='checked': '' # class='bSubFundActive'/>")
                         .Width(70).HtmlAttributes(new { style = "text-align: center", title = "Active Fund" });

columns.Bound(p => p.bRestricted).ClientTemplate("<input type='checkbox' name='bRestricted' Id='bRestricted' #= bRestricted ? checked='checked': '' # class='bRestricted'/>")
                         .Width(70).HtmlAttributes(new { style = "text-align: center", title = "Restricted" });

 

 

 

 

 

 

[Konstantin Dikov]

Hi Reid,

In order to set the value from the model to the ClientTemplate you need to set the checked property of the checkbox to correspond to that value. You could refer to the following online demo and help article for additional information on this matter:

• http://demos.telerik.com/aspnet-mvc/grid/editing-custom 
• http://docs.telerik.com/kendo-ui/aspnet-mvc/helpers/grid/faq#how-to-customize-the-way-properties-are-displayed-in-grid-bound-columns

Hope this helps.


Regards,
Konstantin Dikov
Telerik