How to get the PrimaryKey from command button click event in Grid

[Jimmy Soh]

Hi

I have a command button to trigger click event in data-bound Grid.

But I can't find any documentation on your site that show me how to retrieve the primary key of the row the button being clicked.

Can you advice? thanks. 

        @(Html.EJ().Grid<PageBanner>("Binding")

            .Datasource((IEnumerable<object>)ViewBag.datasource)

            .AllowSelection(false)

            .Columns(col =>

            {

                col.Field("i_banner_id").HeaderText("ID").IsPrimaryKey(true).Visible(false).Add();

                col.Field("u_title").HeaderText("Title").Width(80).Add();

                col.HeaderText("Edit").Commands(command =>

                {

                    command.Type("Edit")

                           .ButtonOptions(new Syncfusion.JavaScript.Models.ButtonProperties()

                           {

                               Text = "Edit",

                               Width = "50px",

                               Click = "onEditClick"

                           }).Add();

                })

               .IsUnbound(true)

               .Add();

            })

<script type="text/javascript">

    function onEditClick(args) {

        for (var key in args) {

            alert(args[key]);

        }

    }

</script>

[Gowthami V]

Hi Jimmy,
Thanks for using Syncfusion products.
We can achieve your requirement by passing the rowElement index to the getCurrentViewData method for getting the clicked record. With that record we can get the primary key value of the particular row in the Click event of the Command button as follows.

@(Html.EJ().Grid("Binding")
.Datasource((IEnumerable)ViewBag.datasource)
. . . .

.Columns(col =>
{

col.HeaderText("Edit").Commands(command =>
{

.ButtonOptions(new Syncfusion.JavaScript.Models.ButtonProperties()

{

Click = "onEditClick"

}).Add();

})
)

<script type="text/javascript">

function onEditClick(args)

{

var grid = $("# Binding ").ejGrid("instance");

var index = this.element.closest("tr").index(); //For getting clicked rowElement(tr) index

var record = grid.getCurrentViewData()[index]; //For getting the record by passing the row index

var primaryKeyValue=record[i_banner_id]; //Here i_banner_id is primarykey column.

}
</script>

Please try the above snippet and let us know if you have any queries.
Regards,
Gowthami V.

[Jimmy Soh]

Hi Thanks for the example. Will try it out.

[Gowthami V]

Hi Jimmy,

Thanks for your update,

Please get back to us if you need any further assistance. We will happy to assist you.

Regards,
Gowthami V.

[Edwin Kurniawan]

Hi Gowthami,

this line will always return index 0 regardless real index row if grid is grouped
    var index = this.element.closest("tr").index(); //For getting clicked rowElement(tr) index

Do you have any workaround? Is there is no keyFieldId in args?

[Seeni Sakthi Kumar Seeni Raj]

Hi Edwin, 

We are able to reproduce the problem at our end. To overcome this problem, use the getIndexByRow method of the Grid which will filter out only the record rows and returns the exact index of the tr. Refer to the following code example and API reference section of the . 

    <script> 

        function onEditClick(args) { 

            var grid = $("# Binding ").ejGrid("instance"); 

            //getIndexByRow method 

            var index = grid.getIndexByRow(this.element.closest("tr")); //For getting clicked rowElement(tr) index 

            var record = grid.getCurrentViewData()[index];  

            var primaryKeyValue = record[i_banner_id]; 

        } 

    </script> 

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

Regards, 

Seeni Sakthi Kumar S. 

[Edwin Kurniawan]

Hi Seeni Sakthi,

The new code snippet is working nicely.
Thank you for your solution, GBU.


Best regards,


Edwin.

[Farveen Sulthana Thameeztheen Basha]

Hi Edwin, 

  

We are happy to hear that the provided solution has been working fine at your end. 

  

Regards, 

Farveen.T