Question

我正在做的是将行从一个网格复制到另一个网格。原始网格不可编辑，但目标网格为。

因此，当我连续加载并更改它时，它也会更改原始网格中的值。

此外，如果我将原始网格中的一行添加到目标网格两次，我会遇到更多问题。目标网格中任一行上的一个数据更改会更改目标表中另一行中的数据，以及原始网格中的“只读”版本。

我怀疑这是由所有复制的行引起的，这些行保留了复制它的父项的 data-uid 。如果有人可以确认/否认这个并且可能给我一个解决方法，我将非常感激！

附注：由于实现要求，所有这些代码必须是客户端，所以我不能通过控制器方法完成这项工作。我确实以这种方式工作，但是对于我需要它做的事情来说还不够好。

原始网格（复制）：

@(Html.Kendo().Grid(Model)
.Name("ProductBookGrid")
.Columns(columns =>
{
    columns.Bound(i => i.FreightClass).Width(70);
    columns.Bound(i => i.Length).Width(70);
    columns.Bound(i => i.Width).Width(70);
    columns.Bound(i => i.Height).Width(70);
    columns.Bound(i => i.DimensionUOM).Width(70);
    columns.Bound(i => i.QuantityValue).Width(70);
    columns.Bound(i => i.QuantityUOM).Width(70);
    columns.Bound(i => i.WeightValue).Width(70);
    columns.Bound(i => i.WeightUOM).Width(70);
    columns.Bound(i => i.NMFC).Width(75);
    columns.Bound(i => i.Description).Width(150);
})
.ToolBar(toolbar =>
{
    toolbar.Custom().Text("Add").Url("#_").HtmlAttributes(new { onclick = "PopulateItemGrid()" });
})
.Pageable()
.Sortable()
.Scrollable()
.Filterable()
.Resizable(resize => resize.Columns(true))
.Reorderable(reorder => reorder.Columns(true))
.DataSource(dataSource => dataSource
    .Ajax()
    .Model(model =>
    {
        model.Id(i => i.ItemModelID);
    })
)
.Selectable(selectable => selectable.Mode(GridSelectionMode.Multiple))

）

复制功能：

    function PopulateItemGrid() {
var productBookGrid = $("#ProductBookGrid").data("kendoGrid");
var itemGrid = $("#QuoteItemGrid").data("kendoGrid");

productBookGrid.select().each(function () {
    var dataItem = productBookGrid.dataItem($(this));
    itemGrid.dataSource.add(dataItem); 
});

$("#ProductBookMenu").data("kendoMenu").close("#Item1");

}

目标网格：

@(Html.Kendo().Grid(Model.ItemModelList)
.Name("QuoteItemGrid")
.Columns(columns =>
{
    columns.Bound(i => i.FreightClass)
        .EditorTemplateName("ItemGrid_RefFreightClassListing")
        .Width(50);
    columns.Bound(i => i.Length)
        .EditorTemplateName("ItemGrid_Length")
        .Width(30);
    columns.Bound(i => i.Width)
        .EditorTemplateName("ItemGrid_Width")
        .Width(30);
    columns.Bound(i => i.Height)
        .EditorTemplateName("ItemGrid_Height")
        .Width(30);
    columns.Bound(i => i.DimensionUOM)
        .EditorTemplateName("ItemGrid_RefUOMListingDimension")
        .Width(50);
    columns.Bound(i => i.QuantityValue)
        .EditorTemplateName("ItemGrid_QuantityValue")
        .Width(30);
    columns.Bound(i => i.QuantityUOM)
        .EditorTemplateName("ItemGrid_RefUnitTypeListing")
        .Width(50);
    columns.Bound(i => i.WeightValue)
        .EditorTemplateName("ItemGrid_WeightValue")
        .Width(30);
    columns.Bound(i => i.WeightUOM)
        .EditorTemplateName("ItemGrid_RefUOMListingWeight")
        .Width(50);
    columns.Bound(i => i.NMFC).Width(50);
    columns.Bound(i => i.Description).Width(100);
    columns.Bound(i => i.IsSaved).Width(20);
    columns.Command(command =>
    {
        command.Destroy();
    }).Width(60);
})
.ClientDetailTemplateId("ItemDetails")
.ToolBar(toolbar =>
{
    toolbar.Create();
    //toolbar.Save();
})
.Editable(editable => editable.Mode(GridEditMode.InCell).CreateAt(GridInsertRowPosition.Bottom))
.Pageable()
.Sortable()
.Scrollable()
.Resizable(resize => resize.Columns(true))
.DataSource(dataSource => dataSource
    .Ajax()
    .Batch(true)
    .ServerOperation(false)
    .Events(events =>
    {
        events.Error("QuoteItemGrid_ErrorHandler");
    })
    .Model(model =>
    {
        model.Id(i => i.ItemModelID);
        model.Field(i => i.DimensionUOM).DefaultValue("in");
        model.Field(i => i.WeightUOM).DefaultValue("lbs");
    })
    .Create(create => create.Action("CreateProducts", "ItemGrid"))
    .Read(read => read.Action("GetProducts", "ItemGrid"))
    .Update(update => update.Action("UpdateProducts", "ItemGrid"))
    .Destroy(destroy => destroy.Action("DeleteProducts", "ItemGrid"))
)

）

Answer 1

您可以使用toJSON方法获取原始数据：

var dataItem = productBookGrid.dataItem($(this));

itemGrid.dataSource.add(dataItem.toJSON());

Answer 2

var userListGrid = $("#grid1").data("kendoGrid");
var selectedUserListGrid = $("#grid2").data("kendoGrid");

//Clear data.
$("#grid2").data('kendoGrid').dataSource.data([]);

for (var i = 0; i < userListGrid._data.length; i++) {

    var dataitem = userListGrid._data[i];
    //Some condition before add [IsChecked is a model property]
    if (dataitem.IsChecked == true) {
        selectedUserListGrid.dataSource.add(dataitem);
    }
}

Kendo UI - 从不同网格复制的批量编辑行导致两个网格中的行都被更新

2 个答案: