This is a migrated thread and some comments may be shown as answers.

Multiple Checkbox columns - Setting Model Values

3 Answers 1349 Views

Grid

This is a migrated thread and some comments may be shown as answers.

Reid asked on 09 Jun 2016, 01:19 PM

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

3 Answers, 1 is accepted

answered on 09 Jun 2016, 02:30 PM

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.

answered on 10 Jun 2016, 11:48 AM

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

answered on 13 Jun 2016, 06:42 AM

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