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

Editing a template column in grid

2 Answers 139 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Vijay
Top achievements
Rank 1
Vijay asked on 19 Dec 2012, 09:12 AM
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

2 Answers, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 20 Dec 2012, 03:32 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Vijay
Top achievements
Rank 1
answered on 21 Dec 2012, 04:00 AM
Hi Alexander,
     The solution worked for me. Thanks for the reply
Regards
Vijay
Tags
Grid
Asked by
Vijay
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Vijay
Top achievements
Rank 1
Share this question
or