Editing a template column in grid

[Vijay]

Hi,
I am using the grid to do the following

 

 

 

function BindDataToGrid(Data) {

 

 

 

var dataSource = new kendo.data.DataSource({

 

pageSize: 30,

data: Data,

autoSync:

 

true,

 

schema: {

model: {

id:

 

"ModuleID",

 

fields: {

ModuleID: { editable:

 

false, nullable: true },

 

Name: { editable:

 

false, nullable: true },

 

View: { editable:

 

false, nullable: true },

 

Add: { editable:

 

false, nullable: true },

 

Delete: { editable:

 

false, nullable: true },

 

IsDefault: { editable:

 

false, nullable: true }

 

}

}

}

});

$(

 

"#roleAccessGrid").kendoGrid({

 

dataSource: dataSource,

pageable:

 

true,

 

height: 260,

 

columns: [

{ field:

 

"Name", width: 120, title: "Module Name " },

 

 

 

//{ field: "ProductName", title: "Product Name" },

 

 

 

 

 

{field:

 

"View", width: 50, title: "View", template: '<input type="checkbox" # if(View==true){ # checked #} #></input>' },

 

{

field:

 

"Add",

 

width: 50,

title:

 

"Add",

 

template:

 

"<input type='checkbox' id='chkAdd' # if(Add==1){ # checked=checked #} # />"

 

 

 

 

 

},

{

field:

 

"Edit",

 

width: 50,

title:

 

"Edit",

 

template:

 

"<input type='checkbox' id='chkEdit' # if(Edit==1){ # checked #} # />"

 

 

 

 

 

},

{

field:

 

"Delete",

 

width: 50,

title:

 

"Delete",

 

template:

 

"<input type='checkbox' id='chkDelete' # if(Delete==1){ # checked #} # />"

 

 

 

 

 

},

{

field:

 

"IsDefault",

 

width: 50,

title:

 

"IsDefault",

 

template:

 

"<input type='checkbox' id='chkIsDefault' # if(IsDefault==1){ # checked #} # />"

 

 

 

 

 

}

],

editable:true　

});



My problem is that I am unable to retrieve the value after making a change on the check box.

Thanks in advance

[Alexander Valchev]

Hi Vijay,

As I understood it you would like to edit the underlying DataSource data through the check boxes. Column templates use one way binding which is why any changes that the user made will not reflect on the Grid's data. The recommended approach is to use one of the build-in edit modes.

If this does not suit in your requirements, you may hook up to the change event of the check box elements and manually set the new value in the DataSource. If you choose this approach it is recommended to add a class to the element as it will simplify the selector.

As an example:

$("#grid").on("change", ".check-view", function (e) {
    var grid = $("#grid").data("kendoGrid");
    var model = grid.dataItem($(e.target).closest("tr"));
    model.set("View", this.checked);
});

I hope this will help.

Kind regards,
Alexander Valchev
the Telerik team

[Vijay]

Hi Alexander,
     The solution worked for me. Thanks for the reply
Regards
Vijay