How to filter Multi Checklist item against column with html tag

2 posts, 0 answers
  1. Jimmy
    Jimmy avatar
    36 posts
    Member since:
    Jan 2019

    Posted 09 Dec 2020 Link to this post

    I have a column with html code. i.e. <div style='color: green'> Active</div>

    and I have the filterable operator set to "Contains" but the filter result is alway not found.


    .Columns(columns =>
        columns.Bound(p => p.DisplayLeaseStatus).Title("Transaction Status").HtmlAttributes(new { style = "text-align:center" }).Filterable(ftb => ftb.Multi(true).BindTo(new[]{
                                        new { DisplayLeaseStatus = Active },
                                        new { DisplayLeaseStatus = Expired },
                                        new { DisplayLeaseStatus = Terminated }
    .Scrollable(scrollable => scrollable.Height("auto"))
    .Filterable(filterable => filterable
        .Operators(operators => operators
            .ForString(str => str.Clear()
    .Events(e => e.DataBound("dataBoundHandler"))
    .DataSource(dataSource => dataSource
        .Events(e => e.Error("onError").RequestEnd("onRequestEnd")))
        .Resizable(resize => resize.Columns(true))
        .Reorderable(reorder => reorder.Columns(true))


    and the column data contents i.e. <div style='color : greed'> Active </div>



    Any advice how i can filter this?

  2. Tsvetomir
    Tsvetomir avatar
    793 posts

    Posted 14 Dec 2020 Link to this post

    Hi Jimmy,

    When the MultiCheckbox filter of the grid is set up, the filter expressions are always built with the "eq" (equals) operator. Therefore, setting the Contains operator via the options will not affect the MultiCheckbox.

    What I can recommend is that you actually store only the values in the database rather than the whole HTML value. This way, you would further decrease the chance of submitting arbitrary values that might do harm to the database. After that handle the styling with a ClientTemplate.

    Any other approach would require custom logic that might be error-prone. Do let me know if the suggestion above is not applicable in your scenario. 


    Best regards,
    Progress Telerik

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at

Back to Top