DataGridDropDown on custom element

I was just playing with RadzenDropDownDataGrid componnet. I'm using it as filter in another DataGrid.
I really like badges as enum representation (Custom Template with switch for enums and badge styles).

It is possible to hide the "textfield" and open popup with badge, which was selected?

Also it would be nice to have the option to hide columns head in RadzenDropDownDataGrid.

Thank you for your answer.


What textfield are you referring to?

This can be done with CSS. Otherwise you can use RadzenDropDown.

I didn't know how to call it. But I mean the button or field, which is used to open dropdown.

I want to hide everything, but leave content, which will be clickable to open dropdown.


This should also be targetable with CSS. Use your developer tools to inspect the HTML output and determine the CSS selector required to hide that (probably .rz-dropdown-label, .rz-dropdown-trigger, .rz-dropdown-clear-icon).

So something like:

.rz-dropdown .rz-dropdown-label, 
.rz-dropdown .rz-dropdown-trigger,
.rz-dropdown .rz-dropdown-clear-icon {
   display: none

And to make it apply just to this particular RadzenDropDownDataGrid - set the id attribute and use it as part of the CSS selector:

<RadzenDropDownDataGrid id="myDropDown">
#myDropDown .rz-dropdown-label, 
#myDropDown .rz-dropdown-trigger,
#myDropDown .rz-dropdown-clear-icon {
   display: none

Thank you, I figured it out with your help.

Hide thead in popup (but here we probably can't set custom id):

.rz-lookup-panel thead {
	display: none;

And to completely hide DropDown field:

#myDropDown.rz-dropdown {
	border: none;
	background: none;

#myDropDown.rz-dropdown .rz-dropdown-trigger,
#myDropDown.rz-dropdown .rz-dropdown-clear-icon {
	display: none;

#myDropDown.rz-dropdown .rz-dropdown-label {
	margin-left: -6px;
	overflow: initial;

I just found, it is not good idea to use component ID, because then you can bug multiple dropdowns over itself. Better approach is using class for this to work.

In component <RadzenDropDownDataGrid class="myDropDown">
and inside CSS change #myDropDown to .myDropDown

Hi, I have one more question about DataGridDropDown.

Is it possible to have different template and still have functional datagrid?
I would like to have the right side of image inside DropDownButton. I'm able to do that for single selection,
but when I change Template I destroy working datagrid inside popup.

For Single selection it is easy to do, but for multiple selections is not.