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

Groupable grid boolean and date

5 Answers 228 Views

General Discussions

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

5 Answers, 1 is accepted

answered on 07 Aug 2020, 11:39 AM

So only "text" cells are working properly. No boolean or date/number because "format" and "locale" .

"It is easy for the user to decide if he wants to format them before passing down to the grid. (more over he could already do that)" I do not understand this. I am not formatting ma data because I am using column "format" prop and your IntlProvider. I also can not convert everything to formatted strings because IntlProvider and format will be useless and all of my custom cells will stop working. Only solution I see there is your "cellRender" but clone and override the cell is not the most future proof solution.

1. So I have to create cellRender, connect it to IntlProvider, clone the cell, remove all children except the arrow td.props.children.props.children[0] and hope you will never change the layout, read props.dataItem.value, check it for value type, format it and apply this to every grid. Where can I find the column "format" value in the cellRender? https://stackblitz.com/edit/react-7exwjp-c6atam?file=app%2Fmain.jsx

2. Is there an easier solution I overlooked?

answered on 10 Aug 2020, 07:12 AM

Hello, Matej,

I completely understand your point and I can agree that we can provide an easier way to handle these cases. One of the options is to add the type to the column based on the issue that I linked. This will allow us to format the groups as well as we will already know the specific type.

As for changing the rendering, we change the rendering in very very few cases and it will be either to fix an issue or a breaking change that will be noted in the release notes.

As for the format in the cellRender I can suggest having a global const for the format and to use it inside the Column configuration and on the cellRender:

https://stackblitz.com/edit/react-7exwjp-cveckj?file=app%2Fmain.jsx

Regards,
Stefan
Progress Telerik

answered on 10 Aug 2020, 09:13 AM

Kendo grids require a lot of custom code (to enable selecting, sorting, filtering, expanding) but you are not passing important props to custom components (also had a problem with missing prop here https://www.telerik.com/forums/kendo-grid-custom-cell-with-row-selection) because you are expecting that all the code is written in a single file and all functions/methods have access to everything. This is not true. I am sure that I am not the only one who have a shared "BasicGrid" component with selecting/sorting/filtering/grouping/expanding... implemented and reusing it across the app. In this case custom cell functions or column configs can be in a completely different part of the application than the grid. One example:

<BasicGrid data={data} groupable locale="en"> // if cellRender had an info about the format the groupable header "hack" could be hidden inside of the BasicGrid

<Column field="ProductID" title="ID" width="50px" />

<Column field="ProductName" title="Product Name" />

<Column field="BooleanValue" title="Boolean Value" />

<Column field="Date" title="Date" format="0:MMM dd, yyyy" /> //one format

<Column field="Date2" title="Date" format="0: yyyy" /> // different

</BasicGrid>

My point is that if you expect us to create custom code we should have all necessary data. Now we have to extract the data, save it to redux or context, share it between components, "watch" for data change and update shared state. This is adding unnecessary complexity.

Accepted

answered on 11 Aug 2020, 01:05 PM

Hello, Matej,

Thank you for sharing your honest feedback with us, this is very valuable.

Regarding both main concerns:

1) The grouping row formatting - We have opened a new issue to improve this specific behavior and we will think of the most convenient and flexible way of archive this:

https://github.com/telerik/kendo-react/issues/698

2) Also, for the missing props - We are not expecting all code to be in one file. This is only for a demo purpose as it is not a full application. We know that different props/comp[onent can be in multiple files and React has many ways of handling this. We can use High order components to pass all needed information, we can use the React built-in context or any other third party libraries that help manage this. IF the Grid or the KendoReact components, in general, pass everything everywhere, this will mean that we will have no encapsulation and the components will become heavy and can help performance issue. This is why we try to pass only the pros that the 100% needed and the ones that are very hard to obtain. This is why we agree that the group row can be optimized.

Regards,
Stefan
Progress Telerik