My Profile
Sign Out
Tickets
Knowledge Base
Login
Articles in this section
Category / Section
  2. JavaScript
  3. ejGrid

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

3 mins read

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

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

JS

<div id="Grid"></div>
    <div id="commanddialog"></div>
    <script>
        $(function () {
            $("#Grid").ejGrid({                
                dataSource: window.employeeView,
                enableRowHover: false,
                allowSelection: false,
                columns: [
                { field: "EmployeeID", headerText: "Employee ID", isPrimaryKey: true, editType: ej.Grid.EditingType.NumericEdit, textAlign: ej.TextAlign.Right, width: 100 },
                { field: "FirstName", headerText: "First Name", width: 100 },
                { field: "LastName", headerText: "Last Name", width: 100 },
                { field: "HireDate", headerText: "Hire Date", width: 100, format: "{0:MM/dd/yyyy}", textAlign: ej.TextAlign.Right },
                { field: "Country", headerText: "Country", width: 100 },
                {
                    headerText: "Employee Details",
                    commands: [
                    {
                        type: "details",
                        buttonOptions: {
                            htmlAttributes: { id: "CustomButton", class: "btn-primary", style: "height: 28px; width: 100px;" },
                            text: "Details",
                            click: "onClick"
                        }
                    }
                    ],
                    isUnbound: true,
                    textAlign: ej.TextAlign.Center,
                    width: 150
                }
                ]
            });

 

MVC

@{
    ViewBag.Title = "GridFeatures";
    Dictionary<string, object> btn = new Dictionary<string, object>();
    btn.Add("id", "CustomButton");
    btn.Add("class", "btn-primary");
    btn.Add("style", "height: 28px; width: 100px;");
}
@(Html.EJ().Grid<MVCGrid.EmployeeView>("CustomGrid")
        .Datasource((IEnumerable<object>)ViewBag.datasource)
        .EnableRowHover(false)
        .AllowSelection(false)
        .Columns(col =>
        {
            col.Field("EmployeeID").HeaderText("Employee ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(100).Add();
            col.Field("FirstName").HeaderText("First Name").Width(100).Add();
            col.Field("LastName").HeaderText("Last Name").Width(100).Add();
            col.Field("HireDate").HeaderText("Hire Date").TextAlign(TextAlign.Right).Width(100).Format("{0:MM/dd/yyyy}").Add();
            col.Field("Country").Width(100).HeaderText("Country").Add();
            col.HeaderText("Employee Details").Commands(command =>
            {
                command.Type("detail")
                       .ButtonOptions(new Syncfusion.JavaScript.Models.ButtonProperties()
                       {
                           HtmlAttributes = btn,
                           Text = "Details",
                           Click = "onClick"
                       }).Add();
            })
            .IsUnbound(true)
            .TextAlign(TextAlign.Center)
            .Width(150)
            .Add();
        })
        )

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

Displays the command column button in JS GridDisplays the Command column button in the Grid:

 

Conclusion

I hope you enjoyed learning about how to add custom HTML attributes to buttons in the command column.

You can refer to our JavaScript Grid feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications.
You can also explore our JavaScript Grid example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Did not find the solution Contact Support
Comments (3)
Please  to leave a comment
AB
Anis Boulaid
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 :(
IS
ILYAS SARIYURT
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<string, object>() { {"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<string, object>() { {"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.
PK
Prasanna Kumar Viswanathan

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

 
Access denied
Access denied