Multiple Checkbox columns - Setting Model Values

4 posts, 0 answers
  1. Reid
    Reid avatar
    317 posts
    Member since:
    Oct 2008

    Posted 09 Jun Link to this post

    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

     

     

     

     

     

     

  2. Reid
    Reid avatar
    317 posts
    Member since:
    Oct 2008

    Posted 09 Jun in reply to Reid Link to this post

    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.

     

     

  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Reid
    Reid avatar
    317 posts
    Member since:
    Oct 2008

    Posted 10 Jun in reply to Reid Link to this post

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

     

     

     

     

     

     

  5. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1803 posts

    Posted 13 Jun Link to this post

    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:
    Hope this helps.


    Regards,
    Konstantin Dikov
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET MVC is VS 2017 Ready