Add HTML attribute to ejGrid`s toolbar

[Feldman Daniel]

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,
               ej.Grid.ToolBarItems.Delete
            ],

        },

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

Thanks in advice: Daniel Feldman 

[Balaji Marimuthu]

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 () {

            $("#Grid").ejGrid({

                // 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.
http://helpjs.syncfusion.com/js/api/ejgrid#events:create


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

Regards,
Balaji Marimuthu

[Feldman Daniel]

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]

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.

Regards,
Balaji Marimuthu