178
rated 0 times
[
180]
[
2]
/ answers: 1 / hits: 22950
/ 8 Years ago, tue, january 3, 2017, 12:00:00
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>
More From » kendo-ui
