1. Home
  2. Forum
  3. JavaScript - EJ 2
  4. Data source not updating (edit) with data binding

Data source not updating (edit) with data binding

I'm creating a grid as given below.

this.resources is the array containing the data.  My expectation is that the data source will update accordingly with row additions, deletions and edits in the grid control.  Adding rows definitely updates  the data source.  However, editing DOES NOT.  I'm capturing the edit events through "actionComplete" and inspect the source array afterwards which clearly shows the data source is not changed even though the grid shows a change.​

I can do a workaround by capturing the edited row in the actionCompelte event and forcing an update on the data source. however, I doubt if that is the way to do it. 

Will apprecaite any assistance on this matter.


let grid = new Grid({
            dataSource: this.resources,
            editSettings: {
                allowEditing: true,
                allowAdding: true,
                allowDeleting: true,
                mode: 'Dialog'
            },
            toolbar: ['Add', 'Edit', 'Delete'],
            columns: [
                {
                    field: 'name',
                    headerText: 'Name',
                    width: 150
                },
                {
                    field: 'userName',
                    headerText: 'User Name',
                    width: 130,
                    textAlign: 'Right'
                },
                {
                    field: 'company',
                    width: 120,
                    headerText: 'Company',
                    textAlign: 'Right'
                },
                {
                    field: 'designation',
                    headerText: 'Designation',
                    width: 150,
                    textAlign: 'Right'
                },
                {
                    field: 'contactNumber',
                    headerText: 'Contact Number',
                    width: 150
                },
                {
                    field: 'email',
                    headerText: 'Email',
                    width: 150
                }
            ]
        });

7 Replies 1 reply marked as answer
SK Sujith Kumar Rajkumar Syncfusion Team January 11, 2022 05:46 AM UTC

Hi Franco, 
 
Greetings from Syncfusion support. 
 
From the provided information we could understand that you are trying to access the updated data from the initially assigned data variable but it does not have the newly updated values. You can get the updated Grid data source directly from its dataSource property in the actionComplete event as demonstrated in the below code snippet, 
 
// Grid’s actionComplete event handler 
function actionComplete(args: any): void { 
    if (args.requestType === 'save') { 
        var updatedData = grid.dataSource; 
        console.log(updatedData); 
    } 
} 
 
We have prepared a sample based on this for your reference. You can find it below, 
 
 
Please get back to us if you require any further assistance. 
 
Regards, 
Sujith R 


CE ceds replied to Sujith Kumar Rajkumar January 11, 2022 06:47 AM UTC

Good day,

Thanks for the assistance. I compared the solution to what I'm doing, and it seems like this only works if there is a primary key (remove the primary key in your solution and you will see it does not work). If the primary key is removed, then no updates are reflected in the dataSource property; Why is this the case ?

If this is the only way, is it possible to automatically assign a primary key id and not having the user to do it ? My use case will be a problem if the user has to manually enter a primary key id.


UPDATE:

Adding isIdentity:true to the id column seems to be doing the trick. However, the id value is always set as "undefined". So I don't really understand what's happening in the background. I need to save the data on the server and load it again. Saving the ids as "undefined" I think will cause problems when I load them again to the grid.


SK Sujith Kumar Rajkumar Syncfusion Team January 12, 2022 06:16 AM UTC

Hi Franco, 
 
For performing CRUD actions in the Grid, a primary key column with unique values is required. To define the primary key, set isPrimaryKey property of column to true in particular column. 
 
More details on this can be checked in the below documentation link, 
 
 
And the isIdentity property allows you to set the primary key value in server-side by setting the columns isIdentity property as ‘true’ in the primary key column. This will disable setting values for the primary key column while adding a new record and the value will be set based on the value assigned in the data base that is returned after performing the add operation. 
 
For both these cases a primary key column is required for performing the CRUD actions. So, if you do not wish to input the primary key value manually and also not set in in the server side then we suggest you to use the Grid’s actionBegin event to set a unique value to the primary key column field. This can be done when the event action is ‘add’ and requestType is ‘save’ as demonstrated in the below code snippet, 
 
// Grid’s actionBegin event handler 
function actionBegin(args: any): void { 
    if (args.requestType === 'save' && args.action === 'add') { 
        // Condition executes on performing add save action 
        // A new primary key value is assigned to the primary key data field 
        // Here we have generated a random number for demonstrating this case to you, so please ensure the primary key value set is a unique value 
        args.data.OrderID = parseInt((Math.random() * 1000).toString()); 
    } 
} 
 
You can set the primary column’s visibility hidden by setting the column’s visible property as ‘false’ so that it is not shown on edit. 
 
{ field: 'OrderID', isPrimaryKey: true, visible: false } 
 
We have prepared a sample based on this for your reference. You can find it below, 
 
 
 
Let us know if you have any concerns. 
 
Regards, 
Sujith R 


Marked as answer
CE ceds replied to Sujith Kumar Rajkumar January 12, 2022 06:56 AM UTC

Thanks, I guess a random id can work.  However, I've done the following for TreeGrid which increments the id.  It was a bit challenging due to children tasks.

By the way, referencing args.data on TreeGrid does not update the source data.  It only works with Grid.  Thus I had to do a workaround to access the data source directly.


actionComplete: function (args) {
                if (args.requestType === 'save') {
                    if (args.data.id == null) {
                   
                        let flattenedActions = flattenActions(thiss.actions);
                        let filteredActions = flattenedActions.filter(x=>x.id != null);
                        let maxId = 0;

                        if (filteredActions.length > 0) {
                            //@ts-ignore
                            maxId = Enumerable.from(filteredActions).select(x => x.id).max();
                        }

                        //There will always only be on null id.  Find it and add new id
                        for (let v of flattenedActions) {
                            if (v.id == null) {
                                v.id = maxId + 1;
                            }
                        }

                        thiss.actionsGrid.dataBind();
                        thiss.actionsGrid.refresh();
                    }
                }

                function flattenActions(actions)
                {
                    let flattenedActions = [];
       
                    for(let item of actions)
                    {
                        flattenedActions.push(item);

                        if (item.children != null) {
                            for (let childrenItem of flattenActions(item.children)) {
                                flattenedActions.push(childrenItem);
                            }
                        }
                    }
       
                    return (flattenedActions);
                }

            },


SK Sujith Kumar Rajkumar Syncfusion Team January 13, 2022 01:09 PM UTC

Hi Franco, 
 
We are currently validating the query on source data not updated properly in the TreeGrid component from our end and we will update you the further details on or before 18th January 2022. 
 
Until then your patience is appreciated. 
 
Regards, 
Sujith R 


CE ceds January 13, 2022 02:43 PM UTC

HI there,


Note that I think there are issues using TreeGrid, Grid and Gantt on the same page.  I have created a new issue regarding this.  I have found a workaround using the Gantt instread of TreeGrid so I'm fine for now thanks . 


SK Sujith Kumar Rajkumar Syncfusion Team January 14, 2022 03:09 AM UTC

Hi Franco, 
 
Thanks for the update. 
 
Please get back to us if you have any further queries. 
 
Regards, 
Sujith R 


Loader.
Up arrow icon