Grid filter with multiselect for column bound to array?

4 posts, 0 answers
  1. Abdurrahman
    Abdurrahman avatar
    2 posts
    Member since:
    Aug 2016

    Posted 08 Mar 2017 Link to this post

    I am trying to filter my grid with on a column that is bound to an array property. I have the column displaying as expected, however when i add the filterable option with multiselect it does not pull the options properly.

    Here is my model that i am using.

    public class CruiseGroupTile
    {
        //Other properties...
     
        public string[] Destinations { get; set; }
    }

     

    Here is the asp.net mvc wrapper for displaying grid along with the client template method to display the array column correctly

    @(Html.Kendo().Grid<CruiseGroupTile>()
          .Name("grid")
          .Columns(columns =>
          {
              //Other columns...
              columns.Bound(m => m.Destinations).Filterable(filterable => filterable.Multi(true)).ClientTemplate("#= arrayToComma(Destinations) #");
          })
          .DataSource(dataSource => dataSource.Ajax().Read("GetCruiseGroups", "Home").PageSize(20).ServerOperation(false))
          .Pageable()
          .Filterable()
          .Mobile()
    )

     

    function arrayToComma(items) {
     
        return items.map(function (item) {
                return item;
            })
            .join(',');
    }

     

  2. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2497 posts

    Posted 10 Mar 2017 Link to this post

    Hello Abdurrahman,

    Note that when enabling multi checkbox filtering for the Grid component each item in the checklist will represent a value of the corresponding field. Thus, in your scenario you would probably see [object Object] in the checklist since each value is an array.

    In order to implement the behavior you can use logic that is little different. Define the Destinations column as ForeignKey Column and bind it like in the example below:


    Then, you can use a separate ViewModel for the available destinations and pass the data to the ForeignKey editor. This way the multi checkbox filtering should show each destination in a separate row.



    Regards,
    Viktor Tachev
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Abdurrahman
    Abdurrahman avatar
    2 posts
    Member since:
    Aug 2016

    Posted 14 Mar 2017 in reply to Viktor Tachev Link to this post

    Hi Viktor,

    I've implemented the column as a ForeignKey Column with the separate ViewModel for the destinations and it works great! However, I ran into a couple of problems with filtering.

    When I have a record with multiple destinations and filter by 1 of its destination, this record does not show up. How is the filtering being done? Even when i select all destinations, records with multiple destinations do not show up.

    Also when i enable paging and filter by destinations and move to the next page, i seem to 'lose' a page. Data is not lost, however it is visually lost.

  4. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2497 posts

    Posted 16 Mar 2017 Link to this post

    Hi,

    If you would like to have filtering for the column you can add a custom filter and configure it as illustrated in the thread below.


    Furthermore, in order to implement custom filtering you should use the dataSource.filter method.



    Regards,
    Viktor Tachev
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top