comment définir manuellement la valeur de la colonne dans la grille de kendo

J'ai été en mesure de définir la remarque sur la console mais je n'ai aucune idée de comment mettre de la remarque de la valeur dans la grille une fois que l'utilisateur d'enregistrer les modifications.

est-il de toute façon à la valeur définie dans le kendo grille manuellement?

exemple de sortie

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

après l'utilisateur de modifier la table de sortie

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

L'exemple de projet dans l'extrait de code.

JS:

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

CSS:

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;
}

HTML:

<!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>

InformationsquelleAutor Austin Hoh | 2017-01-03
  1. 4

    Basé sur la validation est correct ou pas c'est comment vous pouvez mettre à jour la première valeur de la colonne. 

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

    Une autre façon est d'utiliser des dataitem la méthode de jeu
    comme décrit dans cette post

    DataItem.méthode set() est TRÈS LENT car il déclenche un événement à chaque fois. Même une liste de 100 est notable lent.

    À traiter de plus grandes mises à jour sont ensuite utiliser

    dataItem[field] = value

    L'inconvénient est que personne ne sale marqueurs seront appliquées et la grille ne sera pas refléter les modifications. 

    $('#grid').data('kendoGrid').refresh();
    • L'actualisation de la grille n'est pas une bonne idée, car il permettra d'actualiser toutes les données sur la grille, ce qui peut causer beaucoup de problèmes dans de nombreux cas, donc, je vous suggère d'utiliser le set() méthode.
    • d'accord avec votre point de
    InformationsquelleAutor Sean Ch
  2. 5

    Toujours utiliser set() méthode du Modèle pour modifier les valeurs. Pas besoin de refresh(), par exemple:

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

    Démo

    InformationsquelleAutor DontVoteMeDown