We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

144837 May 24,2019 05:48 PM UTC Sep 19,2019 11:47 AM UTC ASP.NET Core - EJ 2 3
loading
Tags: DataGrid
derekb
Asked On May 24, 2019 05:48 PM UTC

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 [Syncfusion]
Replied On May 27, 2019 11:29 AM UTC

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> 
 
 
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
Replied On September 18, 2019 07:22 PM UTC

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 [Syncfusion]
Replied On September 19, 2019 11:47 AM UTC

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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon