Filtering column with multi true with complex object

[Aditya]

I have to make a grid column filterable multi true but column is bind with List<string>. As  per my knowledge it works for primitive data type. Action method contains sample dataset.

My requirement is Tags column should display each tag with comma separated and OS column should display with combination of package name and version.

Same as attached image grid.PNG

But my  current code produce output like output.PNG

How can i achieve my desire result.

Please help.

Thanks in advance!!!

Here is my controller code:

public ActionResult GetComputers([DataSourceRequest]DataSourceRequest request)
{
   List<string> tags1 = new List<string>();
            tags1.Add("T1");
            tags1.Add("T2");
            tags1.Add("T3");
    List<string> tags2 = new List<string>();
           tags2.Add("T3");
           tags2.Add("T2");
           tags2.Add("T4");
    List<string> tags3 = new List<string>();
            tags3.Add("T1");
            tags3.Add("T2");
            tags3.Add("T4");
   List<VarianProduct> prodcut1 = new List<VarianProduct>()
                           {
                            new VarianProduct(){Name = "Aria", Version = "12.2"},
                            new VarianProduct(){Name = "Eclipse", Version = "12.2"}
                           };
   List<VarianProduct> prodcut2 = new List<VarianProduct>()
                          {
                            new VarianProduct(){Name = "Aria", Version = "12.2"},
                            new VarianProduct(){Name = "Eclipse", Version = "12.2"}
                          };
   List<VarianProduct> prodcut3 = new List<VarianProduct>()
                           {
                             new VarianProduct(){Name = "Aria", Version = "12.2"},
                             new VarianProduct(){Name = "Eclipse", Version = "12.2"}
                           };
   List<VarianProduct> prodcut4 = new List<VarianProduct>()
                           {
                             new VarianProduct(){Name = "Aria", Version = "12.2"},
                             new VarianProduct(){Name = "Eclipse", Version = "12.2"}
                           };
     List<ComputerViewModel> list = new List<ComputerViewModel>()
     {
       new ComputerViewModel{Id = 1, HostName = "abc1", OS = "Windows xp", Tags = tags1, Products = prodcut1 },
       new ComputerViewModel{Id = 2, HostName = "abc3", OS = "Windows xp", Tags = tags2, Products = prodcut2},
       new ComputerViewModel{Id = 3, HostName = "abc2", OS = "Windows 7", Tags = tags3, Products = prodcut3},
       new ComputerViewModel{Id = 4, HostName = "abc4", OS = "Windows 10", Tags = tags1, Products = prodcut4}
      }
     return Json(list.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
}

 

Here is my index.cshtm

@(Html.Kendo().Grid<ComputerViewModel>()
          .Name("InventoryGrid")
          .Columns(columns =>
                      {
                        columns.Bound(c => c.HostName).Filterable(ftb => ftb.Multi(true).Search(true));
                        columns.Bound(c => c.Tags).Template(@<text>@string.Join(", ", item.Tags)</text>).Filterable(ftb                                                                       => ftb.Multi(true));
                        columns.Bound(c => c.OS);
                        columns.Bound(c => c.Products).Template(@<text> @string.Join(", ", item.Products.Select(p                                                                                   =>string.Join("-",p.Name,  p.Version))) </text>);
                      }
               )
          .DataSource(dataSource => dataSource
                        .Ajax()
                        .PageSize(20)
                        .Read(read => read.Action("GetComputers", "RemoteDeployment"))
         .Filterable()
         .Pageable()
         .Navigatable()
         .Sortable()
          .HtmlAttributes(new {style="height:550px;"})
)

[Konstantin Dikov]

Hello Aditya,

Although that you could display the list of values in the column, enabling filtering for the collection will not be possible, so I would suggest that you add another field in your model that will contain the List represented as string (all values separated with commas). Additionally, if you want to filter by a particular tag, you could set custom data source to the Filter widget, where you could list all tags separately and set the "Contains" operator.

Hope this helps.


Regards,
Konstantin Dikov
Telerik by Progress

[Aditya]

Hi,

Can I set custom data source for a particular column? If yes, Please let me know, how can I do that?

[Konstantin Dikov]

Hi Aditya,

You could configure the DataSource for the filter of particular column in a similar manner:

columns.Bound(e => e.City)
        .Filterable(filterable => filterable.DataSource(d=>d.Read(....)))

You could also find more information on this option in this topic:

• http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columns.filterable.cell.dataSource

Hope this helps.


Regards,
Konstantin Dikov
Telerik by Progress

[Aditya]

For this i would have to enable  ServerFiltering true but i don't want.

columns.Bound(c => c.Tags).Filterable(ftb => ftb.Multi(true).DataSource(ds => ds.Read(r =>

Here is Action method:

public ActionResult Unique()
{
  List<Tag> tags = new List<Tag>();
  tags.Add(new Tag { Name = "T1"});
  tags.Add(new Tag { Name = "T2" });
  tags.Add(new Tag { Name = "T3" });
  tags.Add(new Tag { Name = "T4" });
  return Json(tags, JsonRequestBehavior.AllowGet);
 }

[Konstantin Dikov]

Hello Aditya,

The DataSource for the items when Filterable.Multi is enabled should contained the same field name as the column:

• http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columns.filterable.dataSource

You could take a look at the implementation in the following online demo for using a DataSource for the checkbox filtering:

• http://demos.telerik.com/aspnet-mvc/grid/filter-multi-checkboxes

Best Regards,
Konstantin Dikov
Telerik by Progress

[Aditya]

Hi Konstantin,

Please help me to write custom filter.

My grid has a column named Tags and it contains string.

This column has filterable.Multi is enabled. I have given different datasource for filter control. Now filter control rendering as expected.

When i select a checkbox and click on filter, filter applies and filters the grid datasource matching with checkbox value which exists in Tags column.

Actually i want that  filter apply contains operator on Tag column instead of matching exact value.

So i was trying to write custom filters for this particular column  and one more column Products and for rest of column i'm using filters kendo default functionality.

I have attached image.

Please help.

 

 

[Aditya]

Hi Konstantin,

I was writing custom filter for column which has filterable.Multi is enabled on Filter event. I override the equality operator to contains. Data is filtered with contains operator but after execution of custom filter, it executes default one and filtered the data with equality operator.

When i iterate through filter and override the operator equality to contains, it filters the data but the checkboxes  get uncheked and it illustrates that no filter has been applied.
So in long story short, my intention is that i have to filter the data using contains operator instead of equality operator.

How can i achieve that.

[Konstantin Dikov]

Hi Aditya,

When you apply a custom filter within the filter event of the Grid you need to call preventDefault in order to prevent the default filter:

filter: function(e){
   if(e.field == "fieldName"){
      e.preventDefault();
     //custom filter
  }
}

As for the override approach, although that it works as expected in regards of the filtering, the checklist internal logic will search for "eq" operator over that field in the expressions, which is why it will not check them after the filtering. Nevertheless, you could try the approach from the following dojo example, where the values are checkboxes are checked manually within the filterMenuOpen event:

• http://dojo.telerik.com/eBOgu/2

Best Regards,
Konstantin Dikov
Progress Telerik

[Javier]

Hi Konstantin, sorry to bring back an old topic, but I'm running into some issues trying to apply this approach.

With your examples I am able to get the checkboxes be checked again after the filter is applied, but it seems the grid is "no longer aware" that there is a filter applied on this column (in my grid, the filter button on the header is not "enabled", it's back to normal).

Furthermore, the "Clear" function within the filter doesn't work. Basically the grid's contents are filtered, but there's no way to remove this filter without actually filtering on a different column (which in the dojo there isn't one).

So effectively, the grid is now in a broken state as far as the filters that are applied and the ability to change them.

Do you have any further suggestions on how to fix this? I wish there was an easier/better way to define what filter is applied (eq, contains, etc) when using the Multi(true) option in filterable columns.

[Javier]

Sorry for the double post, but you can see this behavior in this new dojo (with a newer version of the grid basically)

-> http://dojo.telerik.com/EWakOZeK

[Viktor Tachev]

Hello Javier,

 

Thank you for the sample illustrating the behavior.

I updated it so the clear button removes the applied filter from the Grid and also the checkbox remains selected. 

http://dojo.telerik.com/EWakOZeK/5

 

Give it a try and let me know how it works for you.

 

Regards,
Viktor Tachev
Progress Telerik

[Javier]

Hi Viktor, thanks for the reply!

Your changes seem to work for the clearing, although it broke the original request which was to make the filters behave like "contains". I think it's related to the fact that you have two filter-event handlers now, and only the second one is being used.

If you copy the original functionality (which is to change the operator to "contains") to the new block then the behavior I was describing (of the "filter" button not getting enabled even though the filter is correctly getting applied) starts happening again.

I made the tweak to the dojo and you can see it here: http://dojo.telerik.com/EWakOZeK/7

You can see that, even though the filter correctly filters (notice that I changed the value of the filter to U to properly test the "contains" functionality for the USA value), the grid is not aware that there is a filter applied to the column. The filter-icon is not in it's applied state and when you open the menu the selected option is not actually checked.

 

Thanks for your help!

[Viktor Tachev]

Hi Javier,

 

For keeping the checkbox selected I suggest handling the filterMenuOpen event. In the handler check what is the applied filer and set the respective checkbox as selected.

http://dojo.telerik.com/EWakOZeK/8

 

Give the updated sample a try and let me know how it works for you.

 

Regards,
Viktor Tachev
Progress Telerik

[Javier]

Hi Viktor, thanks for the feedback again! The filterMenuOpen event handler does help with the checkbox being selected. I also noticed that the "Clear" functionality doesn't work but I was able to get that to work with further tweaks to the filter event handler.

 

The bigger issue remains though. There is still a problem with the fact that it seems that the grid doesn't recognize the filter as being applied though. You can notice that the filter button in the column header remains without the lighter background, so that tells me that it doesn't think there is a filter applied, even if there is one. This brings with it further issues in a more real grid outside of this simple example, particularly with multiple columns and multiple filters.

 

It seems odd to me that just because of the fact that we are programmatically changing the operator that it will throw the grid into such a havoc. I think there is some sort of underlying issue that needs to be fixed where overriding the operator for Multi(true) should be built-in to prevent all of these issues?

[Viktor Tachev]

Hi Javier,

 

Indeed the style is not applied to the filter icon due to the custom code used to apply the filter. To have the indication I suggest applying the k-state-active class to the filter icon. The dojo below outlines the approach:

http://dojo.telerik.com/EWakOZeK/11

 

As for using different filter operators. The checklist filter was intended to work similarly to the checklist in Excel. Thus, the filter operator that is used by default is "equal to".

 

I hope this is helpful. Let me know if you have additional questions.

 

Regards,
Viktor Tachev
Progress Telerik

[Javier]

Viktor, this is definitely helpful, going down the right path!

 

I think there are still some issues when the grid turns into something a bit more complex.

For example here are some changes to the dojo that showcase some issues: http://dojo.telerik.com/EWakOZeK/12

 

I simply added a second column and the filtering issues are quick to appear. You can try playing with it a bit and you can see, but basically as soon as you start adding filters to both columns, problems quickly arise. I guess there's some further work that could be done to get it to behave more normal...

I understand the rationale behind using the "eq" filter by default. I just wish there was a built-in way of being able to change this default functionality that wouldn't need so much hacking around and getting the grid in what's definitely a bit of a delicate state.

 

Thanks for all your help throughout!

[Viktor Tachev]

Hi Javier,

 

Thank you for getting back to us. I tried filtering the columns and clearing the filtering and the main issue I noticed with the sample was that the style indicating there is active filter on the column is cleared.

In order to resolve this there are couple of options I can think of. The first one is to keep track of the active filter on the country column. Based on that the k-state-active class can be reapplied to the filter icon. The second option is to look through the applied filters for the Grid and check if the country field is filtered. Then apply the CSS class again.

I have updated the sample using the first approach. Give it a try and let me know how it works for you:

http://dojo.telerik.com/EWakOZeK/14

 

With that said, I understand your position and can suggest submitting a feature request in our feedback portal. The developers will look into it and check if the enhancement can be implemented without affecting the current functionalities.

 

Regards,
Viktor Tachev
Progress Telerik