CommandButtonOptions click

[Mini Dev]

Hi,

commandEditClick function is never called. 

How can I fix?

Attachmenting an image

Thanks

Attachment: Capture_8c2e40a.zip

[Pavithra Subramaniyam]

Hi Mini, 

We have checked your query and we suspect that you want to use Custom Command Columns feature with click event of Essential JavaScript 2 Grid component. You can assign the command buttons in the ‘column.commands’ property. You can also define the click event for command button as follows. Please refer to the below code example, documentation link and sample link. 

[index.chtml] 

<div> 

    @{ 

 

        List<object> commands = new List<object>(); 

        commands.Add(new { buttonOption = new { content = "Details", cssClass = "e-flat e-details" } }); 

    } 

<ejs-grid id="Grid" dataSource="ViewBag.dataSource" dataBound="dataBound" allowPaging="true"> 

        <e-grid-editSettings allowAdding="false" allowDeleting="false" allowEditing="false"></e-grid-editSettings> 

        <e-grid-pagesettings pageCount="5"></e-grid-pagesettings> 

        <e-grid-columns> 

            .  .  . 

            <e-grid-column headerText="Manage Records" width="150" commands="commands"></e-grid-column> 

        </e-grid-columns> 

    </ejs-grid> 

 

<script> 

    function dataBound(e) { 

        var ele = document.getElementsByClassName("e-grid")[0] 

        ele.addEventListener('click', function (e) {       //click event for command button 

            if (e.target.classList.contains('e-details')) { 

                

                alert("click event"); 

            } 

        }); 

 

    } 

</script> 

Documentation: https://ej2.syncfusion.com/aspnetcore/documentation/grid/edit.html#command-column  

Sample               : http://www.syncfusion.com/downloads/support/directtrac/general/ze/EJ2-dotnet-core-2132584569  

Regards, 

Pavithra S. 

[Mini Dev]

Hi, 

yes the click is now triggered.

However I need to get the id of the selected row.

Attachment an screenshot.

It doesn't work.

Maybe do I have to disable selection in the grid? How can I fix?

Thanks

[Mini Dev]

Here the screenshot

Attachment: Capture_96913807.zip

[Pavithra Subramaniyam]

Hi Mini, 

 

Query #1:  I need to get the id of the selected row. 

 

You can get the selected row index by using ‘grid.selectedRowIndex’ API. We have prepared a simple sample based on your requirement. Please refer to the below code example, Documentation link and sample link. 

 

[index.chtml] 

<ejs-grid id="Grid" dataSource="ViewBag.dataSource" dataBound="dataBound" allowPaging="true"> 

        <e-grid-editSettings allowAdding="false" allowDeleting="false" allowEditing="false"></e-grid-editSettings> 

        <e-grid-pagesettings pageCount="5"></e-grid-pagesettings> 

        <e-grid-columns> 

             .  .  . 

            <e-grid-column headerText="Manage Records" width="150" commands="commands"></e-grid-column> 

        </e-grid-columns> 

    </ejs-grid> 

 

<script> 

   function dataBound(e) { 

        var ele = document.getElementsByClassName("e-grid")[0] 

        ele.addEventListener('click', function (e) {       //click event for command button 

            if (e.target.classList.contains('e-details')) { 

                var grid = document.getElementsByClassName('e-grid')[0].ej2_instances[0];  // grid instance 

                var selectedRowIndex = grid.selectedRowIndex; // getting selected row index 

               alert(selectedRowIndex); 

            } 

        }); 

 

    } 

</script> 

 

Documentation : https://ej2.syncfusion.com/documentation/grid/api-grid.html?lang=typescript#selectedrowindex  

 

Sample               : http://www.syncfusion.com/downloads/support/directtrac/general/ze/selectedindex1175106624  

 

Query #2: do I have to disable selection in the grid? How can I fix? 

 

If you disable selection, then you cannot get the row index. Could you please confirm whether you want to get the selected row Index with disabled selection? The providing information will help us to provide a better solution as early as possible. 

 

Note: You can set allowSelection as ”false”, to disable selection. 

 

Regards, 

Pavithra S.