Filtering (like Excel) when using GridEditMode.InCell and columns.Template

1 Answer 69 Views
Grid
This question is locked. New answers and comments are not allowed.
Eric
Top achievements
Rank 2
Iron
Iron
Eric asked on 03 Jun 2024, 11:52 AM

This was a wonderful solution to add checkboxes to a grid w/o needing to double click to enter the editor.

https://www.telerik.com/forums/how-can-i-have-a-checkbox-column-in-a-grid-without-having-to-click-on-the-checkbox-twice-to-edit#1557957

Is there a way to add a filter to the checkbox columns as well?

1 Answer, 1 is accepted

Sort by
0
Tsvetomila
Telerik team
answered on 06 Jun 2024, 11:40 AM

Hello Eric,

According to my understanding of this inquiry, you need to add filtering to columns in a grid. Is my supposition correct? If this is the case, it can be accomplished with the .Filterable() API configuration, added in the Grid. 

Additional functionalities and styling could be enhanced by enabling this feature within the column property. For example:

@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()
    .Name("grid")
    .Columns(columns => {
        // Omitted for brevity...
        columns.Bound(p => p.Discontinued)
            .ClientTemplate("#=dirtyField(data,'Discontinued')#<input type='checkbox' #= Discontinued ? checked='checked' : '' # class='chkbx k-checkbox k-checkbox-md k-rounded-md' />")
            .Filterable(ftb => ftb.Multi(true).Search(true))
            .Editable("returnFalse")
            .Width(100);
    })
    ...
    .Filterable() // This configuration enables the filterable functionality.
)

Please take a look at the REPL below, there you can find the working example from the public forum item you mentioned with the filtering feature added.

I noticed that in the title you mentioned - like Excel, and I researched a bit more that functionality. In case to make the filter option more like it is in the excel, I recommend this documentation:

It includes step-by-step guidelines of how to implement it, code snippets and Telerik REPL link, where the example can be run.

Please let me know if this information was useful for you.

If not and you need further assistance, it would be good if you can provide more information about the task requirements and needs. For example, a code snippet showcasing the Grid's configuration. Alongside any JavaScript logic that changes the behavior of the Grid component. This will be really helpful to the case.

Additionally, what did you find working for you in the public forum item and any other information that could help us better understand your requirement at hand. 

Regards,
Tsvetomila
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages. If you're new to the Telerik family, be sure to check out our getting started resources, as well as the only REPL playground for creating, saving, running, and sharing server-side code.
Tags
Grid
Asked by
Eric
Top achievements
Rank 2
Iron
Iron
Answers by
Tsvetomila
Telerik team
Share this question
or