Adding html5 attribute to grid toolbar item

[Tomasz]

Hi.

How i could make some operations on existing toolbar items like add data attribute or css class.

I generate grid like this: 

...

Grid.Inject(Selection, Filter, Page, Sort, Search, Toolbar);


let myGrid = new Grid({
    selectionSettings: {checkboxMode: 'ResetOnRowClick'},
    toolbar: ['Search', 'Add', 'Edit', 'Delete'],
    toolbarClick: toolbarClickHandler,

...

Please Help :)

[Manivel Sellamuthu]

Hi Tomasz, 

Greetings from Syncfusion support. 

Based on your query we found that you want to add some attributes to the built in toolbar items. To achieve this we suggest you to use the created event of the Grid. Please refer the below code example and sample for more information. 

 let grid: Grid = new Grid( 

        { 

            dataSource: orderData, 

            created: ()=>{ 

              // here we are adding the custom class to the toolbar element 

              grid.element.querySelector('#'+grid.element.id+'_add').classList.add('e-customclass'); 

            }, 

            editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Dialog' }, 

            allowPaging: true, 

            pageSettings: {pageCount: 5}, 

            toolbar: ['Search','Add', 'Edit', 'Delete'], 

Sample: https://stackblitz.com/edit/158188-attribute?file=index.ts 

If we misunderstood your query or this is not your exact requirement, please explain more about your requirement. 

Regards, 

Manivel 

[Tomasz]

Thank you very much, hard life for a beginner :)

[Manivel Sellamuthu]

Hi Tomasz, 

Thanks for your update.   

We hope that the problem has been resolved by the provided suggestion..   

Please let us know, if you need further assistance. As always, we will be happy to assist you. 

Regards, 

Manivel