Vue Grid Not Showing Arrow Icon When Sorting

[Khalipha Thomas]

I've noticed when using the data grid syncfusion component for VueJS that when I choose to sort my grid, there is not a current indicator to let the client know which way the data is being sorted. The React version of the component can show the icon but for some reason the Vue component won't follow that functionality.

This is the Vue version of the component filtering the results in descending order: https://ej2.syncfusion.com/vue/documentation/grid/getting-started/#enable-sorting

And this is the React version of the exact same component:https://ej2.syncfusion.com/react/documentation/grid/sorting/

Would it at all be possible for the same functionality of indicating on the grid the ascending/descending order of columns towards Vue? Or if it can already be done, can I ask for help in showing that indication? Thanks so much in advance

[Sujith Kumar Rajkumar]

Hi Khalipha, 

 

Greetings from Syncfusion support. 

 

We checked the reported problem by creating an individual sample(since currently the documentation preview samples are not running for which we have logged an internal task to check and resolve it) but unfortunately were unable to reproduce it as the sort icon was properly displayed in the Grid header. You can check the below sample for reference, 

 

Sample: https://codesandbox.io/s/vue-forked-cktrt?file=/src/App.vue 

 

So please share us the following information to validate further on this, 

 

• Share us the Grid code file.
• Share us a video demonstration of the problem.
• Share us the package.json file of your application.
• If possible share us a simple sample to replicate the problem or try reproducing it in the above provided sample.

 

Regards, 

Sujith R 

[Khalipha Thomas]

This is the the code that when I run in app.vue that will not show the grid arrows showing ascending/descending order

<template>

  <div id="app">

    <ejs-grid

      :dataSource="data"

      allowSorting="true"

      ref="grid"

      :allowPaging="true"

    >

      <e-columns>

        <e-column

          field="OrderID"

          headerText="Order ID"

          textAlign="Right"

          width="90"

        ></e-column>

        <e-column

          field="CustomerID"

          headerText="Customer ID"

          width="120"

        ></e-column>

        <e-column

          field="Freight"

          headerText="Freight"

          textAlign="Right"

          format="C2"

          width="90"

        ></e-column>

      </e-columns>

    </ejs-grid>

  </div>

</template>

<script>

import Vue from "vue";

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

Vue.use(GridPlugin);

export default {

  data() {

    return {

      data: [

        { OrderID: 10248, CustomerID: "VINET", Freight: 32.38 },

        { OrderID: 10249, CustomerID: "TOMSP", Freight: 11.61 },

        { OrderID: 10250, CustomerID: "HANAR", Freight: 65.83 },

        { OrderID: 10251, CustomerID: "VICTE", Freight: 41.34 },

        { OrderID: 10252, CustomerID: "SUPRD", Freight: 51.3 },

        { OrderID: 10253, CustomerID: "HANAR", Freight: 58.17 },

        { OrderID: 10254, CustomerID: "CHOPS", Freight: 22.98 },

        { OrderID: 10255, CustomerID: "RICSU", Freight: 148.33 },

        { OrderID: 10256, CustomerID: "WELLI", Freight: 13.97 },

      ],

    };

  },

  provide: {

    grid: [Page, Sort],

  },

};

</script>

<style>

@import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";

</style>

{% endraw %}

[Khalipha Thomas]

Actually an update on the bug I was able to fix it by adding in the style import link that was provided in your earlier example. Thank you for responding and I appreciate the support team for logging the internal task to investigate the issue with not being able to display the documentation preview samples as I was running into trouble using that which was one of the reason

[Sujith Kumar Rajkumar]

Hi Khalipha, 

 

You’re welcome and thanks for the appreciation. We are glad to hear that your query has been resolved. 

 

Regards, 

Sujith R