How to pass row data id on external button click.

[alex]

         

I have the following column in a grid,

        <ej-column>

          <ej-template>

            <button id="${id}" ej-button="e-size.bind: miniBtnValue;

                    e-show-rounded-corner.bind: roundedCorner;

                    e-content-type: textandimage;

                    e-prefix-icon: e-icon e-uiLight e-edit;

                    e-text: Edit"

                    e-is-unbound="true"

                    e-on-click.trigger="editCustomer($event)"></button>

            <button id="${id}" ej-button="e-size.bind: miniBtnValue;

                    e-show-rounded-corner.bind: roundedCorner;

                    e-content-type: textandimage;

                    e-prefix-icon: e-icon e-uiLight e-delete;

                    e-text: Del" e-on-click.trigger="deleteCustomer($event)"></button>

          </ej-template>

        </ej-column>

Is there a better way to pass the id field - which is currently being passed as the id attribute of the <button>?

Could I just pass it in the e-on-click.trigger method? If so, what is the correct syntax for that?

Thank you,

Alex.

[Mani Sankar Durai]

Hi Alex, 

Thanks for contacting Syncfusion support. 

    We have checked your query and found that you would like to get the corresponding ID field value when clicking the respective row button in grid. We can get the ID field value using the following code example 

<ej-column> 

                <ej-template> 

                    <button id="${id}" ej-button="e-size.bind: miniBtnValue; 

                    e-show-rounded-corner.bind: roundedCorner; 

                    e-content-type: textandimage; 

                    e-prefix-icon: e-icon e-uiLight e-edit; 

                    e-text: Edit" 

                            e-is-unbound="true" 

                            e-on-click.delegate="editCustomer($event)"></button> 

                          ... 

 

           editCustomer(e){ 

                          var grid = $(".e-grid").ejGrid("instance"); 

                            var index = grid.getIndexByRow($(e.target).closest("tr")) //get the rowindex based on the target. 

                            var id = grid.model.dataSource()[index].OrderID; 

                           //get the value from the dataSource based on the index. 

                    } 

Refer the documentation link 

Link: https://help.syncfusion.com/api/js/ejgrid#methods:getindexbyrow 

Please let us know if you need further assistance. 

Regards, 

Manisankar Durai. 

[alex]

That did not work for me due to the pagination. 

If page one has 2 rows and page 2 has 1 row and I am on page 2 clicking on a button in the only row on that page, the code provided will get index 0. 

That will result on the retrieval of the data from the first row in page one, not page 2.

 

[Mani Sankar Durai]

Hi Alex, 

We are sorry for the inconvenience caused. 

                                         

We have checked the query and we are able to reproduce the reported issue.  We suggest you to get the data from the grid curretViewData instead of getting it from the grid dataSource.  So that when paging is done we can get the value based on the current page.  

Please refer the code example 

        editCustomer(e){ 

                        var grid = $(".e-grid").ejGrid("instance"); 

                            var index = grid.getIndexByRow($(e.target).closest("tr")) 

                            var id = grid.model.currentViewData[index].OrderID; 

                           alert(id); 

       }  

Please let us know if you need further assistance. 

Regards, 

Manisankar Durai.