Buttons for Column Command

[slynch]

I am trying to add a button in the grid column with either an icon or custom css.

1. How can I accomplish this

2. How do I call a server side method from the controller with that button 

Similar to this: https://www.syncfusion.com/kb/4105/how-to-place-icons-in-command-column-buttons-instead-of-text.

I am coming from Webforms and things are difficult now as I am just starting to learn. Thank you.

[Manivel Sellamuthu]

Hi Stephen, 

Greetings from Syncfusion support. 

Before proceeding your query, could you please confirm whether you are using EJ 1 or EJ 2 Components of the Syncfusion. 

If you are using EJ 2 you can accomplish your requirement by using custom command column buttons. Please refer the below documentation link for more information. 

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

Using commandClick method of the Grid, which triggers while clicking the command column button. In that event you can  call the server side method. 

API: https://ej2.syncfusion.com/documentation/api/grid/#commandclick 

Regards, 

Manivel 

[slynch]

Thank you.  I have it working with this:

     

commands.Add(new { buttonOption = new { content = "Jump", cssClass = "btn btn-outline-primary" } });

How do I apply the below class to the above?  

[slynch]

OK, I figured it out:

   @{

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

                                commands.Add(new { buttonOption = new { content = "", iconCss = "fas fa-info-circle fa-fw", cssClass = "e-info" } });

                            }

How do I call an action event? 

[slynch]

Please bear with me as I am just starting.  After spending 8 hours this is all I have.   How do I write the javascript to get the id of  CompanyID and send to IActionResult of controller? 

[Manivel Sellamuthu]

Hi Stephen, 

Thanks for your update. 

We appreciate your efforts. 

You can make  ajax request to access server side methods and return the data inside the commandClick method. Please find the below code example for more information. 

@{ 

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

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

} 

 

<div class="control-section"> 

    <ejs-grid id="Grid" dataSource="@ViewBag.DataSource"  commandClick="commandClick" allowPaging="true"> 

 . . .s 

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

        </e-grid-columns> 

    </ejs-grid> 

</div> 

 

<script> 

        function commandClick(args) { 

// here we are making an ajax call to server 

               var ajax = new ej.base.Ajax({   

                url: "/Home/CommandColumnHanlde",   

                type: "POST",   

                   contentType: "application/json", 

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

            });   

    ajax.send(); 

            ajax.onSuccess = function (data) { 

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

                alert(data); 

    }; 

        } 

</script> 

[Home controller] 

 

namespace TestSample.Controllers 

{ 

 

    public class HomeController : Controller 

    { 

 

        public IActionResult Index() 

        { 

            ViewBag.DataSource = OrdersDetails.GetAllRecords().ToList(); 

            return View(); 

        } 

 

        public OrdersDetails CommandColumnHanlde([FromBody] CRUDModel<OrdersDetails> value) 

        { 

            return value.Value; 

        } 

    } 

      

  } 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/153795-commandcolumns_-_Sample-1353871227.zip 

Please let us know, if you need further assistance. 

Regards, 

Manivel 

[slynch]

Manivel;

Thank you so much, it worked!

[Manivel Sellamuthu]

Hi Stephen, 

We are glad that the provided solution helped. 

Please get back to us, if you need further assistance. As always, we will be happy to assist you. 

Regards, 

Manivel 

[Manivel Sellamuthu]

Hi Stephen, 

We are glad that the provided solution helped. 

Please get back to us, if you need further assistance. As always, we will be happy to assist you. 

Regards, 

Manivel 

[Sayed]

Hello Dear, What about if i want to make 2 custom button with two diff events ?

[Joseph Christ Nithin Issack]

Hi Sayed, 

  Thanks for your update. 

  Based on your requirement, you want to add two custom buttons in a command column in your grid. Your requirement can be achieved using the `commandClick` event of the EJ2 Grid, where you can handle the click event separately for each button in the command column. 

Please refer the below code example. 

 

@{  

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

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

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

}  

 

<div class="control-section"> 

    <div class="col-lg-6"> 

        <ejs-grid id="Grid" dataSource="ViewBag.DataSource1" commandClick="commandClick" allowSelection="true" allowPaging="true"  toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel", "Search" })"> 

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

            <e-grid-columns> 

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

                <e-grid-column field="EmployeeID" headerText="Employee ID" width="150" allowEditing="true"></e-grid-column> 

                <e-grid-column field="EmployeeID" headerText="Employee ID" width="150" allowEditing="false"></e-grid-column> 

                <e-grid-column field="ShipState" headerText="Ship City" width="150"  allowEditing="true"></e-grid-column> 

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

            </e-grid-columns> 

        </ejs-grid> 

    </div> 

</div> 

 

 

<style> 

</style> 

 

 

<script> 

    function commandClick(args) { 

        if(args.commandColumn.type == "userstatus_1") { 

            // here we are making an ajax call to server  

            var ajax = new ej.base.Ajax({    

                url: "/Home/CommandColumnHanlde",    

                type: "POST",    

                contentType: "application/json",  

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

            });    

            ajax.send();  

            ajax.onSuccess = function (data) {  

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

                alert(data);  

            };  

        } 

        else if(args.commandColumn.type == "userstatus_2") { 

            // perform actions for second button here. 

        } 

    } 

</script>  

Sample: https://www.syncfusion.com/downloads/support/forum/153795/ze/NETCOR~1-2011575515 

Please get back to us for further details. 

Regards, 

Joseph I.