Grid Column, filterable.UI with Foreign Key Column

9 posts, 0 answers
  1. Matt
    Matt avatar
    22 posts
    Member since:
    May 2018

    Posted 05 Feb 2020 Link to this post

    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?

  2. Georgi
    Admin
    Georgi avatar
    685 posts

    Posted 07 Feb 2020 Link to this post

    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

    Get quickly onboarded and successful with your Telerik UI for ASP.NET MVC with the dedicated Virtual Classroom technical training, available to all active customers.
  3. Matt
    Matt avatar
    22 posts
    Member since:
    May 2018

    Posted 10 Feb 2020 Link to this post

    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?


  4. Georgi
    Admin
    Georgi avatar
    685 posts

    Posted 12 Feb 2020 Link to this post

    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

    Get quickly onboarded and successful with your Telerik UI for ASP.NET MVC with the dedicated Virtual Classroom technical training, available to all active customers.
  5. Matt
    Matt avatar
    22 posts
    Member since:
    May 2018

    Posted 18 Feb 2020 in reply to Georgi Link to this post

    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.
  6. Georgi
    Admin
    Georgi avatar
    685 posts

    Posted 20 Feb 2020 Link to this post

    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

    Get quickly onboarded and successful with your Telerik UI for ASP.NET MVC with the dedicated Virtual Classroom technical training, available to all active customers.
  7. Matt
    Matt avatar
    22 posts
    Member since:
    May 2018

    Posted 18 Mar 2020 Link to this post

    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!!!
  8. Georgi
    Admin
    Georgi avatar
    685 posts

    Posted 23 Mar 2020 Link to this post

    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:

    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

    Get quickly onboarded and successful with your Telerik UI for ASP.NET MVC with the dedicated Virtual Classroom technical training, available to all active customers.
  9. Matt
    Matt avatar
    22 posts
    Member since:
    May 2018

    Posted 23 Mar 2020 Link to this post

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