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. (Last updated on : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

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.

JS

 

MVC

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

Displays the Command column button in the Grid:

 

Article ID: Published Date: Last Revised Date: Platform: Control:
5173 07/06/2015 08/04/2015 JavaScript ejGrid
Did you find this information helpful?
Comments
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 :(
Reply
ILYAS SARIYURT Apr 11, 2017
Hi,
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.status=true
args.type=click
args.model=[object Object]
args.cncel=false

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 =>
            {
                command.Type("FooButton1")
                    .ButtonOptions(new Syncfusion.JavaScript.Models.ButtonProperties()
                    {
                        Width = "16px",
                        Height="16px",
                        Click = "onClick",
                        ContentType = ContentType.ImageOnly,
                        HtmlAttributes=new Dictionary() { {"title", "My Foo Button 1 Title" }, {"class", "imageforfoobutton1" } }
                    }).Add();
                command.Type("FooButton2")
                    .ButtonOptions(new Syncfusion.JavaScript.Models.ButtonProperties()
                    {
                        Width = "16px",
                        Height = "16px",
                        Click = "onClick",
                        ContentType = ContentType.ImageOnly,
                        HtmlAttributes=new Dictionary() { {"title", "My Foo Button 2 Title" }, {"class", "imageforfoobutton2" } }
                    }).Add();
            })
                .TextAlign(TextAlign.Center)
                .Width(80)
                .Add();

And now check which button is clicked :
function onClick(args) {
        alert(args.target.value);
    }

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];
        alert(args.target.value);
        alert(record.TheNameOfYourKeyField);
    }
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.
Reply
Prasanna Kumar Viswanathan [Syncfusion] Apr 12, 2017

Hi ILYAS,

 

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

 

Regards,

Prasanna Kumar N.S.V

 

Reply
Add Comment
You must log in to leave a comment

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