Custom Command Button Actions

[Daniel]

Good morning!

I fear I have found an error in the grid documentation, at the very least when using the ASP.NET Core tag helpers. I've been trying to add custom commands to the commands column for eight hours now (I do NOT want to use the built in CRUD actions for various reasons). I'm able to create the button object fine with the following:

var custCommands = new List<object>

{

new {buttonOption = new {click = "onViewClick", iconCss = "fas fa-info-circle fa-fw", cssClass = "e-info"}},

new {buttonOption = new {click = "onEditClick", iconCss = "fas fa-edit fa-fw", cssClass = "e-success"}},

new {buttonOption = new {click = "onDeleteClick", iconCss = "fas fa-trash-alt fa-fw", cssClass = "e-danger"}}

};

The relevant line in my grid creation is:

<e-grid-column showColumnMenu="false" allowGrouping="false" textAlign="Center" headerTextAlign="Center" allowSorting="false" headerText="Options" width="150" customAttributes="@{ new {@class = "datatables_options"} }" commands="custCommands"></e-grid-column>

And the first of my Javascript event functions is:

function onViewClick(args)

{

console.log("View clicked");

}

The button creation itself works fine; all three buttons display in the commands column without issue. The events, however, will not bind. Using the developer console I can manually trigger my event functions, but no amount of effort will allow me to trigger those functions via button click, even though the syntax is taken straight from your documentation.

Any help in this matter would be greatly appreciated.

Regards,

Dan

[Pavithra Subramaniyam]

Hi Daniel, 

Thanks for contacting Syncfusion Support. 

We have checked your query and You can assign the command buttons in the ‘column.commands’ property  and You can also define the click event for command button as follows since Essential JavaScript 2 ASP.NET CORE button uses document click event. 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.  

[Daniel]

I would humbly suggest  that the documentation is changed to reflect this, to save someone else time and effort in the future. The tag helper documentation in general should be expanded, refined, and error checked. There's a lot of fairly simple features I've tried to implement so far, that I've had to go hunting for how to get them working (and in a lot of cases, figure it out on my own since the documentation wasn't correct).

I have the click event working properly now using your example, however this is just retrieving an HTML element and assigning a propagation event handler to it. Doing so is fine for my application, but without a reference to the underlying grid, how would I go about getting the specific row data for the clicked on row? I'm guessing there's a fairly easy way to access the API, but that's another thing that's missing from the documentation.

[Venkatesh Ayothi Raman]

Hi Daniel, 

 

Thanks for the update. 

  

 

We have checked your query and You can achieve your requirement by using ‘rowSelected’ event which will be triggered when a Grid row has been selected. Please refer to the below code example, Documentation link and sample link. 

[index.cshtml] 

<ejs-grid id="Grid" rowSelected="selected" allowPaging="true"> 

    <e-data-manager url="/Home/GridDatasource" adaptor="UrlAdaptor"></e-data-manager> 

    <e-grid-columns> 

        <e-grid-column field="ProductID" headerText="ProductID" isPrimaryKey="true" textAlign="Right" width="120"></e-grid-column> 

        <e-grid-column field="Quantity" headerText="Quantity" width="200"></e-grid-column> 

        <e-grid-column field="ProductName" headerText="ProductName" width="200"></e-grid-column> 

    </e-grid-columns> 

</ejs-grid> 

 

<script> 

    //  triggers after a row has been selected 

    function selected(args) { 

        alert(args.data.ProductID); 

        console.log(args); 

 

    } 

 

</script>   

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

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

Note: We can get the Grid API information for Core Platform in following link, 

https://ej2.syncfusion.com/documentation/grid/api.html?lang=typescript 

 

Also, we have considered this” Revamp the ASP.NET Core documentation” as documentation improvement task and it will be on live any of upcoming release. 

 

Please let us know if you have any of further assitance. 

Regards, 

Venkatesh Ayothiraman.