1. Home
  2. Forum
  3. React - EJ 2
  4. Update data of gridchild when data change

Update data of gridchild when data change

Hi

İ have Grid and Childgrid, 

When i click switch on childgrid, my rest service change data and return for me new data.

İ dont want update all childgrid data, i want update i changed row. So cannot use setRowData for childgrid.

T



16 Replies
RS Rajapandiyan Settu Syncfusion Team April 15, 2022 10:13 AM UTC

Hi Yahya,


Thanks for contacting Syncfusion support.


We are unable to understand your requirement clearly at our end. Kindly share the below details to validate further.


  1. Kindly explain your requirement in detail.
  2. Are you want to change the whole data of childGrid when getting the response from server?
  3. Or, Are you want to change the particular row data of childGrid?
  4. How could you perform this action (When i click switch on childgrid, my rest service change data and return for me new data.) – share the complete video demo it will very helpful to understand your requirement.
  5. Share the complete Grid code.


Regards,

Rajapandiyan S


YA Yahya Alatas April 15, 2022 11:40 AM UTC

Hi

  1. Or, Are you want to change the particular row data of childGrid? 


Actualy it's my question. 



Regards


JC Joseph Christ Nithin Issack Syncfusion Team April 18, 2022 06:11 PM UTC

Hi Yahya,


  Thanks for your update.


  We are still not clear about your requirement, kindly share the complete details requested in the previous update so that we can be able to proceed further validation.


  • Please share the video or screenshot of how you have placed the switch or how to perform the mentioned action (When i click switch on childgrid, my rest service change data and return for me new data.).
  • Have you placed the switch or button in one of the column in a row or you have placed an external switch?
  • Share the complete grid rendering code or share a simple sample.
  • Kindly explain your requirement in detail so that we may be able to proceed further.


Please provide the requested details so that we may be able to proceed further in validating the requirement.


Regards,

Joseph I.


YA Yahya Alatas May 3, 2022 01:26 PM UTC

Thank you for update.

Please just tell me that

Question: How can i updated any  childgrid row. 

İt s my question and clearly


JC Joseph Christ Nithin Issack Syncfusion Team May 6, 2022 03:18 AM UTC

Hi Yahya,



Greetings from Syncfusion support.


  Currently we are validating your query, we will provide further details on or before 10th May 2022. We appreciate your patience until then.


Regards,

Joseph I.


JC Joseph Christ Nithin Issack Syncfusion Team May 10, 2022 12:59 PM UTC

Hi Yahya,


  Thanks for your patience.


  Based on your requirement, we have prepared a sample to update the child grid row when clicking a custom button in the toolbar. You can achieve this requirement by updating the row using the `updateRow` method in the `toolbarClick` event of the EJ2 Grid.


Please refer the below code example.


 

childGrid = {

    dataSource: orderDatas,

    queryString: 'EmployeeID',

    allowPaging: true,

    editSettings: {

      allowEditing: true,

      allowAdding: true,

      allowDeleting: true,

    },

    pageSettings: { pageSize: 6, pageCount: 5 },

    toolbar: [

      {

        text: 'Update Row',

        tooltipText: 'Update Row',

        id: 'updaterow',

      },

    ],

    toolbarClick: (args) => {

      if (args.item.id == 'updaterow') {

        var childGrid =

          args.item.controlParent.element.parentElement.ej2_instances[0];

        childGrid.updateRow(2, {

          OrderID: 10275,

          ShipCity: 'Graz',

          Freight: 136.54,

          ShipName: 'Ernst Handel',

        });

      }

    },

    columns: [

      {

        field: 'OrderID',

        headerText: 'Order ID',

        textAlign: 'Right',

        width: 120,

        isPrimaryKey: true,

      },

      { field: 'ShipCity', headerText: 'Ship City', width: 120 },

      { field: 'Freight', headerText: 'Freight', width: 120 },

      { field: 'ShipName', headerText: 'Ship Name', width: 150 },

    ],

  };

 


Api: https://ej2.syncfusion.com/react/documentation/api/grid/#toolbar
https://ej2.syncfusion.com/react/documentation/api/grid/#toolbarclick
https://ej2.syncfusion.com/react/documentation/api/grid/#updaterow


Sample: https://stackblitz.com/edit/react-rqvzek?file=index.js


Please get back to us for further details.


Regards,

Joseph I.


YA Yahya Alatas May 10, 2022 05:37 PM UTC

Thank you so much.


JC Joseph Christ Nithin Issack Syncfusion Team May 11, 2022 04:49 PM UTC

