I have two kendo ui grid in one html page. They displayed based on the options that user choose in dropdownlist. For example, if I chose 1, the first grid displayed and the second one hidden. And if I choose 2, the second one displayed but first one hidden.
But after I choose 1 and add some items to grid 1, then choose 2 to switch to grid 2 and add some items to grid 2. Now when I switch back to grid 1, it display a loading icon always. I could not operate my grid 1 any more.
The attached screenshot is the issue. And following is my code. Can someone help us check what's wrong with my code? Thanks.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="../styles/kendo.common.min.css" />
<link rel="stylesheet" href="../styles/kendo.default.min.css" />
<link rel="stylesheet" href="../styles/kendo.default.mobile.min.css" />
<script src="../js/jquery.min.js"></script>
<script src="../js/kendo.all.min.js"></script>
<script type="text/javascript">
function SelectRawMaterType() {
var type = document.getElementById("Type");
var meat = document.getElementById("Meat");
var additive = document.getElementById("Additive");
var gridMeat = document.getElementById("gridMeat");
var gridAdditive = document.getElementById("gridAdditive");
if (type.value == 0) {
additive.style.display = "none";
meat.style.display = "block";
gridMeat.style.display = "block";
gridAdditive.style.display = "none";
}
if (type.value == 1) {
additive.style.display = "block";
meat.style.display = "none";
gridMeat.style.display = "none";
gridAdditive.style.display = "block";
}
Records();
}
function Records() {
var para = document.getElementById("Type");
if (para.value == 0) {
$(document).ready(function () {
var mydata = new kendo.data.DataSource({
transport: {
//读取数据
read: function (e) {
////alert(111);
//e.success(datasource);
},
//更新数据
update: function (e) {
e.success();
}
},
schema: {
model: {
id: "Id",
fields: {
RawName: { type: "string" },
Unit: { type: "string" },
Remark: { type: "string" }
}
}
},
pageSize: 5
});
$("#gridMeat").kendoGrid({
dataSource: mydata,
selectable: "multiple, row", //设置多列可选
filterable: true, //设置过滤可用
sortable: true, //设置排序可用
pageable: true, //设置分页可用
editable: "popup", //设置编辑模式。popup:弹窗；linline:行内编辑
columns: [{
field: "RawName",
title: "原材料名称",
width: 240
}, {
field: "Unit",
title: "原材料单位"
}, {
field: "Remark",
title: "备注"
},
{ command: ["edit"], title: "操作" }]
});
});
}
if (para.value == 1) {
$(document).ready(function () {
var mydata = new kendo.data.DataSource({
transport: {
//读取数据
read: function (e) {
////alert(111);
//e.success(datasource);
},
//更新数据
update: function (e) {
e.success();
}
},
schema: {
model: {
id: "Id",
fields: {
RawName: { type: "string" },
Unit: { type: "string" },
MaximumUsage:{ type:"string"},
Remark: { type: "string" }
}
}
},
pageSize: 5
});
$("#gridAdditive").kendoGrid({
dataSource: mydata,
selectable: "multiple, row", //设置多列可选
filterable: true, //设置过滤可用
sortable: true, //设置排序可用
pageable: true, //设置分页可用
editable: "popup", //设置编辑模式。popup:弹窗；linline:行内编辑
columns: [{
field: "RawName",
title: "原材料名称",
width: 240
}, {
field: "Unit",
title: "原材料单位"
},
{
field: "MaximumUsage",
title:"最大使用量"
}, {
field: "Remark",
title: "备注"
},
{ command: ["edit"], title: "操作" }]
});
});
}
};
$(window).load(function () {
SelectRawMaterType();
//Records();
});
function GetSourceForMeat() {
var gridMeat = $("#gridMeat").data("kendoGrid");
var datasourceOfMeat = gridMeat.dataSource;
datasourceOfMeat.insert({
RawName: "牛肉1",
Unit: "袋",
Remark: "备注1"
});
};
function GetSourceForAdditive() {
var gridAdditive = $("#gridAdditive").data("kendoGrid");
var datasourceOfAdditive = gridAdditive.dataSource;
datasourceOfAdditive.insert({
RawName: "添加剂1",
Unit: "袋",
MaximumUsage: "100ml",
Remark:"备注2"
});
};
</script>
</head>
<body>
<div class="title">
<h4>原材料管理</h4>
</div>
<div class="rawMaterType">
原材料类型：
<select id="Type" onchange="SelectRawMaterType()">
<option value="0">肉类</option>
<option value="1">添加剂</option>
</select>
</div>
<div class="itemsForMeat" id="Meat">
<div class="items">
<table>
<tr>
<td>原材料名称：</td>
<td><input type="text" name="MeatName" /></td>
<td>原材料单位：</td>
<td><input type="text" name="MeatUnit" /></td>
</tr>
<tr>
<td>备注：</td>
<td><input type="text" name="MeatRemark" /></td>
<td><input type="button" name="MeatAdd" value="添加" onclick="GetSourceForMeat()" /></td>
<td><input type="button" name="MeatDelete" value="删除选中" /></td>
</tr>
</table>
</div>
</div>
<div class="itemsForAdditive" id="Additive">
<div class="items">
<table>
<tr>
<td>原材料名称：</td>
<td><input type="text" name="AdditiveName" /></td>
<td>原材料单位：</td>
<td><input type="text" name="AdditiveUnit" /></td>
<td><input type="button" name="AdditiveAdd" value="添加" onclick="GetSourceForAdditive()" /></td>
</tr>
<tr>
<td>最大使用量：</td>
<td><input type="text" name="MaxUsage" /></td>
<td>备注：</td>
<td><input type="text" name="AdditiveRemark" /></td>
<td><input type="button" name="AdditiveDelete" value="删除选中" /></td>
</tr>
</table>
</div>
</div>
<div id="gridMeat" class="records">
</div>
<div id="gridAdditive" class="records">
</div>
</body>
</html>
7 Answers, 1 is accepted
Rank 1
I have found out the problem. This is caused by the read function in kendo ui grid. When the grid display again, it need to execute the read function again.
But how can I bind the local datasource again to the grid? I'm using local json data. How can I bind in read function?? Please help.
Rank 1
Rank 1
I can confirm now, the problem is the read function that in datasource. What the data the read function needed for local datasource?
transport: {
read: function (e) {
e.success(datasource);//What should be the datasource for e.success()???
},
Thank you for the provided information.
The issue that you are experiencing should be caused by the lack of a data source transport create function. When the insert method is used, the data source of the grid would not be able to function correctly, which may have lead you to believe that a read is necessary. If the create function is configured, then the only thing that you would need when toggling the visibility may be to resize the grid
https://docs.telerik.com/kendo-ui/controls/data-management/grid/appearance#hidden-containers
To answer your first question, the expected parameter for the success callback when the read method is set as a function is an array of data, effectively this is the grid's data:
https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/configuration/data
For a complete CRUD example with local data and more information, visit the article at:
https://docs.telerik.com/kendo-ui/framework/datasource/crud#local-or-custom-transport-crud-operations
Let me know if you need further information.
Regards,
Alex Hajigeorgieva
Progress Telerik
Rank 1
Hi Alex,
Thanks for your help.
Following code I have added Create function, but still have some problem when I Edit a item -> Delete a item -> Edit another item. When I finishing edit second item and click Update button on popup window, it still stay in loading state.
Can you help me check what's wrong with my code? Thank you very much.
var mydata = new kendo.data.DataSource({
transport: {
read: function (e) {
e.success(datasource);
},
update: function (e) {
e.success();
},
create: function (e) {
datasource.push(e.data);
e.success(e.data);
}
},
schema: {
model: {
id: "Id",
fields: {
RawName: { type: "string" },
Unit: { type: "string" },
Count: { type: "string" },
InstockDate: { type: "date" },
SourceArea: { type: "string" },
ManufactureDate: { type: "date" },
ExpirationDate: { type: "date" },
Supplier: { type: "string" },
Recipient: {type:"string"}
}
}
},
pageSize: 5
});
The issue with the create operation is that the newly created item is missing an id.
https://docs.telerik.com/kendo-ui/framework/datasource/crud#create-local
// thee newly created item needs a unique id
e.data.my_ID_field_name = 123;
datasource.push(e.data);
// then e.success with the new item will notify the data source and refresh the gride.success(e.data);Also, if deleting items is required, the data source should be configured for destroying:
https://docs.telerik.com/kendo-ui/framework/datasource/crud#destroy-local
:
transport: { destroy: function (e) { // assuming that the array with data is named dataSource var indexOfItemToDestroy = dataSource.map(function(e) { return e.my_ID_field_name; }).indexOf(e.data.my_ID_field_name); dataSource.splice(index, 1); e.success(); }}Both of these operations are fully working in the example code at:
https://docs.telerik.com/kendo-ui/framework/datasource/crud#examples
You can click "Open in Dojo" and use that to change and alter it so you can better understand and debug the code.
Kind Regards,
Alex Hajigeorgieva
Progress Telerik
Rank 1
Thanks for your help. It works now.