Kendo UI Globalization issue for the Grid Widget

[David]

Hi All,

     I tried following the tutorial https://www.telerik.com/kendo-vue-ui/components/wrappers-globalization/ to enable the internalization for my app.   As we all know, the default language is en-US  and I used kendo.culture("en-AU") to apply the new culture.  After it is done, when debugging, the new feature did apply to the DatePicker like this: (which is dd/MM/yyyy as the Australia Date Format)

However, I found the new feature did not apply correctly to the Filter feature in Grid Widget,  see the screenshot below: (which is still the US format)

In theory it can be applied correctly based on the tutorial.   May I ask the reason for this?   Much appreciated for the answer, thanks!

 

 

[Filip]

Hello, David,

To translate the messages inside the Wrapper Grid, you need to also import the desired message file to your project. I have attached a sample project which showcases how to translate the Grid in French, however the same approach can be used for any language that you need. The relevant code is in `main.js`:

mport "@progress/kendo-ui/js/cultures/kendo.culture.fr-CA.js";
kendo.culture("fr-CA");
import '@progress/kendo-ui/js/messages/kendo.messages.fr-CA.js'

The code in yellow updates the culture of the Kendo UI for Vue Wrapper components and the code in green sets the messages inside each component. Please review the implementation in the project and let me know in case further assistance is required.

Regards,
Filip
Progress Telerik

[David]

Hi Filip,

      Thanks for the answer and I imported all the packages already.   Unfortunately the issue still exists. 

      The DatePicker which is working is in App.Vue and below is the code:

<div id="vueapp" class="vue-app row example-wrapper">
      <kendo-datepicker :value="new Date()"></kendo-datepicker>
    </div>

     The Grid which is not working properly is in a vue component file inside the app:

<Grid
          ref="gridCtrl"
          class="dense_grid"
          :loader="disposalTraySearch.isLoading"
          :columns="gridColumns"
          :resizable="true"
          :column-menu="true"
          :sortable="true"
          :selected-field="selectedField"
          :sort="sort"
          :filter="gridFilter"
          :data-items="gridData"
          @filterchange="onFilterChange"
          @sortchange="onSortChange"
          @selectionchange="onSelectionChange"
          @rowclick="onRowClick"

 

Did I miss anything essential?  Thanks!

[Filip]

Hi, David,

I reviewed the provided code, however I was not able to pinpoint anything essential in the implementation that is missing. Since it will be hard to pinpoint the root-cause by looking at code alone, can you please send me a runnable example with your implementation? This will enable me to debug it locally, find the root-cause and implement a fix.

Regards,
Filip

[David]

Thanks for the answer Filip and we found another solution to this.  The ticket can be closed, thanks!