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: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Add HTML attribute to ejGrid`s toolbar

Thread ID:





119982 Aug 20,2015 09:03 AM UTC Aug 24,2015 05:09 AM UTC JavaScript 3
Tags: ejGrid
Feldman Daniel
Asked On August 20, 2015 09:03 AM UTC

Hi Syncfusion team!

Your software helped me many times so far, but now I have a problem that I can`t solve. In JavaScript I need to add a HTML attribute to my toolbar items in ejgrid. Concretely I want to add for every item in my toolbar a click.trigger attribute with different values in order to handle this click event with Aurelia framework. 

I tried to use toolbarClick: "onToolBarClick", and I called the desired view-model function within onToolBarClick() with Aurelia`s container, but this didn`t seems to works as well as I excepted. With click.trigger attribute it would solve my problem. This is my toolbar in ejGrid :

toolbarSettings: {
            showToolbar: true,
            toolbarItems: [
               ej.Grid.ToolBarItems.Add, ej.Grid.ToolBarItems.Edit,


My question is how can I add a HTML attribute for my toolbar items?

Thanks in advice: Daniel Feldman 

Balaji Marimuthu [Syncfusion]
Replied On August 21, 2015 09:08 AM UTC

Hi Feldman,

Thanks for using Syncfusion Products.

We can add HTML attributes to Toolbar items by using the jQuery attribute (attr) property in Grid create event. Please refer the sample and code example as below,
Sample:  http://jsplayground.syncfusion.com/0zu3ljx5

  $(function () {


                // the datasource "window.gridData" is referred from jsondata.min.js

                dataSource: window.gridData,

                allowPaging: true,

                editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true },

                toolbarSettings: { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.Add, ej.Grid.ToolBarItems.Edit, ej.Grid.ToolBarItems.Delete, ej.Grid.ToolBarItems.Update, ej.Grid.ToolBarItems.Cancel] },

                create: "create",




        function create(args) {

            $("#" + this._id + "_add").attr({ style: "height: 30px; width: 100px;" });

In the create event, we have added style properties to the toolbar Add item. Also refer the help document for create event.

Please get back to us if you need any further assistance.

Balaji Marimuthu

Feldman Daniel
Replied On August 21, 2015 10:09 AM UTC

Thank you!

The code works well. As I saw in the page inspector, the click.trigger attribute was added succecfully to my desired items. Unfortunately this didn`t fired the function but this problem is related to Aurelia framework. I will write to them about this.

Thank you for quick helping!

Balaji Marimuthu [Syncfusion]
Replied On August 24, 2015 05:09 AM UTC

Hi Feldman,

Thanks for the response.

We are happy to hear that the issue is resolved at your end.

Please get back to us if you need any further assistance. We will be happy to assist you.

Balaji Marimuthu


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

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

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