how to manually set column value in kendo grid

Question

how to manually set column value in kendo grid

24.1k views Asked by Austin Hoh At 03 January 2017 at 08:19

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>

Original Q&A

There are 2 answers

DontVoteMeDown On 03 January 2017 at 18:35

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

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

Demo

**Sean Ch** · Accepted Answer · 2017-01-03 10:13:05

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();

TechQA.

how to manually set column value in kendo grid

There are 2 answers

Related Questions in JAVASCRIPT

Related Questions in KENDO-UI

Related Questions in KENDO-GRID

Related Questions in KENDO-DATASOURCE

Related Questions in KENDO-MVVM

Popular Questions

Popular Tags

Trending Questions