Pude establecer el comentario en la consola, pero no tengo idea de cómo establecer el valor del comentario en la cuadrícula una vez que el usuario guarda los cambios.
¿Hay alguna forma de establecer el valor en la cuadrícula de kendo manualmente?
salida de ejemplo
|Remark |User Name|Phone Number|Country
[unable]|username length|ad |0123456789 |UK
[enable]| |admin2 |0123456222 |US
[enable]| |admin3 |0123333339 |CN
después de que el usuario edite la tabla - salida
|Remark |User Name|Phone Number|Country
[enable]| |admin1 |0123456789 |UK
[enable]| |admin2 |0123456222 |US
[enable]| |admin3 |0123333339 |CN
La muestra de proyecto se proporciona en el fragmento de código.
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>En función de que la validación sea correcta o no, así es como puede actualizar el valor de la primera columna.
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();
}
Otra forma es usar el método de conjunto de elementos de datos como se describe en esta publicación
El método dataItem.set () es MUY LENTO ya que desencadena un evento cada vez. Incluso una lista de 100 es notablemente lenta.
Para manejar actualizaciones más grandes, use
dataItem[field] = value
La desventaja es que no se aplicarán marcadores sucios y la cuadrícula no reflejará los cambios.
$('#grid').data('kendoGrid').refresh();
Este artículo se recopila de Internet, indique la fuente cuando se vuelva a imprimir.
En caso de infracción, por favor [email protected] Eliminar
Déjame decir algunas palabras