取消更新inline kendo grid删除行 [英] Cancel the update in inline kendo grid delete the row
本文介绍了取消更新inline kendo grid删除行的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
子网格
var selectedIds = {};
var ctlGrid = $（＃KendoWebDataGrid3）; （
dataSource： $ b字段：{
选择：{
类型：string，
可编辑：false
}，
数量：{
可编辑：true，
类型：number，
验证：{min：1，必需：true}
}，
单位：{
可编辑：
类型：string
}，
StyleNumber：{
可编辑：false，
类型：string
}，
说明：{
editable：false，
type：字符串
}
}
}
}，
pageSize：5
}，
可编辑： 'inline'，
可选：multiple，
可排序：{
mode：'single'，
allowUnsort：false
}，
pageable：
列：[{
field：select，
title：& nbsp;，
template：'< input type = \'checkbox\\ \\'/>'，
sortable：false，
width：35}，
{
标题：'数量'，
字段：数量，
宽度：90}，
{
字段：'单位'，
标题：'单位'，
宽度：80}，
{
field：'StyleNumber'，
title：'Style Number'，
}，
{
field：'Description'，
width：230 }，
{command：[<！--- {text：Select，class：k-button，c舔：selectProduct}，---&edit]，标题：Command，width：100}
]，
dataBound：function（）{
var grid = this
// handle checkbox change
grid.table.find（tr）。find（td：first input）
.change（function（e）{
var checkbox = $（this）;
var selected = grid.table.find（tr）。find（td：first input：checked）。nearest（tr）;
grid.clearSelection（）;
//每页持续选择
var ids = selectedIds [grid.dataSource.page（）] = [];
if（selected.length）{
grid.select（selected）;
selected.each（function（idx，item）{
ids.push（$（item）.data id $）$;
}
$）
.end（）
.mousedown（function（e）{
e.stopPropagation（）;
}）
//选择持久行
var selected = $（）;
var ids = selectedIds [grid.dataSource.page（）] || []; $（$）
（var idx = 0，length = ids.length; idx< length; idx ++）{
selected = selected.add（grid.table.find id =+ ids [idx] +]））;
}
选择
.find（td：first input）
.attr（checked，true）
.trigger（更改）;
}
}）;
var grid = ctlGrid.data（kendoGrid）;
grid.thead.find（th：first）
.append（$（'< input class =selectAlltype =checkbox/>'））
.delegate（。selectAll，click，function（）{
var checkbox = $（this）;
grid.table.find（tr）
.find（td：first input）
.attr（checked，checkbox.is（：checked））
.trigger（change）;
}）;
保存按钮单击事件
function selectProduct（）
{
//选择子网格
var gview = $（＃KendoWebDataGrid3） 。数据（ kendoGrid）;
//获取所选行
var rows = gview.select（）;
//选择父网格
var parentdatasource = $（＃grid11）。data（kendoGrid）。dataSource;
var parentData = parentdatasource.data（）;
//迭代所有选定的行
rows.each（function（index，row）
{
var selectedItem = gview.dataItem ）;
var selItemJson = {id：''+ selectedItem.id +''，数量：''+ selectedItem.Qty +''，单位：''+ selectedItem.Unit +''，StyleNumber：''+ selectedItem。 StyleNumber +''，说明：''+ selectedItem.Description +''};
//parentdatasource.insert(selItemJson）;
var productsGrid = $（'＃grid11' ）.data（'kendoGrid'）;
var dataSource = productsGrid.dataSource;
dataSource.add（selItemJson）;
dataSource.sync（）;
}）;
closeWindow（）;
}
父网格： p>
var data1 = [];
$（＃grid11）。kendoGrid（{
dataSource：{
data：data1，
schema：{
model：{id： id，
fields：{
数量：{验证：{必需：真实}}，
单位：{验证：{必需：真实}}，
StyleNumber：{validation：{required：true}}，
说明：{validation：{required：true}}
}
}
}，
pageSize： 5
}，
pageable：true，
height：260，
可排序：true，
工具栏：[{name：create，text：Add }]，
可编辑：inline，
列：[
{field：Qty}，
{field：Unit}，
{field：StyleNumber}，
{field：Description}，
{command：[edit，destroy]，标题：& nbsp;，width：172px }]
}）;
$（'＃grid11'）。data（）。kendoGrid.bind（change，function（e）{
$（'＃grid11'）。 ;
}）;
$（'＃grid11'）。data（）。kendoGrid.bind（'edit'，function（e）{
if（e.model.isNew（））{
e.container.find（'。k-grid-update'）。click（function（）{
$（'＃grid11'）。data（）。kendoGrid.refresh（）;
}），
e.container.find（'。k-grid-cancel'）。click（function（）{
$（'＃grid11'）。data（）。kendoGrid .refresh（）;
}）
}
}）
将数据添加到父网格工作很好，没有问题，但是当我选择父网格添加新行来编辑，然后触发取消按钮行被删除。
我无法弄清楚问题。请帮助我。
解决方案
我发现错误，希望可以帮助你。
如果没有配置dataSource：schema：model的id字段，当更新之前单击另一行中的编辑或单击取消，它将删除该行。
var dataSource = new kendo.data.DataSource（{
...
schema：{
model：{
id：id，//看这里，如果你没有配置，将发生
字段：{...
...}
}
}
...
}）
I am using two kendo inline grid parent and child. child grid contains the list of products,when user select the products(multiple selection) from child grid and clicked to save button,it's inserted into an parent grid.
Child grid:
var selectedIds = {};
var ctlGrid = $("#KendoWebDataGrid3");
ctlGrid.kendoGrid({
dataSource: {
data:data1,
schema: {
model: {
id: 'id',
fields: {
select: {
type: "string",
editable: false
},
Qty: {
editable: true,
type: "number",
validation: { min: 1, required: true }
},
Unit: {
editable: false,
type: "string"
},
StyleNumber: {
editable: false,
type: "string"
},
Description: {
editable: false,
type: "string"
}
}
}
},
pageSize: 5
},
editable: 'inline',
selectable: "multiple",
sortable: {
mode: 'single',
allowUnsort: false
},
pageable: true,
columns: [{
field: "select",
title: " ",
template: '<input type=\'checkbox\' />',
sortable: false,
width: 35},
{
title: 'Qty',
field: "Qty",
width:90},
{
field: 'Unit',
title: 'Unit',
width: 80},
{
field: 'StyleNumber',
title: 'Style Number',
},
{
field: 'Description',
width: 230},
{command: [<!---{text:"Select" ,class : "k-button",click: selectProduct},--->"edit" ], title: "Command", width: 100 }
],
dataBound: function() {
var grid = this;
//handle checkbox change
grid.table.find("tr").find("td:first input")
.change(function(e) {
var checkbox = $(this);
var selected = grid.table.find("tr").find("td:first input:checked").closest("tr");
grid.clearSelection();
//persist selection per page
var ids = selectedIds[grid.dataSource.page()] = [];
if (selected.length) {
grid.select(selected);
selected.each(function(idx, item) {
ids.push($(item).data("id"));
});
}
})
.end()
.mousedown(function(e) {
e.stopPropagation();
})
//select persisted rows
var selected = $();
var ids = selectedIds[grid.dataSource.page()] || [];
for (var idx = 0, length = ids.length; idx < length; idx++) {
selected = selected.add(grid.table.find("tr[data-id=" + ids[idx] + "]") );
}
selected
.find("td:first input")
.attr("checked", true)
.trigger("change");
}
});
var grid = ctlGrid.data("kendoGrid");
grid.thead.find("th:first")
.append($('<input class="selectAll" type="checkbox"/>'))
.delegate(".selectAll", "click", function() {
var checkbox = $(this);
grid.table.find("tr")
.find("td:first input")
.attr("checked", checkbox.is(":checked"))
.trigger("change");
});
save button clicked Event
function selectProduct()
{
//Selecting child Grid
var gview = $("#KendoWebDataGrid3").data("kendoGrid");
//Getting selected rows
var rows = gview.select();
//Selecting parent Grid
var parentdatasource=$("#grid11").data("kendoGrid").dataSource;
var parentData=parentdatasource.data();
//Iterate through all selected rows
rows.each(function (index, row)
{
var selectedItem = gview.dataItem(row);
var selItemJson={id: ''+selectedItem.id+'', Qty:''+selectedItem.Qty+'',Unit:''+selectedItem.Unit+'',StyleNumber:''+selectedItem.StyleNumber+'',Description:''+selectedItem.Description+''};
//parentdatasource.insert(selItemJson);
var productsGrid = $('#grid11').data('kendoGrid');
var dataSource = productsGrid.dataSource;
dataSource.add(selItemJson);
dataSource.sync();
});
closeWindow();
}
Parent Grid:
var data1=[];
$("#grid11").kendoGrid({
dataSource: {
data:data1,
schema: {
model: { id: "id" ,
fields: {
Qty: { validation: { required: true } },
Unit: { validation: { required: true } },
StyleNumber: { validation: { required: true } },
Description: { validation: { required: true } }
}
}
},
pageSize: 5
},
pageable: true,
height: 260,
sortable: true,
toolbar: [{name:"create",text:"Add"}],
editable: "inline",
columns: [
{field: "Qty"},
{field: "Unit"},
{field: "StyleNumber"},
{field: "Description"},
{ command: ["edit", "destroy"], title: " ", width: "172px" }]
});
$('#grid11').data().kendoGrid.bind("change", function(e) {
$('#grid11').data().kendoGrid.refresh();
});
$('#grid11').data().kendoGrid.bind('edit',function(e){
if(e.model.isNew()){
e.container.find('.k-grid-update').click(function(){
$('#grid11').data().kendoGrid.refresh();
}),
e.container.find('.k-grid-cancel').click(function(){
$('#grid11').data().kendoGrid.refresh();
})
}
})
Adding data into parent grid work nicely,no issue,but when i select the parent grid add new row to edit then trigger the cancel button row was deleted.
I am not able to figure out the problem.please help me.
解决方案
I found the error, hope can help you.
If you did not config the dataSource: schema: model's "id" field, when click edit in another row before update or click cancel, it will delete the row.
var dataSource = new kendo.data.DataSource({
...
schema: {
model: {
id:"id", // Look here, if you did not config it, issue will happen
fields: {...
...}
}
}
...
})
这篇关于取消更新inline kendo grid删除行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
