Updated row data (after grid.setRowData(...)) shows in table, but not in edit dialog box.

[derekb]

Hello,

As the title says, updated row data is not showing in the edit dialog box. Here is my situation:

1) Select multiple rows

2) Right-click to open popup menu

3) Click on custom context menu item

4) Context menu item handler does a POST to an API

5) The API modifies a specific column for the selected rows

6) The API returns the updated records

7) The context menu handler will call grid.setRowData() when it receives the data back.

This works fine, as the data is correctly updated in the table. However, when double clicking the updated row, the old data shows in the edit dialog box.

1) How do I also update the edit data?

2) How many other row data sources are there?

Thanks,

Derek B

[Thavasianand Sankaranarayanan]

Hi Derek, 

Greetings from Syncfusion support. 

Query #1: How do I also update the edit data 

As per your query, we have created a sample and we can achieve your requirement by using the actionBegin event of Grid. In this event we have updated the edited data when we go for editing the row. Please refer the below code example and sample for more information. 

[index.cshtml] 

<ejs-button id="updateData" content="Update Data"></ejs-button> 

<ejs-grid id="Grid" dataSource="ViewBag.DataSource" allowPaging="true" actionBegin="onActionBegin" toolbar="@(new List<string>() {"Add", "Edit", "Update", "Delete" })" > 

    <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Dialog"></e-grid-editSettings>     

    <e-grid-columns> 

        <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" validationRules="@(new { required= true })" textAlign="Right" width="100"></e-grid-column> 

        <e-grid-column field="CustomerID" headerText="Customer ID" type="string" width="120"></e-grid-column> 

        <e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" editType="numericedit" width="120"></e-grid-column> 

        <e-grid-column field="ShipCity" headerText="Ship City" width="150"></e-grid-column> 

    </e-grid-columns> 

</ejs-grid> 

 

<script id='dialogtemplate' type="text/x-template"> 

    <div id="dialogTemp"> 

    </div> 

</script> 

 

<script type="text/javascript"> 

    var editData; 

    function onActionBegin(args) {         

        if (args.requestType == "beginEdit" && editData) { 

            args.rowData = editData; // Update the edited value for edit dialog box  

            editData = null; 

        } 

    } 

    document.getElementById("updateData").addEventListener("click", function (args) {         

        var grid = document.getElementById("Grid").ej2_instances[0]; 

        var selectData = grid.getSelectedRecords(); 

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

            selectData[i].CustomerID = "John"; 

            grid.setRowData(selectData[i].OrderID, selectData[i]); 

            editData = selectData[i]; // Get the updated value  

        } 

    })     

</script> 

 

Sample: http://www.syncfusion.com/downloads/support/forum/144837/ze/EJ2GridDTVrules-27052019-1511285636.zip 

 

Query #2: How many other row data sources are there? 

 

We are unclear about your query please clarify the following details for providing the better solution from our end. 

 

1. Are you mentioning for column dataSource ?
2. Do you want to know the Grid dataSource length ?
3. Share more details on your requirement

 

Regards, 

Thavasianand S. 

[Terry Carnes]

I am having this same problem.

• Edit row in grid using a custom dialog called in gridActionBegins(args). The dialog sets the data in the dialog using args.rowData['fieldname'] and then shows the dialog (this.addEditForm.dialogForm.show();) and then cancels the built-in dialog (args.cancel = true);
• Save the edited data on the onSave() method of the dialog calling a custom webservice to save the data to the database
• Use setRowData(PrimaryKey, Values) to save the changes to the grid.

All this works fine:

• Edited data shows up in the database
• Edited data shows up in the grid

However, when I edit the same row again, its args.rowData still shows the old data, not the edited data which is now being displayed in the grid. Since I'm not using the build in edit dialog, it seems that I am missing a call to update the args. Your solution to manually reset the args using the editData variable is a little more complicated because my custom dialog is a child component of the grid component. This would require me to use EventEmitter to pass the info back to the grid component. Is there a better built in way to keep these things in sync?

[Thavasianand Sankaranarayanan]

Hi Terry, 

Thanks for your update. 

Before proceeding to your query please provide the following details for better assistance.. 

1. Share the video demonstration of the issue
2. Share the exact or proper replication procedure to reproduce the issue.
3. Share the complete Grid code example.
4. Share the stack trace details if you face any script error in console.
5. If possible please provide an issue reproducible sample.
6. Share the Essential Studio version details.

Regards, 

Thavasianand S.