Simple data grid refuses to sort by column

[Jason]

Hi there,

I was running into an issue where a grid embedded in my app wouldn't sort. I've now created a super simple test page and am still getting the same issue. Here's my test Vue component:

<template>

  <ejs-grid :dataSource="data" :allowSorting="true">

    <e-columns>

      <e-column field="name" headerText="NAME"></e-column>

      </e-columns>

  </ejs-grid>

</template>

<script>

export default {

  data: function() {

    return {

      data: [

        { id: 5, name: 'Terry' },

        { id: 7, name: 'Ben' },

        { id: 15, name: 'Nancy' }

      ]

    }

  }

}

</script>

I've also updated to the latest Syncfusion version of the grids library (18.4.32) with not change. Tapping on the column heading does nothing.

Any ideas what could be wrong?

Jason

[Thiyagu Subramani]

Hi Jason, 

Thanks for contacting Syncfusion forum. 

Based on your share information we suspect that your reported issue may occurs when missed to define Sort module in your application. So we suggest you to import and provide Sort module like below to achieve your requirement. 

<template> 

  <div id="app"> 

    <ejs-grid :dataSource="data" :allowSorting="true"> 

    <e-columns> 

      <e-column field="name" headerText="NAME"></e-column> 

      </e-columns> 

  </ejs-grid> 

  </div> 

</template> 

<script> 

import Vue from "vue"; 

import { GridPlugin, Sort } from "@syncfusion/ej2-vue-grids"; 

Vue.use(GridPlugin); 

export default Vue.extend({ 

  data: () => { 

    return { 

     data: [ 

        { id: 5, name: 'Terry' }, 

        { id: 7, name: 'Ben' }, 

        { id: 15, name: 'Nancy' } 

      ] 

    }; 

  }, 

  provide: { 

    grid: [Sort], 

  }, 

}); 

</script> 

 

Sample link: https://codesandbox.io/s/vue-template-forked-g4t1t 

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

Regards, 

Thiyagu S 

[Jason]

Sigh, yep, that was it. I always forget that step. Thanks Thiyagu!

Jason

[Thiyagu Subramani]

Hi Jason, 

Thanks for your update. 

We are happy to hear that the provided solution works at your end. 

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

Regards, 

Thiyagu S