GridColumnMenuCheckboxFilter how to show different display value for checkbox

[Vikram]

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.

 

 

[Vikram]

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.

[Stefan]

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

[Daniel]

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]

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]

so there is no way to this like Jquery:

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

[Stefan]

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]

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]

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]

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]

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.