Question

What I am doing is copying rows from one grid to another. The origin grid is not editable, but the destination grid is.

So, when I load in a row and change it, it changes the values within the original grid as well.

Further more, if I add a row from the original grid to the destination grid twice, I get further issues. One data change on either of the rows within the destination grid changes the data within the other row on the destination table, as well as the ‘read-only’ version within the original grid.

I have a suspicion that this is caused by all copied rows retaining the data-uid of the parent from which it was copied. If someone could confirm/deny this and maybe give me a workaround, I’d be incredibly grateful!

Side note: Because of implementation requirements, all of this code MUST be client side, so I can’t do this work through controller methods. I did get it working this way, but it’s not good enough for what I need it to do.

Original Grid (Copying from):

@(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))

)

Copy function:

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

}

Destination Grid:

@(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

You can use the toJSON method to get the raw data:

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

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