Filter row not working for Client Template

[Visvak Prasanth]

Hi ,

I am using the Filter row in my grid, it works fine if there are no client template. but if there are any client template it gives error.
@(Html.Kendo().Grid<Document>()
                        .SetDefaults()
                        .Name("gridDocuments")
                        .Groupable()
                        .Editable(editable => editable.Mode(GridEditMode.InLine))
                        .Events(x => x.DataBinding("OnDataBound").Edit("EditGrid"))
                        .Columns(columns =>
                        {
                            columns.Bound(x=>x.CategoryCode).Filterable(false).ClientTemplate(#=data.CategoryDescription#").EditorTemplateName("CategoryTypeMultiselect"); 
                            columns.Bound(x => x.AssetTag).Filterable(ftb => ftb.Cell(cell => cell.Operator("contains").SuggestionOperator(FilterType.Contains)));
                            columns.Command(command =>
                            {
                                command.Edit().Text(" ").CancelText(" ").UpdateText(" ");
                                command.Custom("Del").Text("<span class='k-icon k-i-delete'></span>").Click("PageGridDelClicked");
                            }).Width("3%").HtmlAttributes(new { style = "text-align:center;background:#=RowColor#" });
                        })
                        .Selectable(selectable => selectable
                        .Mode(GridSelectionMode.Multiple).Type(GridSelectionType.Cell))
                        .Navigatable()
                        .Filterable(ftb => ftb.Mode(GridFilterMode.Row))
                        .DataSource(dataSource => dataSource
                        .SetDefaults()
                        .PageSize(20)
                        .Model(model =>
                        {
                            model.Id(p => p.Id);
                            model.Field(p => p.AssetTag).Editable(false);
                            model.Field(p => p.CategoryType).Editable(true);
                        })
                        .Read(x => x.Action("GetSelectedData", "Assets", new { CacheKey = PageUID }).Data("getAssetId"))
                        .Update(x => x.Action("UpdateDocuments", "Assets", new { CacheKey = PageUID }).Data("getAssetId"))))
if i enable filter for Categorycode i am getting error.
Please suggest me how to use the Filter row when we have ClientTemplate in the column.

[Tsvetomir]

Hi Visvak, 

The filter mechanism of the Telerik UI Grid actually applies the value from the filter cell to the field that the column is bound to. That is why the ClientTemplate is used only for visual purposes and not executing data operations based on those values.

What I can recommend is that you intercept the Filter event of the grid and manually modify the filter expression that is about to be applied to the data source.

Alternatively, you could introduce a foreign key column that would match the code to the text and will render a DropDownList that could be used for filtering:

https://demos.telerik.com/aspnet-mvc/grid/foreignkeycolumn

 

Regards,
Tsvetomir
Progress Telerik

[Visvak Prasanth]

Hi Tsvetomir,

I was able to fix that issue, i faced an issue like column values have html "<br />" when we type the search the "<br />"  is displayed in the filter. can eliminate that.

I have attached the Screen shot of the issue.

Please guide me to fix that issue .

 

 

[Tsvetomir]

Hi Visvak,

Since the items in the filter menu are escaping the HTML from the elements, you should create an item template that would render the elements accordingly:

            columns.Bound(x => x.ProductName).Filterable(ftb=>ftb.Multi(true).ItemTemplate("itemTemplate"));

And the function handler (note, you should alternate the ProductName to the property name of the column in your grid):

function  itemTemplate(e) {
                    return "<li class='k-item'><label><input type='checkbox' name='" + e.field + "' value='#= data.ProductName#'/><span>#= data.ProductName|| data.all #</span></label></li>"
                }

I hope you find this helpful.

 

Kind regards,
Tsvetomir
Progress Telerik