This is a migrated thread and some comments may be shown as answers.

GridColumnMenuCheckboxFilter how to show different display value for checkbox

2 Answers 670 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Vikram
Top achievements
Rank 1
Veteran
Vikram asked on 23 Sep 2020, 06:59 AM

I've category column (contains unique guid) in my data[].
While showing category column in grid, somehow I've managed to show respective category_name instead of category_id at clientside.

I'm using GridColumnMenuCheckboxFilter to show checkbox filter with all possible filterable values.
But all checkboxes in category filter popup shows category_id (which is default behavior), this is not readable to user.

Can I change labels of checkboxes in category filter popup from category (i.e category_id) to category_name.

 

 

2 Answers, 1 is accepted

Sort by
0
Vikram
Top achievements
Rank 1
Veteran
answered on 23 Sep 2020, 07:18 AM
const ColumnMenuCheckboxFilter = (props) => {
        return (
            <div>
                <GridColumnMenuSort {...props} />
                <GridColumnMenuCheckboxFilter {...props} data={rows} expanded={true} uniqueData={true} />
            </div>
        );
}



Above is my code to show checkbox filter in columnMenu.
0
Stefan
Telerik team
answered on 23 Sep 2020, 11:14 AM

Hello, Vikram,

In this case, we have to bound the GridColumn to the Category.CategoryName field and it will be shown as expected:

https://stackblitz.com/edit/react-2etlqf-k95xqk?file=app/main.jsx

I hope this is helpful.

Regards,
Stefan
Progress Telerik

Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive, special prizes, and more, for FREE?! Register now for DevReach 2.0(20).

Daniel
Top achievements
Rank 1
Iron
Iron
commented on 08 Nov 2021, 01:33 PM

I have a similar issue and the answer above not helping.

is it possible to give hardcoded options to ColumnMenuCheckboxFilter and decide the value of the checkbox and what the text is?

 for example, give the array of options [{value: "1", text: "one" },{value: "2", text: "two" }] to ColumnMenuCheckboxFilter 

Stefan
Telerik team
commented on 08 Nov 2021, 02:27 PM

Hello, Daniel,

Currently, the ColumnMenuCheckboxFilter can be bound only to a primitive value. The idea is that the values there should be the same values that are shown in the cell.

If the developer has a complex object and needs to do server filtering, the developer has to add extra logic to match the text value with the id.

Daniel
Top achievements
Rank 1
Iron
Iron
commented on 08 Nov 2021, 02:39 PM | edited

so there is no way to this like Jquery:

the only way to handle it is when the filters apply? 

Stefan
Telerik team
commented on 08 Nov 2021, 02:57 PM

Hello, Daniel,

The same end result is possible, but the approach is different as they are two different technologies.

If you have specific data and a case, please share it with us and I will be happy to make an example with it.

Daniel
Top achievements
Rank 1
Iron
Iron
commented on 08 Nov 2021, 03:09 PM | edited

thank you for the quick response.

I have a field called "store" whose column menu is ColumnMenuCheckboxFilter as you can see in the code

 


<Grid
                                    style={{ height: "600px", width: "90%", margin: "auto" }}
                                    data={data}
                                    sortable
                                    resizable
                                    selectable
                                    pageable
                                    // filterOperators={filterOperators}
                                    pageSize={pageSize}
                                    skip={skip}
                                    take={take}
                                    total={totalSize}
                                    sort={sort}
                                    onDataStateChange={dataStateChange}
                                >
                                    <GridToolbar>
                                        <a href={excelExportURL}>
                                            <button
                                                title="Export Excel"
                                                className="k-button k-primary"
                                                disabled={data.length === 0}
                                                onClick={setExcelExportURL}
                                            >
                                                Export to Excel
                                            </button>
                                        </a>
                                    </GridToolbar>
                                    {columns.map((column, index) => {
                                        return (
                                            <Column
                                                key={index}
                                                field={column.field}
                                                title={column.title}
                                                filter={column.type}
                                                format={column.type === 'date' ? '{0:yyyy-MMM-dd HH:mm}' : ""}
                                                width={calculateWidth('column.field')}
                                                columnMenu={(column.field != 'store.name' && column.field != 'status') ? ColumnMenu : CheckBoxFilterMenu}
                                            />
                                        );
                                    })}
                                </Grid>

so after this  it looks like this :

 

the problem is the value is the text and I need the value as enum,

I want to be able to pass these options from object that holds the value and the relevant text

Stefan
Telerik team
commented on 09 Nov 2021, 06:07 AM

Hello, Daniel,

Thank you for the details.

As mentioned the ColumnMenuCheckboxFilter can only accept and filter primitive values. I see that the text value is correctly shown in the provided images.

If there is a specific issue, please share a runnable example where we can see the specific requirements and suggest how it can be achieved with the current functionality.

Even in the linked Kendo UI example, the actual filter is still only the selected string, not the full object.

Daniel
Top achievements
Rank 1
Iron
Iron
commented on 09 Nov 2021, 07:42 AM

Ok, thank you I will try to solve it.

can I ask another question about filter operators?

I posted a question but not got an answer yet and it's important for me - https://www.telerik.com/forums/how-to-customize-filter-operators-to-each-field

 

Stefan
Telerik team
commented on 10 Nov 2021, 06:03 AM

Hello, Daniel,

I see that one of my colleagues is already working on that case.

We will reply again today in that thread in order to keep the information in a single place.

Tags
General Discussions
Asked by
Vikram
Top achievements
Rank 1
Veteran
Answers by
Vikram
Top achievements
Rank 1
Veteran
Stefan
Telerik team
Share this question
or