Grid Toolbar DropDownList automatically closes on initial open

Question

I've added a custom dropdown list to the toolbar of a grid that is used for creating a custom query parameter. However, the first time the dropdownlist is opened, it automatically closes. Every time the dropdownlist is opened after that it functions normally, but I can't figure out how to properly create the dropdownlist so that doesn't automatically close on its initial open.

Example

Notice that the first time the City dropdownlist in the grid toolbar is opened by clicking on it, it automatically closes, and another click is required to open the dropdown.

I've looked at the example in the documentation here where the same end goal is desired. About the only difference between what I'm doing in the my example and what's in the documentation is that I'm tying is tied to the grid created event, and the code in the documentation is tied to the grid dataBound event (there's really no need to recreate this dropdown every time a new set of data is loaded).

I've also read the following similar thread, but I'm trying to put the dropdownlist in the grid toolbar, not a grid cell.

Any help would be appreciated.

Balaji Sekar · Accepted Answer

Hi Josh, 
 
Thanks for your valuable patience. 
 
By default EJ2 Grid’s toolbar bind the button with text and icons. If we need to bind own component in toolbar using toolbarTemplate feature so, in Grid provided HTML DOM binding in the toolbar using toolbarTemplate feature. 
 
Please refer the below Help Documentation for more information. 
 
https://ej2.syncfusion.com/documentation/grid/tool-bar/#custom-toolbar 
 
Regards, 
Balaji Sekar

Balaji Sekar · Answer

Hi Josh,

Greetings from the Syncfusion support.

We checked the reported problem “first time the dropdownlist is opened, it automatically closes” with provided sample and found that you have bound dropdownlist component in the toolbar without using toolbarTemplate feature which is cause of the problem. If we need bind the custom component in the toolbar we suggest you to use the toolbarTemplate feature.

We have modified the provided sample and bind dropdown component in created event DataGrid. Please refer the below code example and sample for more information.

[index.js]

var grid = new ej.grids.Grid({

dataSource: data,

allowPaging: true,

pageSettings: { pageCount: 3 },

toolbarTemplate: "#toolbar-template",

columns: [

{

field: "OrderID",

headerText: "Order ID",

isPrimaryKey: true,

width: 130

},

{ field: "CustomerID", headerText: "Customer ID", width: 170 },

{ field: "ShipCity", headerText: "Ship City" }

],

created: function(args) {

var dropdownlist = new ej.dropdowns.DropDownList({

dataSource: ["Berlin", "Madrid", "Marseille"],

placeholder: "City"

});

dropdownlist.appendTo("#ddlelement");

}

});

[index.html]

</div>

Sample link: https://stackblitz.com/edit/sf-grid-toolbar-dropdownlist-closes-kvujtn

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

Regards,

Balaji Sekar

Josh Borgerding · Answer

Thank you for the reply, and this does eliminate the issue of the dropdownlist automatically closing, but can a toolbar template be combined with built-in toolbar items like the Print, ColumnChooser, ExcelExport, Search, etc. ?

Josh Borgerding · Answer

Thanks Balaji, I was able to achieve what I wanted not by using the toolbarTemplate, but by using the toolbar item template property. This allowed me to create a custom dropdownlist in the toolbar, but also still use the built-in toolbar items without having to programmatically tie the functionality of the built-in items to custom items that I would have needed to create if using the toolbarTemplate.

Example

Balaji Sekar · Answer

Hi Josh, 
 
Based on your update we suspect that you want to bind the custom component(ex: Dropdownlist ) through the toolbar items(built-in support) instead of the toolbarTemplate feature and you have mentioned that toolbarTemplate feature required so please share the purpose of this feature. 
 
If we misunderstood on your requirement, please share exact on your query to us that will help to validate further. 
 
We shared the feasibility of Grid’s toolbar items as given below documentation for more information. 
 
Help Documentation: https://ej2.syncfusion.com/documentation/grid/tool-bar/#built-in-toolbar-items 
                                           https://ej2.syncfusion.com/documentation/grid/tool-bar/#custom-toolbar-items 
                                           https://ej2.syncfusion.com/documentation/grid/tool-bar/#custom-toolbar 
 
Regards, 
Balaji Sekar

Josh Borgerding · Answer

Balaji,I really wanted to use a custom item (DropDownList) in the toolbar, as well as built-in items.  I'm not sure if this makes to toolbar itself custom.  But what I understood from your recommendations is that to achieve what I wanted, I would need to use the toolbarTemplate property to get my custom item in there.  And then to be able to use built-in item functionality, I would also need to define more custom items and then programmatically tie the functionality of the built-in items that would be there to the custom items I had to create in their place because using the toolbarTemplate (example).  Specifically, what I wanted to avoid was having to tie items in the custom toolbar template to behave like built-in items like this:    document      .getElementById("btnColumnChooser")      .addEventListener("click", function() {        grid.columnChooserModule.openColumnChooser(          this.getBoundingClientRect().left,          this.getBoundingClientRect().bottom        );      });  }It just seemed really unnecessary to have to reprogram custom buttons and inputs to behave like built-in toolbar items.So my solution was to use the template for a custom toolbar item as opposed to a template for the whole toolbar (example).  This allowed me to get my custom in the toolbar, and not have to programmatically tie the functionality of the built-in items to other custom items.The purpose for this is that I have a column that is say an array of names, and I want a dropdownlist in the toolbar that lists all of the individual names that could be in that column.  Selecting a name from the dropdownlist will filter the grid to show all rows where the name column includes that name.  This is done with a remote dataSource.  Changing the value in the dropdownlist adds the value that's selected as a parameter to the query which is sent to the remote server, and the remote server only pulls records where that name is contained in the column.  The same thing could be achieved using the filter on the column and the 'contains' operator, but the dropdownlist behavior is more obvious and friendly to the user.

Josh Borgerding · Answer

Really, it's just a way for me to achieve the ability to filter a column that is an array type.

Balaji Sekar · Answer

Hi Josh, 
 
Based on your query we understand that you want to filter the Grid column using dropdownlist which is rendered on Grid’s toolbar(built-in support). By default we have provided the filtering support in Grid column it is bind the filtering icon on the Grid column’s header. For your convenience we have shared the Filtering demo sample and Help Documentation as given below. 
 
Demo sample:   https://ej2.syncfusion.com/demos/#/material/grid/filter.html 
                                https://ej2.syncfusion.com/demos/#/material/grid/filter-menu.html 
 
Help Documentation: https://ej2.syncfusion.com/documentation/grid/filtering/#filtering 
                                          https://ej2.syncfusion.com/documentation/grid/filtering/#filter-menu 
 
If you want to filtering whole Grid with contains operator, we suggest you to use Search option to achieve your requirement which is render on the Toolbar. Please refer the below demo sample for more information 
 
Search demo: https://ej2.syncfusion.com/demos/#/material/grid/search.html 
 
In Grid’s toolbar, Built-in toolbar items execute standard actions of the grid, and it can be added by defining the toolbar as a collection of built-in items. It renders the button with icon and text. For example, we have define the “ColumnChooser” in toolbar it will render the ColumnChooser feature in toolbar items it is default functionalities. If you want to achieve this feature in toolbar without define this feature in toolbar items, we can achieve this query using toolbar.template or toolbarTemplate features. But filtering option in the toolbar we can achieve only in programmatically. Since we suggest you to use the built-in filtering feature details as given above to achieve your requirements.  
 
Regards, 
Balaji Sekar

Josh Borgerding · Answer

Thanks Balaji. I understand how Syncfusion's filter / filter menu / filter module all work. My end goal with getting the dropdownlist into the toolbar was to offer the user an easy way to filter a column of type array. I know that Syncfusion currently does not support filtering array type columns. So my work around was to create a dropdownlist with a list of all the individual items that may be in the array, and then when a value is selected, send that as an additional parameter to the server which will handle the filtering for that column.

I've created an example that somewhat demonstrates what I'm talking about here, the only difference is that this example uses a local data source, where as the code that I'm actually working with uses a remote data source / data request handling. In this example, there's a colors column which is an array of objects. And then I've added a dropdownlist to the toolbar with a list of all possible colors. When the user selects a color from the dropdown list, the data is "filtered" to only show rows where the rows colors property contains the selected color. For my actual code, changing the dropdownlist updates a query parameter on the grid's datasource.

I'm all set with my issue though, so we can probably close this thread.

Thanks.

Balaji Sekar · Answer

Hi Josh, 
 
Based on your query with provided the information and you have filter the Grid using specific column(“color”) value with dropdown selected item it is only filtered data assign to Grid’s dataSource. In this case we cannot properly to perform the other Grid actions like Sorting, Searching, etc. since it is invalid feature request filtering in the DataGrid 
 
By default we have provided the filtering option in the Grid’s column basis and also we are able to whole Grid’s filtering option to use Searching feature. 
 
Hence we suggest you to use your workaround sample to achieve your requirement as you expecting functionality. 
 
Regards, 
Balaji Sekar