Click edit on any row but the first and the values fill with previous row's values?

[Cindy Kee]

I thought I was about done implementing all of the features that I needed to do for this grid, but I have stumbled across one last issue.

I have my grid finally working for add, edit, and delete functionality. Except, that if I click a row that isn't the first row (let's say it's the second row), and click the Edit toolbar icon, the row become editable, but the fields are filled with the values from the first row! I have attached an image file for you to see.

Why is this happening? I would like the Edit function to show the actual values from that row. Any help?

Cindy

Here is my grid code:

@using SyncfusionMvcApplication3.Models

@model IEnumerable<OrdersView>

@(Html.EJ().DataManager("Customers").Json((IEnumerable<Customer>)ViewBag.childCustomers))

@(Html.EJ().Grid<OrdersView>("FlatGrid")

    .Datasource(Model)

    .AllowScrolling()
    .AllowPaging()    /*Paging Enabled*/
    .Columns(col =>
    {
        col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(75).Add();
        col.Field("CustomerID").HeaderText("Customer ID").Width(80).AllowEditing(true).Add();
        col.Field("EmployeeID").HeaderText("Employee ID").TextAlign(TextAlign.Right).Width(75).Add();
        col.Field("Freight").HeaderText("Freight").TextAlign(TextAlign.Right).Width(75).Format("{0:C}").Add();
    })

    .ClientSideEvents(eve => { eve.BeginEdit("beginedit").ActionComplete("actioncomplete"); })

    .ChildGrid(child =>
    {
        child.Datasource(ds => ds.URL(@Url.Action("ChildDataSource"))
            .InsertURL(@Url.Action("ChildInsert"))
            .UpdateURL(@Url.Action("Update"))
            .RemoveURL(@Url.Action("Delete"))
            .Adaptor(AdaptorType.UrlAdaptor))
            .QueryString("OrderID")

            .EditSettings(edit =>
            {
                edit.AllowAdding().AllowDeleting().AllowEditing()
                    .RowPosition(RowPosition.Top)
                    .ShowDeleteConfirmDialog(true)
                    ;
            })

            .ToolbarSettings(toolbar =>
            {
                toolbar.ShowToolbar().ToolbarItems(items =>
                {
                    items.AddTool(ToolBarItems.Add);
                    items.AddTool(ToolBarItems.Edit);
                    items.AddTool(ToolBarItems.Delete);
                    items.AddTool(ToolBarItems.Update);
                    items.AddTool(ToolBarItems.Cancel);
                });
            })

            .ClientSideEvents(evnt => evnt.ActionComplete("actionComplete"))

            .Columns(col =>
            {
                col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Visible(false).TextAlign(TextAlign.Right).Width(75).Add();
                col.Field("ProductName").HeaderText("Product Name").Width(120).Add();
                col.Field("Quantity").Width(100).Add();
                col.Field("ExtendedPrice").Width(100).Add();
            });
    })
)

    <script type="text/javascript">
        function actionComplete(args) {

            if (args.requestType === "add" || args.requestType === "beginedit") {
                var $edit = $("form[id$='EditForm']");
                $edit.on("keypress keyup keydown", preventEnterKey);
            };
        };

        function preventEnterKey(e) {
            if (e.which === 13 || e.which === 169) {
                e.preventDefault();
                return false;
            };
            return true;
        }
    </script>

Attachment: Grid_image_9d84484d.zip

[Balaji Marimuthu]

Hi Cindy,

Thanks for contacting Syncfusion support.

In Grid the Editing operation is performed based on the primary key field and it must be a unique values. But In provided code snippets you have used the IsPrimaryKey and QueryString to the same field name “OrderID”, So while editing the second row the first row data is displayed.

@(Html.EJ().Grid<OrdersView>("FlatGrid")

    .Datasource(Model)

    . . .

    .ChildGrid(child =>

    {

        child.Datasource(ds => ds.URL(@Url.Action("ChildDataSource"))

            .InsertURL(@Url.Action("ChildInsert"))

            .UpdateURL(@Url.Action("Update"))

            .RemoveURL(@Url.Action("Delete"))

            .Adaptor(AdaptorType.UrlAdaptor))

            .QueryString("OrderID")

            . . .

            .ClientSideEvents(evnt => evnt.ActionComplete("actionComplete"))

            .Columns(col =>

            {

                col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(75).Add();

                col.Field("ProductName").HeaderText("Product Name").Width(120).Add();

                col.Field("Quantity").Width(100).Add();

                col.Field("ExtendedPrice").Width(100).Add();

            });

    })
)

To overcome this issue, we suggest you to use the different field name (unique value field) to the primary key column and set the IsPrimaryKey to the unique value field in Child Grid.




If you still face the issue, kindly share your sample with Essential studio version details.


Regards,
Balaji Marimuthu

[Cindy Kee]

Thank you, that did the trick! Once I got the code moved into my regular project with a real database on the backend, it worked perfectly!

Thanks again,

Cindy

[Venkatesh Ayothi Raman]

Hi Cindy,

Thanks for the update.

We are happy to hear that you requirement is achieved.

Regards,
Venkatesh Ayothiraman.