We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Essential JS2

Syncfusion jQuery based widgets are no longer in active development. Switch to our pure JavaScript based next generation Essential JS 2 library.

Syncfusion Feedback

How to add custom HTML attributes to buttons in the command column?

Platform: jQuery |
Control: ejGrid

By default, the htmlAttributes property is available in Button. By using this property, you can add the custom attribute in the Grid command column button.

The following code example demonstrates how to set the custom attribute to the Grid command column.




The following screenshot displays the Command column button in the Grid:

Displays the Command column button in the Grid:


You must log in to leave a comment
Anis Boulaid
Nov 12, 2016
How about the Js function "onClick", can you complete the example,

I did a test by creating a function onClick with args parameter, but no luck :(
Apr 11, 2017
I just need the name of sender button. After a little research, i found that args has 6 properties inside :

args.target=[object HTMLButtonElement]
args.e=[object Object]
args.model=[object Object]

From information above i know that my args.target is a HTMLButtonElement. When i look which properties this object has.
And when i look to value property of args.target i found values which i wrote to command.Type.
After this information, i use the following configuration to know which cutom button is clicked :

Grid Cutom column definition:
col.HeaderText("Operations").Commands(command =>
                    .ButtonOptions(new Syncfusion.JavaScript.Models.ButtonProperties()
                        Width = "16px",
                        Click = "onClick",
                        ContentType = ContentType.ImageOnly,
                        HtmlAttributes=new Dictionary<string, object>() { {"title", "My Foo Button 1 Title" }, {"class", "imageforfoobutton1" } }
                    .ButtonOptions(new Syncfusion.JavaScript.Models.ButtonProperties()
                        Width = "16px",
                        Height = "16px",
                        Click = "onClick",
                        ContentType = ContentType.ImageOnly,
                        HtmlAttributes=new Dictionary<string, object>() { {"title", "My Foo Button 2 Title" }, {"class", "imageforfoobutton2" } }

And now check which button is clicked :
function onClick(args) {

But i need also the Key field value of row, on which my button was clicked :
function onClick(args) {
        var grid = $("#TheNameOfYourGrid").ejGrid("instance");
        var index = this.element.closest("tr").index();
        var record = grid.getCurrentViewData()[index];
now you have the name of clicked button and key field value of the row.

I hope this hepls someone, because i spent my hours tou found this information.
This needs to be documented in Grid Documentation.
Prasanna Kumar Viswanathan [Syncfusion]
Apr 12, 2017



Thanks for providing the useful information. According to your request, we will create a  KnowledgeBase documentation and it will be refreshed in online sooner.



Prasanna Kumar N.S.V



Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile