Ej2 Grid: Dropdownlist as custom toolbar template

[ISMAIL HAMZAH]

Dear Support,

I'm in the process of creating dropdownlist as custom toolbar template. I'm following this link tutorial: https://ej2.syncfusion.com/documentation/grid/how-to/create-custom-tool-bar-with-drop-down-list/ but resulting in error:

below the template code:

<div id='toolbar-template'>
    <div id='dropdown' style="margin-top:5px">
        <input type="text" tabindex="1" id='ddlelement' />
    </div>
</div>

and below the dropdownlist initialization at grid dataBound:

                        //custom dropdown toolbar
                        var dropDownListObject = new ej.dropdowns.DropDownList({
                            dataSource: [{ value: 1, text: 'Action1' }, { value: 2, text: 'Action2' }, { value: 3, text: 'Action3' }],
                            change: change,
                            popupHeight: 200,
                            change: (args) => {
                                console.log(args);
                            }
                        });
                        dropDownListObject.appendTo('#ddlelement');

Calling the template at grid toolbarTemplate:

toolbarTemplate: '#toolbar-template'

Could you please help  me provide working example of custom toolbar using dropdownlist?

Thank you in advance

Ismail

[Rajapandiyan Settu]

Hi ISMAIL, 

Thanks for contacting Syncfusion support. 

We are tried to reproduce the reported behavior with the provided code example, but it was unsuccessful at our end. The dropdown element is properly rendered in the Grid’s toolbar by using toolbarTemplate. Find the below sample for your reference. 

Sample: https://stackblitz.com/edit/kh7ucg?file=index.js 

Kindly share the below details to replicate it at our end. 

1. Share the complete Grid code file (index.js & index.html).
2. Share the Syncfusion script version.
3. Is the issue reproduced only when using toolbarTemplate? Kindly ensure it.
4. If possible, share the issue reproducible sample or try to make the issue in given sample.

Regards, 

Rajapandiyan S 

[ISMAIL HAMZAH]

Hi Rajapandiyan,

Thank you for the update. After change the Syncfusion version from v19.2 into v19.3, now the custom dropdownlist toolbar is showing.

But come new problem, if we playing with the grid sorting, the dropdown toolbar become duplicate each time we play around with the sorting.

Below image from your stackblitz demo:

and below capture from my application that behave the same:

Best regards,

Ismail

[Pavithra Subramaniyam]

Hi ISMAIL, 

You can overcome this issue by using a flag variable inside the dataBound event. Please refer to the below code example and sample link for more information. 

var isInitial = true; 

 

function dataBound(args) { 

  // dataBound event will be triggered for every data action like sorting, filtering, etc. 

  if (isInitial) { 

    dropDownListObject.appendTo('#ddlelement'); 

    isInitial = false; 

  } 

} 

Sample: https://stackblitz.com/edit/kh7ucg-hwsske 

Please get back to us if you have any queries. 

Regards, 

Pavithra S 

[ISMAIL HAMZAH]

Hi Pavithra,

Thank you for your update info. Adding the flag solve the problem.

Thank you for your kind support.

Best regards,

Ismail

[Rajapandiyan Settu]

Hi ISMAIL, 

We are glad that you have resolved your requirement with the provided solution. 

 

Please get back to us if you need further assistance with this. 

 

Regards, 

Rajapandiyan S