GridColumn values property not exists in React version of Kendo grid

[nodsec]

I'm migrating KendoUI for jQuery to React. In jQuery version of Kendo Grid was possible to set "values" property to columns with "id" values.

In React version of the kendo grid, the "values" property for the GridColumn component is not available. How can I make the same like in jQuery version?

 

Thanks a lot for an each help.

[Wissam]

Hi Nodsec,

Thanks for contacting us.

The desired behavior can be achieved by manually maping the "data" of your application before passing it to the KendoReact Grid component.

Please refer to this stackblitz example for a demo:

• 8rrdyx (forked) - StackBlitz

Currently, we do not have this functionality provided out-of-the box as part of our desire to support custom use-cases.

Please let us know if the provided stackblitz example helps you solve the issue, or if we have misunderstood the use-case for the "values" property.

Regards,
Wissam
Progress Telerik

[nodsec]

Hi @Wissam, I'm really appreciate your help. My grid is using also filtering, sorting, etc. on server side. Problem is, If I will make the manual mapping by your example, I don't know, how to make a correct filtering by "id". Probably I need to create special GridColumn Menu and somehow add Multi checkboxes list with filtering by "id" (In jQuery KendoUI was displayed this filtering menu automatically, when I used the "values" column property). I need the same feature in React.

 

Thanks a lot :-)

[Wissam]

Hi Nodsec,

Thank you for your patience and please excuse us for the delayed response.

The value prop in KendoUI for jQuery automatically maps the values to the ids and produces the correct filter expression.

In order to replicate this behavior with the KendoReact Grid component, please allow us to provide you with an alternative approach to the one we sent over earlier.

In the following stackblitz example, we are suggesting an alternative approach, where instead of mapping the data, we are providing a custom 'filterCell' and 'cell' components to the GridColumn, which are responsible for visualising text the value of the column (In the example - the "category" title) instead of its id:
https://stackblitz.com/edit/react-np9zvc-xue2tm?file=app/grid.jsx

This moves the responsibility of showing the correct values to the "cell" and "filterCell", leaving the filtering functionality untouched, thus making it backward compatible with the KendoUI "values" property.

We understand that this is not optimal, and we will be working towards making such scenarios easier to implement, but in the meantime we would like to kindly ask you to give the above approach a try and let us know if you have any further questions - we will be more than happy to assist you.

Regards,
Wissam
Progress Telerik

[nodsec]

Hi @Wissam, thanks a lot for your answer. I tried to update code by your recommendation, but the difference is, that I prefer ColumnMenu instead of FilterCell by your example. I tried to implement the ColumnMenu with GridColumnMenuCheckboxFilter, It has "data" property with Array of string or array of objects. https://www.telerik.com/kendo-react-ui/components/grid/api/GridColumnMenuCheckboxFilterProps/#toc-data

I don't know, what Im doying wrong, but still I have only one item with undefined label text. Fork and updated your code is here: https://stackblitz.com/edit/react-np9zvc-4sciax?file=app%2Fgrid.jsx,app%2FcolumnMenu.jsx

Thanks a lot.

[Wissam]

Hello Nodsec,

The data object has two values which are `title` and  `value`, and you were using `text` in the place of `title` in the `_processValues` function, and while assigning the dataTextField to the props. Changing the `text` with the `title` in the snippet below will allow you to bind the filtering menu successfully:

const dataTextField =

      props.dataTextField !== undefined ? props.dataTextField : 'title';

The `data` object in the `columnMenu.jsx` refers to the `categories` object which is passed in the `CategoriesContextProvider` inside the ` value` prop in `grid.jsx`.

Here is a demonstration: https://stackblitz.com/edit/react-np9zvc-kukgkt?file=app%2Fdata.js,app%2Fgrid.jsx,app%2FcolumnMenu.jsx 

Regards, Wissam Progress Telerik

[nodsec]

Hello @Wissam, sorry for the mistake, I tried a lot of changes to understand, what is the problem, but without success.

Thanks, for your fix, but as you can see in stackblitz, This is not right reason. The example still not works :-(

Also when you put directly Array of  objects with title and text field, the columnMenu checkBoxList displaying only singhe item with undefined label.

<GridColumnMenuCheckboxFilter data={[{title: 'aaaa', value: 1}, {title: 'bbb', value: 2}]} {...props} />

 

Thanks a lot.

[Kiril]

Hi Nodsec,

After a deeper research we were not able to achieve the desired visual result using the current set of available features of the KendoReact Data Grid component.

Please allow me to provide further explanation:

The `GridColumnMenuCheckboxFilter` accepts the whole grid data as `data` property and generates available values for filtering. This means that passing any other data (like "categories") would not be correct (hence the rendering with a single "undefined" item) and the filterDescriptor would be incorrect.

With the current set of features the `GridColumnMenuCheckboxFilter` does not provide any advanced data-binding which are required to replace the values rendering (from numerals "1","2","3"... to more-descriptive titles).

We've tried alternative approaches with the `filterUI` property of the GridColumnMenuFilter component. However, it is designed around producing a single FilterDescriptor which is not compatible with the desired checkbox UI (where multiple checkboxes can be checked at the same time) requiring multiple filter descriptors.

We will be further evaluating how can we provide more customization options to the `GridCOlumnMenuCheckboxFilter`, but for now our recommended approach would be to use the `filterCell` instead.

Please let us know how can we further assist you.