kendo-grid-react-wrapper - internationalisation

10 posts, 0 answers
  1. Darko
    Darko avatar
    27 posts
    Member since:
    Sep 2008

    Posted 10 Oct 2018 Link to this post

    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

     

  2. Stefan
    Admin
    Stefan avatar
    2826 posts

    Posted 12 Oct 2018 Link to this post

    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
  3. Darko
    Darko avatar
    27 posts
    Member since:
    Sep 2008

    Posted 16 Oct 2018 Link to this post

    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

     

  4. Darko
    Darko avatar
    27 posts
    Member since:
    Sep 2008

    Posted 17 Oct 2018 Link to this post

    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

  5. Stefan
    Admin
    Stefan avatar
    2826 posts

    Posted 17 Oct 2018 Link to this post

    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
  6. Darko
    Darko avatar
    27 posts
    Member since:
    Sep 2008

    Posted 17 Oct 2018 Link to this post

    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

  7. Stefan
    Admin
    Stefan avatar
    2826 posts

    Posted 18 Oct 2018 Link to this post

    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
  8. Darko
    Darko avatar
    27 posts
    Member since:
    Sep 2008

    Posted 22 Oct 2018 in reply to Stefan Link to this post

    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

  9. Stefan
    Admin
    Stefan avatar
    2826 posts

    Posted 23 Oct 2018 Link to this post

    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
  10. Darko
    Darko avatar
    27 posts
    Member since:
    Sep 2008

    Posted 25 Oct 2018 in reply to Stefan Link to this post

    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

Back to Top