Hi Yahya,


  Thanks for your update.


  We are glad that the provided solution resolved your query.


  Please get back to us for further details.


Regards,

Joseph I.


YA Yahya Alatas July 6, 2022 09:44 AM UTC

İ want to ask something else.

how can i reach child grid via parent grid reference?

For example.

this.parentGrid.element... just like that.

because i wanna get that

updateRow(2, {

OrderID: 10275,

ShipCity: 'Graz',

Freight: 136.54,

ShipName: 'Ernst Handel',

});


RS Rajapandiyan Settu Syncfusion Team July 7, 2022 08:48 AM UTC

Hi Yahya,


Thanks for your update.


Each childGrid is worked as a separate Grid component. We can’t get the separate childGrid instance through the parent Grid instance.


The only way is we can get all the available childGrid elements by using querySelector on the parent Grid element. Find the below code example and sample for more information.


 

  btnClick(args) {

    var childGridsele = this.grid.element.querySelectorAll('.e-grid');

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

      var childGridIns = childGridsele[i].ej2_instances[0]; // get the childGrid instances by looping all the childGrid element

      console.log(childGridIns);

    }

  }

 


Sample: https://stackblitz.com/edit/react-rqvzek-a2ookm?file=index.js


Regards,

Rajapandiyan S


YA Yahya Alatas August 18, 2022 10:22 PM UTC

My intent is when click on play button, i wanna update current row Please click on it to open image.

How can i do that exactly.




JC Joseph Christ Nithin Issack Syncfusion Team August 19, 2022 05:29 AM UTC

Hi Yahya,


  Thanks for your update.


  Before proceeding to the solution we would like you to provide the following details which would be helpful for further validation.


  • Please explain the details you have used the column template or the command column for the play button.
  • Please share the details how you have handled the click event of the play button.
  • Please share the complete code for the grid and the button.
  • Please share the Syncfusion package version you are using.


Regards,

Joseph I.


YA Yahya Alatas August 19, 2022 07:55 AM UTC

All detail in zip file.

Best regards


Attachment: code_snipped_964f5bbf.zip

RS Rajapandiyan Settu Syncfusion Team August 26, 2022 06:46 AM UTC

Hi Yahya,


Thanks for your update.


Query: My intent is when click on play button, i wanna update current row


Based on your requirement, you want to update a row in the child grid when clicking a run button in that row.


When you click the run button, the click event will be triggered. By using the following code in the click event, you can dynamically update the target row in childGrid.


updateRow: https://ej2.syncfusion.com/react/documentation/api/grid/#updaterow
getRowInfo: https://ej2.syncfusion.com/react/documentation/api/grid/#getrowinfo

 

[index.js]

  childGrid = {

    dataSource: orderDatas,

    queryString: 'EmployeeID',

    allowPaging: true,

    editSettings: {

      allowEditing: true,

      allowAdding: true,

      allowDeleting: true,

    },

    columns: [

      {

        headerText: 'Edit Action',

        template: this.EditActionTemplate.bind(this),

        width: 120,

      },

      {

        field: 'OrderID',

        headerText: 'Order ID',

        textAlign: 'Right',

        width: 120,

        isPrimaryKey: true,

      },

    ],

  };

 

  EditActionTemplate(args) {

    return <button onClick={this.UpdateBtnClick.bind(this)}>Run</button>;

  }

  UpdateBtnClick(args) {

    // get the current childGrid instance

    var childGridIns = args.target.closest('.e-grid').ej2_instances[0];

    // get the row information

    var rowInfo = childGridIns.getRowInfo(args.target.closest('td'));

    // get the row Index

    var rowIndex = rowInfo.rowIndex;

    // get the row data

    var rowData = rowInfo.rowData;

    rowData.ShipCity = 'Modified';

    rowData.Freight = 100;

    rowData.ShipName = 'Modified';

    // modified row data

    var editedData = rowData;

    // update the row

    childGridIns.updateRow(rowIndex, editedData);

  }

 


Sample: https://stackblitz.com/edit/react-rqvzek-cjdahn?file=index.js


Please get back to us if you need further assistance.

Regards,

Rajapandiyan S
If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.


YA Yahya Alatas August 28, 2022 10:06 AM UTC

Thank you so much it s work for me perfecly, i appriciate. 

Best regards.


RS Rajapandiyan Settu Syncfusion Team August 29, 2022 07:33 AM UTC

Hi Yahya,


We are happy to hear that you have achieved your requirement with the solution provided.


Please get back to us if you need further assistance.

Regards,

Rajapandiyan S


Loader.
Up arrow icon