Using CommandClick on Razor EJ2 Grid CSHTML page seems to stop it working

[Aubyn Crawford]

I have a working EJS Data Grid, and I want to add some buttons that trigger JavaScript functions. Formatting and buttons all appears to be working, BUT as soon as I add .CommandClick into the Razor definition, the grid is no longer sent to the client and when looking at the page it just renders:

<grid id="Binding"></grid>

Working razor code:

        <div class="content-container-row">

            @(Html.EJS().Grid<TIB.dbClasses.sprSharedFilesList>("Binding")

                    .DataSource((IEnumerable<TIB.dbClasses.sprSharedFilesList>)Model.Files)

                    .AllowPaging()

                    .EnableHover(true)

                    .Columns(col =>

                    {

                        col.Field("LastSharedEmailDate").HeaderText("Last Shared").Add();

                        col.HeaderText("Actions").Commands(commands).Add();

                    }).Render()

        )    

        </div>

Failing code:

        <div class="content-container-row">

            @(Html.EJS().Grid<TIB.dbClasses.sprSharedFilesList>("Binding")

                    .DataSource((IEnumerable<TIB.dbClasses.sprSharedFilesList>)Model.Files)

                    .AllowPaging()

                    .EnableHover(true)

                    .Columns(col =>

                    {

                        col.Field("LastSharedEmailDate").HeaderText("Last Shared").Add();

                        col.HeaderText("Actions").Commands(commands).Add();

                    }).CommandClick("onClick").Render()

        )    

        </div>

Is this a bug, or do I need to use CommandClick differently?

I am running this on .Net 4.8 and the latest EJ2 NuGet packages

[Rajapandi Ravi]

Hi Aubyn, 

Based on your query you are mentioned that after defining the commandclick button the grid is no longer sent to the client. So, we suspect you like to perform some action in the commandclick event after the command button is clicked.  

We have prepared a sample and achieved your requirement and tried to reproduce the issue. In our sample the commandClick event is triggered and it is working fine at our end. 

Please refer the below code example and sample for more information. 

@{ 

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

    commands.Add(new { type = "Edit", buttonOption = new { iconCss = "e-icons e-edit", cssClass = "e-flat" } }); 

    commands.Add(new { type = "Delete", buttonOption = new { iconCss = "e-icons e-delete", cssClass = "e-flat" } }); 

    commands.Add(new { type = "Save", buttonOption = new { iconCss = "e-icons e-update", cssClass = "e-flat" } }); 

    commands.Add(new { type = "Cancel", buttonOption = new { iconCss = "e-icons e-cancel-icon", cssClass = "e-flat" } }); 

} 

 

 

<div class="control-section"> 

    @( 

                            @Html.EJS().Grid<gridmvclocalization.Controllers.OrdersDetails>("Grid").DataSource((IEnumerable<object>)ViewBag.dataSource).Columns(col => 

                            { 

                                col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width("100").Add(); 

                                col.Field("CustomerID").HeaderText("Customer Name").Width("100").Add(); 

                                col.HeaderText("Manage Records").Width("160").Commands(commands).Add(); 

                            }).AllowPaging().CommandClick("commandClick").EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Normal); }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).PageSettings(page => page.PageCount(2)).Render() 

    ) 

</div> 

 

<script> 

    function commandClick(args) { 

        //use your code here 

    } 

 

</script> 

 

 

Sample: https://www.syncfusion.com/downloads/support/forum/155188/ze/155188-1024614156.zip 

If we misunderstood anything wrongly, please share the below details that will be helpful for us to provide better solution. 

1)   Please share your exact requirement scenario with detailed description. 

2)   If possible,  Explain your requirement in detail with some pictorial representation. 

3)   If possible, please reproduce the issue with our above attached sample. 

4)   Share your syncfusion package version 

Regards,
Rajapandi R