telerik VueJS grid filtering throwing error

Question

I'm trying to implement the vuejs (native) grid filtering and get the following error when trying to clear a set filter:

   [Vue warn]: Error in v-on handler: "RangeError: invalid array length"

  found in

  ---> <GridFilterCell>
        <FilterRow>
         <HeaderRow>
           <Header>
             <Grid>
               <Reports3> at src/components/Reports3.vue
                 <Target> at src/components/Target.vue
                   <App> at src/App.vue
                     <Root> vue.runtime.esm.js:619


  RangeError: "invalid array length"
     node_modules FilterRow.js:51
     node_modules FilterRow.js:115
     node_modules FilterRow.js:150
    VueJS 4
     node_modules GridFilterCell.js:258
     node_modules GridFilterCell.js:229
     node_modules GridFilterCell.js:164
  VueJS 3
   vue.runtime.esm.js:1888

grid definition:

  <Grid :style="{height: '450px'}"
              :data-items="reports"
              :sortable="true"
              :sort="sort"
              :filterable="true"
              :filter="filter"
              :filter-cell-render="filterRender"
              :pageable="true"
              :skip="skip"
              :take="take"
              :total="totalRecords"
              :columns="columns"
              @filterchange="filterChange"
              @sortchange="sortChangeHandler"
              @pagechange="pageChangeHandler">}
  </Grid>

The data() filter methods:

  data(){
    return{
          filter: {
            logic: "and",
            filters: [
               { field: "institutionId", operator: "neq", value: 0 },
               { field: "typeCode", operator: "neq", value: "" },
               { field: "name", operator: "neq", value: "" }
           ]
         },
         filterChange: function (e) {
           this.filter = e.filter;
         },
         filterRender: function (h, defaultRendering, props, change) {
         return defaultRendering;
       }
     }
  }

This is the telerik doc page I'm using as a ref: https://www.telerik.com/kendo-vue-ui/components/grid-native/filtering/

Answer 1

I ran into the same problem. As the telerik Vue grid (native) is still considered beta, I think there are still a few bugs like this one.

Here is a workaround until fixed by the telerik team.

In your project folder go´to:
node_modules@progress\kendo-vue-grid\dist\es\header\FilterRow.js

Find this line:
this.$emit.apply(this, __spreadArrays(['filterchange', filtersResult], e));

Replace it with this line:
this.$emit.apply(this, ['filterchange', filtersResult, e]);

And you should be ready to go.

I think __spreadArrays is a TypeScript (3.6) command and perhaps misplaced in the FilterRow.js. And it seems not to be necessary, as the objects filterchange, filtersResult and e are definitley not arrays themselves. You can check it by debugging. Keep in mind, that any update of the telerik grid version will force you to find and change the code line again until the bug is taken care of.

Hope it helps.