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
return (
<div>
<GridColumnMenuSort {...props} />
<GridColumnMenuCheckboxFilter {...props} data={rows} expanded={true} uniqueData={true} />
</div>
);
}
Above is my code to show checkbox filter in columnMenu.
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).
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
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.
so there is no way to this like Jquery:
the only way to handle it is when the filters apply?
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.
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
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.
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
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.