Telerik Forums / KendoReact
This is a migrated thread and some comments may be shown as answers.

kendo-grid-react-wrapper - internationalisation

9 Answers 85 Views
Wrappers for React
This is a migrated thread and some comments may be shown as answers.
Darko
Top achievements
Rank 1
Darko asked on 10 Oct 2018, 02:09 PM

Hello,

I intend to use the kendo-grid-react-wrapper and my question is if there is any possibility for internationalization for this grid-wrapper.

In the image below you can see what I mean by that. I would like that 'Is equal to', 'Filter', 'Items' etc. to be in a different language. The language that I intend to use is German (de-DE). With the kendo-react-grid (not the wrapper) the language shift is easily done, but for the kendo-grid-react-wrapper I just don't find a reasonable solution to that.

And one more question if I may: is there any possibility to customize the drop-down-filter-list? For example: binding more conditions than the ones already given.

I look forward to your reply.

Best Regards,

Darko Konrad

 

9 Answers, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 12 Oct 2018, 06:16 AM
kendo-grid-wrapper-messages.zip
Hello, Darko,

The messages can be changed by importing the messages file for the desired region:

import '@progress/kendo-ui/js/messages/kendo.messages.de-DE';

I also attached an example demonstrating this.

Regards,
Stefan
Progress Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Darko
Top achievements
Rank 1
answered on 16 Oct 2018, 01:10 PM

Hello Stefan,

thank you for the reply. The solution you gave me worked perfectly. For other reasons I have decided to use the kendo-react-grid instead of the kendo-grid-react-wrapper.

With the kendo-react-grid I have encountered some performance problems in the inline-editing functionality. Here is the wrapper a lot faster than the grid. I've studied a bit the problem and I have noticed something: the grid has no key/data-uid per row:

Is there a way to implement this key/id per row to the grid? And maybe to specify which column should be used in creating this key.

I look forward to your reply

Best regards,

Darko Konrad

 

0
Darko
Top achievements
Rank 1
answered on 17 Oct 2018, 11:14 AM

Hello Stefan,

this is my current email address:

Email
darko.konrad@labs.lupusalpha.de
Customer ID

QN4945699

 

Please reattach this ticket to the current address.

 

Thanks,

Darko

0
Stefan
Telerik team
answered on 17 Oct 2018, 12:28 PM
Hello, Darko,

The Grid elements do have key attributes for them. They are just not visible in the DOM structure, but they can be seen using the React DevTools:



In general, depending on the use case the native React Grid could be just slightly slower than the Wrapper Grid because the wrapper is re-rendered once the update button is clicked, and the native is updating on every keypress. This should not cause any noticeable delays as due to the React virtual DOM, the unchanged DOM elements are not re-render. Compare to the wrapper Grid typing could be just a fraction of a second faster because the wrapper is not changing anything, only the input value but clicking the update button will be slower in the wrapper.

If you share the exact way the Inline editing is handled and a short video of the cases where it is slower, we will be happy to provide suggestions to improve the performance.

Regards,
Stefan
Progress Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Darko
Top achievements
Rank 1
answered on 17 Oct 2018, 01:33 PM

Hello Stefan,

 

thank you once again for your reply.

I will send you a video with the problem that I have, but maybe we could solve this issue different: is there an out of the box solution with a cache object for the OnEdit function? So that on keypress from the user, not the entire list to be sliced but only that particular object to be edited. I think the current implementation is slow because of the slice function that is called every time on keypress. The solution that I am thinking at:

var cacheObject;

 

enterEdit(dataItem){

cacheObject = copyObject(dataItem);
replaceElementInGrid(dataItem, cacheObject);

}

itemChange(event) {
const value = event.value;
const name = event.field;
if (!name) {
return;
}
cacheObject[name] = value;
this.setState({cacheObject});
}

 

 

I look forward to your reply

Best regards,

Darko Konrad

0
Stefan
Telerik team
answered on 18 Oct 2018, 08:48 AM
Hello, Darko,

Thank you for the suggestion.

In general, splice should not cause any noticeable performance issues as it is just used to create a new instance of the array in this case:

https://medium.com/@justintulk/javascript-performance-array-slice-vs-array-filter-4573d726aacb

Could you please share the video, so we can see at what point the editing becomes slower and provide an approach that will target this specific performance issues.

Regards,
Stefan
Progress Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Darko
Top achievements
Rank 1
answered on 22 Oct 2018, 01:12 PM
code-oninputchange.jpg

Hello Stefan,

I have implemented the External Form for editing the grid and the performance is acceptable when the grid page is not bigger than 20. I still don't quite understand what does the page size has to do with editing one element from the state. I have attached a video with this behavior. It doesn't bother me now that much because I can live with the 20-page-size. So we can call it solved.

( the video is here: https://vimeo.com/user90899383/review/296416282/1e3f534ba6 )

Best regards,

Darko

0
Stefan
Telerik team
answered on 23 Oct 2018, 08:42 AM
Hello, Darko,

Thank you for the additional details. Please have in mind that the video link was not found:

Also, when the external form is used, the Grid does not need to be updated on type which will improve the performance.

I modified our example with external form, so the form has its own state and does not call the render method of the component where the Grid is on every type. Please check and see if this improves the performance:

https://stackblitz.com/edit/react-uumwjc?file=app/main.js



Regards,
Stefan
Progress Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Darko
Top achievements
Rank 1
answered on 25 Oct 2018, 09:05 AM

Hello Stefan,

that was a really cool idea! It solved the problem completely. Thank you a lot.

(Maybe you should change the example from here 'https://www.telerik.com/kendo-react-ui/components/grid/editing/editing-external-form/' with the one you sent me.)

Thank you once again and have a nice day,

Daniel

Tags
Wrappers for React
Asked by
Darko
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Darko
Top achievements
Rank 1
Share this question
or