Grid Column, filterable.UI with Foreign Key Column

[Matt]

I'm tyring to customize the UI that appears when filtering a foriegn key column on the grid. It seems that when I specify a javascript function (like below) for customization as mentioned at the following url (https://demos.telerik.com/aspnet-mvc/grid/filter-menu-customization) it doesn't get called. 

.Filterable(filterable => filterable.UI("customFilter"))

If I add the same lines to a non-foreign key column the function gets called. 

Is there something different that needs to be done for Foreign Key Columns?

[Georgi]

Hello Matt,

The provided configuration will work only if the grid is configured for menu filtering. However, if it is configured for row filtering, you have to pass the handler to the Filterable.Cell.Templte setting.

e.g.

.Filterable(filterable => filterable.Cell(c=> c.Template("customFilter")) )

Regards,
Georgi
Progress Telerik

[Matt]

Hey Georgi, 

Thanks for your reply! I do have the grid configured for menu filtering. It seems as though the filterable.UI option does not work on grid foreign key columns, but seems to work on other types of columns. 

For example, if I have the following columns: 

            column.Bound(o => o.FCOProductId).Filterable(f => f.UI("customFilter")).Title("ProductId");

            column.ForeignKey(o => o.ComponentId, Model.AvailableFormulaComponents, nameof(SelectListItem.Value), nameof(SelectListItem.Text)).Filterable(f => f.UI("customFilter")).Title("Component").Width(300); 

 

and both are bound to a javascript function that simply calls alert("test"), I will get the alert if I click the filter option on the first column, but I don't get that alert if I click on the second column, so it does seem to be working, just not for the FK. 

Thoughts?

[Georgi]

Hello Matt,

I apologize for the inconvenience, I must have missed the foreign key part. Yes, when using foreign key column, the ui handler is ignored. Nevertheless, you should be able to modify the filter menu within the FilterMenuInit event.

Regards,
Georgi
Progress Telerik

[Matt]

No worries, do you have any examples of how I might accomplish this? In my case I'm trying to replace the checkbox input with a multiselect based on what values are actually present in the grid.

[Georgi]

Hello Matt,

Are you using multi filter?  If you do, please note that the default filter for foreign key columns is a drop down which is quite similar to the multi select.

Nevertheless, we do not have such a sample. In general, the approach is to find the input which you want to modify within the FilterMenuInit event handler and manage them as required. If needed I could assemble a small sample which demonstrates the same.

Regards,
Georgi
Progress Telerik

[Matt]

Sorry for the late response. We are using multi filter, the issue is that we don't want every row available in the foreign key column. If you could put together a small sample I would really appreciate it!!!

[Georgi]

Hello Matt,

As requested I have assembled a small sample which demonstrates how to modify the default multi filter menu and replace is with a multi select. You will find it in the link below:

• https://dojo.telerik.com/uhIWarOm/3

Although the grid is configured with JS, as the whole logic for modifying the fitler menu is on the client, the very same approach applies for the MVC wrapper. The only difference is how it attach the filterMenuInit event handler.

e.g.

.Events(x=> x.FilterMenuInit("onFilterMenuInit"))

Regards,
Georgi
Progress Telerik

[Matt]

Thanks for the example! I will try it out and let you know if I have any questions, I appreciate the help! Stay Safe!