This is a migrated thread and some comments may be shown as answers.

Copy row in the grid

3 Answers 578 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Henry
Top achievements
Rank 1
Henry asked on 13 Aug 2012, 08:10 PM
When I copy a row using the Kendo Grid API, the new row is created.
However when i edit the parent row, the newly created row also gets the same data. 

How can I decouple these two rows?

Thanks
henry

3 Answers, 1 is accepted

Sort by
0
Petur Subev
Telerik team
answered on 16 Aug 2012, 02:02 PM
Hi Henry,

Could you please provide more details about your copy/paste implementation, since the Grid does not support it out-of-the-box?

Kind Regards,
Petur Subev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Jark Monster
Top achievements
Rank 1
answered on 13 Sep 2012, 07:11 PM
I am experiencing the same issue.

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.

Side note: Because of implementation requirements, all of this code MUST be client side.

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:
<script>
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");
}
</script>

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

0
Jark Monster
Top achievements
Rank 1
answered on 24 Sep 2012, 02:49 PM
Henry,

I posted this question up on Stack Overflow a couple days ago, and got an answer that solved my problem.  I hope this solves yours as well

Stack Overflow

The quoted response (courtesy of Atanas Korchev):

You can use the toJSON method to get the raw data:
var dataItem = productBookGrid.dataItem($(this));
itemGrid.dataSource.add(dataItem.toJSON());

Tags
Grid
Asked by
Henry
Top achievements
Rank 1
Answers by
Petur Subev
Telerik team
Jark Monster
Top achievements
Rank 1
Share this question
or