Error loading grid or scheduler after updating to 17.1.41

[Jaume]

Hi,

After updating to 17.1.41 I'm getting the following error while rendering a grid or scheduler

Uncaught TypeError: Cannot read property 'indexOf' of undefined

    at ODataV4Adaptor.UrlAdaptor.processQuery (adaptors.js?0f5f:462)

    at DataManager.executeLocal (manager.js?bf79:116)

    at eval (manager.js?bf79:164)

I'haven't changed anything from previous version that worked correctly.

The grid is defined like:

      <ejs-grid ref="grid" :dataSource="data" 

          :allowResizing='true' :allowPaging='true' :allowSorting='true' :allowFiltering='true' :allowReordering='true' :allowExcelExport="true" 

          :toolbar='toolbarOptions' :toolbarClick='toolbarClick' 

          @rowSelected="onSelected"

          @recordDoubleClick="onDblClick">

        <e-columns>

            <e-column field='userName' headerText='Usuario' ></e-column>

            <e-column field='name' headerText='Nombre' width=200></e-column>

            <e-column field='email' headerText='E-Mail' width=100></e-column>

            <e-column field='department' headerText='Prioridad' width=100></e-column>

        </e-columns>

      </ejs-grid>

and the dataSource:

      data: new DataManager({

        url: "/odata/users",

        headers: [{ Authorization: this.$axios.defaults.headers.common['Authorization'] }],

        adaptor: new ODataV4Adaptor()

      }),

For your information I'm using various ej2 controls initialized like this:

import Vue from 'vue'

import { GridPlugin } from '@syncfusion/ej2-vue-grids'

import { GanttPlugin } from "@syncfusion/ej2-vue-gantt"

import { SchedulePlugin } from "@syncfusion/ej2-vue-schedule"

import { UploaderPlugin } from '@syncfusion/ej2-vue-inputs'

import { TreeGridPlugin } from '@syncfusion/ej2-vue-treegrid'

import { loadCldr, setCulture, setCurrencyCode, L10n } from '@syncfusion/ej2-base'

import numbers from 'cldr-data/main/es/numbers.json'

import calendars from 'cldr-data/main/es/ca-gregorian.json'

import timeZoneNames from 'cldr-data/main/es/timeZoneNames.json'

import currencies from 'cldr-data/main/es/currencies.json'

import esLocaleTexts from '@syncfusion/ej2-locale/src/es.json'

Vue.use(GridPlugin)

Vue.use(GanttPlugin)

Vue.use(SchedulePlugin)

Vue.use(UploaderPlugin)

Vue.use(TreeGridPlugin)

loadCldr(

    numbers,

    calendars,

    timeZoneNames,

    currencies

)

setCulture('es')

setCurrencyCode("EUR")

L10n.load(esLocaleTexts)

Thanks

Jaume

[Pavithra Subramaniyam]

Hi Jaume, 

 

Thanks for contacting Syncfusion support. 

 

From your query we suspect that some duplicate package might be present in the @syncfusion folder of the node_modules. So we suggest you to use the remove the @syncfusion packages folder and install the packages again to resolve the problem. Please refer to the below documentation link for package update. 

 

Documentation: https://ej2.syncfusion.com/vue/documentation/common/how-to/update-npm-package/ 

 

Please get back to us if you need further assistance. 

 

Regards, 

Pavithra S. 

 

[Jaume]

Hi,

I tried your indications but it didn't work, I created the new project from scratch, copy the same src folder and then it worked again ¿?

But now when using a vue component as a column template in treegrid it throws the following error and previously worked:

TypeError: str.replace is not a function

    at evalExp (template.js?5cc4:65)

    at compile (template.js?5cc4:52)

    at Object.Engine.compile (template-engine.js?d9ef:57)

    at compile (template-engine.js?d9ef:16)

    at templateCompiler (util.js?d769:145)

    at new Column (column.js?3b5d:131)

    at prepareColumns (util.js?d769:185)

    at Grid.render (grid.js?9c37:701)

    at Grid.Component.appendTo (component.js?c155:129)

    at TreeGrid.render (treegrid.js?73ba:455) 

It could be a problem using a Gantt, Scheduler, Grid and Treegrid in the same app? The last version of Gantt component is 17.1.40 and others have 17.1.41...

Thanks,

Jaume

[Pavithra Subramaniyam]

Hi Jaume, 

 

Thanks for your update. 

 

We have checked your query and We suspect that the cause of the issue might be the Essential JavaScript 2 packages are not updated properly. Could you please confirm the below details that will be helpful for us to provide a better solution as early as possible. 

 

1. Please ensure whether the “node_modules/@syncfusion” folder has no any duplicate packages (ex: “node_modules/@syncfusion/ej2-navigations/node_modules/@syncfusion/ej2-base”).
2. If yes, please remove the duplicate “node_modules” folder from all the ej2-component folders and try to run the sample.

 

Please get back to us if you need any further assistance on this. 

 

Regards, 

Pavithra S. 

 

[Jaume]

Hi,

I removed every existing node_modules inside each @syncfusion/ej2 controls and the problem has solved. Why this happens? Every time I do npm update I need to do the same thing...How to fix it permanently?

Now I have another problem, I have a grid with filtering, sorting, reordering and grouping, when the grid is the default route view and I load the app the first time none of the previous features are available, the grid is rendered but not the filter row, grouping,.... Then I navigate to other view that has a treegrid with filtering, sorting and reordering and now the features are correctly rendered and If I go back to the previous view then the grid is rendered correctly with all features but without grouping that still doesn't work.

Thanks,

Jaume

[Pavithra Subramaniyam]

Hi Jaume, 

 

Query #1: I removed every existing node_modules inside each @syncfusion/ej2 controls and the problem has solved. Why this happens? 

 

Duplicate node modules are installed in the @syncfusion namespace is due to version conflicts in the dependency package version of updating package and package version in the application. 

 

Query #2: Every time I do npm update I need to do the same thing...How to fix it permanently? 

 

We suggest you to maintain latest version of all packages used in your application to resolve this issue or uninstall the packages and reinstall them will resolve this issue. 

 

Query #3:  grid is rendered correctly with all features but without grouping that still doesn't work. 

 

Before we proceeding this we would like to know the below mentioned information. It will help us provide a better solution as soon as possible, 

 

If you want to maintain the Grid state after the page refresh, then we suggest to use enablePersistance feature of the Grid to achieve this requirement. Refer the below link to know about enablePersistance feature of the Grid, 

 

Documentation: https://ej2.syncfusion.com/vue/documentation/grid/state-persistence/ 

 

If you already used enablePersistance or If you faced same issue after providing the enable persistence, then please share your full Grid code with package.json details for further assistance. 

 

Regards, 

Pavithra S.