Custom Command to run server side code

[Sheldon]

I have looked through a bunch of the posts regarding this issue and haven't been able to piece together what I need yet for use in Razor Pages and not MVC.

I am looking to add a custom command button to the grid along with the default edit, delete, save and cancel.

This custom button needs to run Server Side code to copy the current row in which the button is clicked to run a stored procedure.

The commandClick function is fired but it doesn't seem to run the Server Side code which creates anew record in a database.

@{

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

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

    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" } });

}

<ejs-grid id="Grid" height="100%" allowTextWrap="true" allowGrouping="true" allowPaging="true" allowFiltering="true" allowSorting="true" allowSelection="true" enableAutoFill="true" load="onLoad" actionFailure="onActionFailure" allowExcelExport="true" commandClick="commandClick" toolbarClick="toolbarClick" toolbar="@(new List<string>() { "Add","ExcelExport" })">

    <e-grid-editsettings allowDeleting="true" allowEditing="true" allowAdding="true" showDeleteConfirmDialog="true"></e-grid-editsettings>

    <e-data-manager url="/Performance/Scorecards/Index?handler=LoadData" insertUrl="/Performance/Scorecards/Index?handler=Insert" removeUrl="/Performance/Scorecards/Index?handler=Delete" updateUrl="/Performance/Scorecards/Index?handler=Update" crudUrl="/Performance/Scorecards/Index?handler=Crud" adaptor="UrlAdaptor"></e-data-manager>

...

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

    </e-grid-columns>

</ejs-grid>

<script>

function commandClick(args) {

        // here we are making an ajax call to server 

        var ajax = new ej.base.Ajax({

            url: "/Performance/Scorecards/Index?handler=NewScorecard",

            type: "POST",

            contentType: "application/json",

            data: JSON.stringify({ value: args.rowData })

        });

        //alert(data);

        ajax.send();

        ajax.onSuccess = function (data) {

            // on the success event we are showing the data returned from server 

            alert(data);

        };

    } 

</script>

   

public Scorecard NewScorecard([FromBody] CRUDModel<Scorecard> value)

        {

            ...

            return value.Value;

        }

Thanks

[Balaji Sekar]

Hi Sheldon, 

 

Based on your query we understand that you want call the server side method using Ajax in Razor page while click on Grid’s custom command button. So, we have achieved your requirement using commandClick event and in this event we have passing the Grid’s row details to server through the ej2.base.Ajax. 

 

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

[Client side code] 

[Index.cshtml] 

 

@{ 

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

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

    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" } }); 

 

} 

<ejs-grid id="Grid" load="onLoad" allowPaging="true" allowpaging="true" commandClick="commandClick" toolbar="@( new List<object>() {"Add","Edit","Delete","Update","Cancel", "Search"})"> 

    <e-grid-editsettings allowAdding="true" allowDeleting="true" allowEditing="true"></e-grid-editsettings> 

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

    <e-data-manager url="/Index?handler=DataSource" insertUrl="/Index?handler=Insert" removeUrl="/Index?handler=Delete" updateUrl="/Index?handler=Update" adaptor="UrlAdaptor"></e-data-manager> 

    <e-grid-columns> 

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

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

        <e-grid-column field="CustomerID" headerText="Customer Name" width="150"></e-grid-column> 

        <e-grid-column field="OrderDate" headerText="Order Date" customFormat="@(new { type ="dateTime", format="MM/dd/yyyy hh:mm:ss a" })" width="170"></e-grid-column> 

        <e-grid-column field="CustomerName" headerText="CustomerName" textAlign="Right" width="120"></e-grid-column> 

        <e-grid-column field="City" headerText="City" width="150"></e-grid-column> 

    </e-grid-columns> 

</ejs-grid> 

 

<script> 

    function commandClick(args) {         

        if (args.target.innerText == "DETAILS") { 

            // here we are making an ajax call to server  

            var ajax = new ej.base.Ajax({ 

                url: "/Index?handler=NewScorecard", 

                type: "POST", 

                contentType: "application/json", 

                dataType: "json", 

                data: JSON.stringify({ value: args.rowData }) 

            }); 

            ajax.beforeSend = function (xhr) { 

                ajax.httpRequest.setRequestHeader("XSRF-TOKEN", 

                    $('input:hidden[name="__RequestVerificationToken"]').val()); 

            } 

 

            ajax.send(); 

            ajax.onSuccess = function (data) { 

                // on the success event we are showing the data returned from server  

                alert(data); 

            }; 

        } 

    } 

</script> 

[Server code] 

[Index.cshtml.cs] 

  public JsonResult OnPostNewScorecard([FromBody] CRUDModel<OrdersDetails> value) 

        {            

            return new JsonResult(value.Value); 

        } 

 

Sample link: https://www.syncfusion.com/downloads/support/forum/160890/ze/Grid_RazorSample-CustomCommandButton-1149075506.zip  

 

Help Documentation: https://ej2.syncfusion.com/aspnetcore/documentation/grid/edit/#custom-command  

 

Please get back to us, if you need further assistance. 

 

Regards, 

Balaji Sekar