Multi Filterable with client template

[Marc]

Can I please get an example of how to use the multi-filter option (.Filterable(f => f.Multi(true))) when the column is using a ClientTemplate.

 

WIth the code below I get [Object] [Object] in the column filter drop down. The client template is parse out an array of hyperlinks from the model.

 

 

columns.Bound(e => e.Reports).Title("Open <br />Reports").Filterable(f => f.Multi(true)).Width(120).ClientTemplate("#=openReport(Reports)#");

 

   function openReports(Reports) {
        if (Reports && Reports.length > 0) {
            var result = "";
            var j = Reports.length;
            for (var i = 0; i < j; i++) {
                result += "<a href='" +
                    someServer +
                    "webpage.aspx?someNumber=" +
                     Reports[i].Number +
                    "&Revision=" +
                    Reports[i].Revision +
                    "' target ='_blank'>" +
                    + Reports[i].Number +
                    "-" +
                    Reports[i].Revision +
                    "</a>, ";
            }
            return result.substring(0, result.length - 2);
        } else {
            return "";
        }

    }

[Konstantin Dikov]

Hello Marc,

The issue that you are experiencing is due to the fact that the column in question is bound to a complex object and filtering is not supported in such scenario. The multi checkbox filtering is supported when the column is bound to a field containing values that could be filtered, which is not the case with complex objects. If you need to enable the filtering you should bound the column to one of the fields of your Reports property:

columns.Bound(e => e.Reports.Number)  for example

Hope this helps.


Regards,
Konstantin Dikov
Telerik by Progress

[Shane]

Was this ever updated or fixed? Being able to use a complex object instead of a string property seems necessary to be able to use editor templates like dropdownlists within the CRUD interface to support this functionality. I can populate the filter values with the string values that are displayed via the ClientTemplate. Being able to subscribe to the grid filter event and set the dataSource filter seems like it should work but hacky. This becomes especially cumbersome when dealing with multiple filterable columns. I was thinking that using the property would work but then I couldn't add or edit records because the property would be null or undefined. I tried adding default empty string values but was never able to get this way to work either. 

[Ivan Danchev]

Shane,

There hasn't been a change with regard to the filtering support when it comes to complex objects. The Grid's DataSource supports flat data, which is why some of the functionality such as sorting, filtering, etc. does not work with nested objects. Comparing two objects is a complex task that depends on the use case. You could compare them by a reference, by a certain property, etc.

If the view model contains a property that is an object itself, the recommended approach is to you bind the column to the specific field of that object. You can use a DropDownList in an editor template, to edit the object. We have a sample project in our Github repo, that demonstrates this approach:

https://github.com/telerik/ui-for-aspnet-mvc-examples/tree/master/grid/enable-operations-for-object-column

The column is declared as follows:

columns.Bound(product => product.Category.CategoryName).EditorTemplateName("DropDownEditor");

The editor template is at the following location: /Views/Shared/EditorTemplates/

[Karina]

Hello Marc,

Thank you for reaching out to us! The responsible product specialist will contact you and advise you on your question below.

Regards, Karina

Progress Telerik

[Shane]

Did you mean me? :D