how to manually set column value in kendo grid

Question

I was able to set the remark on console but I have no idea how to set the remark value into the grid once the user save the changes.

is there anyway to set value into kendo grid manually?

example output

         |Remark         |User Name|Phone Number|Country
 [unable]|username length|ad       |0123456789  |UK
 [enable]|               |admin2   |0123456222  |US
 [enable]|               |admin3   |0123333339  |CN

after user edit the table - output

         |Remark         |User Name|Phone Number|Country
 [enable]|               |admin1   |0123456789  |UK
 [enable]|               |admin2   |0123456222  |US
 [enable]|               |admin3   |0123333339  |CN

The sample of project is provided in the code snippet.

 var defaultData = [{ reason: "", userName: "ad", phoneNumber: "0123456789", country: "UK" }, { reason: "", userName: "admin2", phoneNumber: "0123456222", country: "US" }, { reason: "", userName: "admin3", phoneNumber: "0123333339", country: "CN" }]; var defaultColumns = [{ field: "", width: "40px", template: "<input name='Discontinued' id='remarkCheckBox' class='checkbox' #= (reason.length > 0)? 'disabled=disabled' : ''# type='checkbox' />" }, { field: "reason", title: "Remark", attributes: { style: "color:\\\\#cc0000" } }, { field: "userName", title: "User Name" }, { field: "phoneNumber", title: "Phone Number" }, { field: "country", title: "Country" }]; var viewModel = kendo.observable({ onClick: function() { loadImportGrid(defaultData, defaultColumns); }, }); function loadImportGrid(defaultData, defaultColumns) { var grid = $("#grid").kendoGrid({ columns: defaultColumns, dataSource: { data: defaultData }, dataBound: function() { grid = $("#grid").data("kendoGrid"); grid.saveChanges(); }, saveChanges: function() { getRemark(); }, toolbar: ["save"], selectable: "row", scrollable: true, sortable: true, editable: true }); } function validation(objectList) { if (!objectList.userName || objectList.userName.length < 4) { invalidRecordFormat = "username length"; return invalidRecordFormat; } if (!objectList.country || objectList.country === " ") { invalidRecordFormat = "country invalid"; return invalidRecordFormat; } invalidRecordFormat = ""; return invalidRecordFormat; } function getRemark() { var data = $("#grid").data("kendoGrid").dataSource._data; for (var i = 0; i < data.length; i++) { console.log(validation(data[i])); } } kendo.bind($("#importFile"), viewModel);

 html * { font-size: small; font-family: Arial !important; } .uploadLabel { color: white; background-color: #008efe; border-style: solid; border-width: 1px 1px 1px 1px; width: 100px; height: 30px; text-align: center; border-radius: 3px; display: block; line-height: 250%; } #importUserFile { opacity: 0; position: absolute; z-index: -1; }

 <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.914/styles/kendo.common-bootstrap.min.css" /> <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.914/styles/kendo.bootstrap.min.css" /> <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.914/styles/kendo.bootstrap.mobile.min.css" /> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://kendo.cdn.telerik.com/2016.3.914/js/kendo.all.min.js"></script> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://kendo.cdn.telerik.com/2016.2.607/js/kendo.all.min.js"></script> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <div id="importFile"> <label class="uploadLabel" for="importUserFile">Browse</label> <input name="file" id="importUserFile" data-bind="events:{click:onClick}" /> </div> <div id="grid"></div> </body> </html>

Answer 1

Always use set() method from the Model to change values. No need to refresh() , eg:

var dataItem = $("#grid").data("kendoGrid").dataSource.data()[0];
dataItem.set("reason", "new value");

Demo

Answer 2

Based on validation is correct or not this is how you can update the first column value.

for (var i = 0; i < data.length; i++) {   
    //access record using for loop - here i is value from loop
    var firstItem = $('#grid').data().kendoGrid.dataSource.data()[i];

    //set col reason value value
    firstItem["reason"]="username length"; 

    //refresh the grid
    $('#grid').data('kendoGrid').refresh();  
}

Another way is to use dataitem set method as described in this post

The dataItem.set() method is VERY SLOW as it triggers an event each time. Even a list of 100 is notable slow.

To handle larger updates then use

dataItem[field] = value

The downside is that no dirty markers will be applied and the grid will not reflect the changes.

$('#grid').data('kendoGrid').refresh();

how to manually set column value in kendo grid

Question

2 answers

solution1
11 2017-01-03 18:35:33

solution2
7 ACCPTED 2017-01-03 10:13:05

how to manually set column value in kendo grid

Question

2 answers

solution1 11 2017-01-03 18:35:33

solution2 7 ACCPTED 2017-01-03 10:13:05

solution1
11 2017-01-03 18:35:33

solution2
7 ACCPTED 2017-01-03 10:13:05