1. Home
  2. Forum
  3. ASP.NET Core - EJ 2
  4. Buttons for Column Command

Buttons for Column Command

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 


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

10 Replies
MS Manivel Sellamuthu Syncfusion Team April 30, 2020 11:44 AM UTC

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. 


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


Regards, 
Manivel 


SL slynch April 30, 2020 01:36 PM UTC

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?  




SL slynch April 30, 2020 03:20 PM UTC

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? 

SL slynch May 1, 2020 01:19 AM UTC

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? 




MS Manivel Sellamuthu Syncfusion Team May 1, 2020 06:58 AM UTC

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


Please let us know, if you need further assistance. 

Regards, 
Manivel 


SL slynch May 1, 2020 02:54 PM UTC

Manivel;

Thank you so much, it worked!

MS Manivel Sellamuthu Syncfusion Team May 4, 2020 04:44 AM UTC

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 


MS Manivel Sellamuthu Syncfusion Team May 4, 2020 04:44 AM UTC

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 


SA Sayed January 15, 2022 08:55 PM UTC

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


JC Joseph Christ Nithin Issack Syncfusion Team January 17, 2022 12:27 PM UTC

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>  



Please get back to us for further details. 

Regards, 
Joseph I. 


Loader.
Up arrow icon