We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Data Grid not displaying data

<template>
    <div id="app">
        <ejs-grid ref='grid' id='Grid' :dataSource="data" :allowPaging="true" :toolbar='toolbarOptions' :allowPdfExport='true' :toolbarClick='toolbarClick' :allowSorting='true' :allowFiltering='true' :allowGrouping='true' :pageSettings='pageSettings'>
          <e-columns>
            <e-column field='id' ></e-column>
            <e-column field='ntn'></e-column>
            <e-column field='type'></e-column>
          </e-columns>
        </ejs-grid>
    </div>
</template>
<script>
import Vue from "vue";
import { GridPluginPageSortFilterGroupToolbarPdfExport } from "@syncfusion/ej2-vue-grids";
import { DataManagerODataAdaptor } from "@syncfusion/ej2-data";

Vue.use(GridPlugin);

export default {
  data() { 
    return {
      data: new DataManager({
        url: "http://unity/odata.svc/Sellers",
        adaptor: new ODataAdaptor(),
        crossDomain: true
      }),
      pageSettings: { pageSize: 5 },
      toolbarOptions: ['PdfExport']
    };
  },
  methods: {
      toolbarClick(args) {
        if (args.item.id === 'Grid_pdfexport') { // 'Grid_pdfexport' -> Grid component id + _ + toolbar item name
            this.$refs.grid.pdfExport();
        }
    }
  },
  provide: {
    grid: [PageSortFilterGroupToolbarPdfExport]
  }
}
</script>
<style>
@import '..\..\..\..\node_modules/@syncfusion/ej2-base/styles/material.css';
@import '..\..\..\..\node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '..\..\..\..\node_modules/@syncfusion/ej2-calendars/styles/material.css';
@import '..\..\..\..\node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
@import '..\..\..\..\node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '..\..\..\..\node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import '..\..\..\..\node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '..\..\..\..\node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
@import "..\..\..\..\node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>


9 Replies

SH Shoaib December 13, 2019 12:27 PM UTC

i am using this package https://github.com/Algo-Web/POData-Laravel in laravel to make a Odata web Service.

but i am displaying the data grid in vue.js as you can see in the code posted above 
so when i am using this url https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Orders in OdataAdaptor everything is working fine
but when i try to use my laravel url then it displays the rows but data is empty
in the end right corner it is displaying the pagination correctly
showing the correct total count and the pagination divided count and also other features like sorting and filtering are searching perfectly fine
but only the value of <td>(just for reference) is not displaying.




TS Thavasianand Sankaranarayanan Syncfusion Team December 16, 2019 08:57 AM UTC

Hi Shoaib, 

Greetings from syncfusion support. 

From analyzing your query we suspect that your columns field was not defined in your service link. Please define the existing field to overcome the issue. We are not able to reproduce the issue because your provided service link was not reached please refer the below screenshot for more information. 

 

If you still had the issue, please provide the reachable service link that will be helpful for us to provide better solution. 

Regards, 
Thavasianand S. 



SH Shoaib December 17, 2019 11:22 AM UTC

this service link is on my local machine, so thats why you cant access this.
by the way i solved this by customizing the OdataAdaptor because somehow my service link is sending data in this original.result.results
but on your odataservice link i am getting data in just original.result.
check the code below the that how i am able to solved this.

<template>
    <div id="app">
        <ejs-grid ref='grid' :query='queryid='Grid' :dataSource="data" :allowPaging="trueheight=300px :toolbar='toolbarOptions' :allowPdfExport='true' :toolbarClick='toolbarClick' :allowSorting='true' :allowFiltering='true' :allowGrouping='true' :pageSettings='pageSettings'>
          <e-columns>
            <e-column field='marketplace_reference_id' headerText='Order ID' textAlign='Right'>e-column>
            <e-column field='seller_id' headerText='Seller ID' textAlign='Right'>e-column>
            <e-column field='destination_city' headerText='Destination City' textAlign='Right'>e-column>
            <e-column field='status' headerText='Status' textAlign='Right'>e-column>
            <e-column field='grand_total' headerText='Grand Total' textAlign='Right'>e-column>
            <e-column field='customer_name' headerText='Customer Name' textAlign='Right'>e-column>
            <e-column field='customer_number' headerText='Customer Number' textAlign='Right'>e-column>
          e-columns>
        ejs-grid>
    div>
template>
<script>
import Vue from "vue";
import { GridPluginPageSortFilterGroupToolbarPdfExport } from "@syncfusion/ej2-vue-grids";
import { DataManagerODataAdaptorQuery } from "@syncfusion/ej2-data";

Vue.use(GridPlugin);

class SerialNoAdaptor extends ODataAdaptor {
    processResponse() {
        //calling base class processResponse function
        let original = super.processResponse.apply(thisarguments);
        //Adding serial number
        // console.log(original);
        return { result: original.result.results  , count: original.count };
    }
}

export default {
  data() { 
    return {
      data: new DataManager({
        url: "http://unity/odata.svc/Reports",
        adaptor: new SerialNoAdaptor(),
        crossDomain: true
      }),
      pageSettings: { pageSize: 25 },
      query: new Query().where('seller_id''equal'1),
      toolbarOptions: ['PdfExport']
    };
  },
  methods: {
      toolbarClick(args) {
        if (args.item.id === 'Grid_pdfexport') { // 'Grid_pdfexport' -> Grid component id + _ + toolbar item name
            this.$refs.grid.pdfExport();
        }
    }
  },
  provide: {
    grid: [PageSortFilterGroupToolbarPdfExport]
  }
}
script>
<style>
@import '..\..\..\..\node_modules/@syncfusion/ej2-base/styles/material.css';
@import '..\..\..\..\node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '..\..\..\..\node_modules/@syncfusion/ej2-calendars/styles/material.css';
@import '..\..\..\..\node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
@import '..\..\..\..\node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '..\..\..\..\node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import '..\..\..\..\node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '..\..\..\..\node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
@import "..\..\..\..\node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
style>




but this code has 1 problem that grouping is not working on this.
can you gave me any suggestion for that.










TS Thavasianand Sankaranarayanan Syncfusion Team December 18, 2019 11:04 AM UTC

Hi Shoaib, 

Thanks for the update. 

Based on your query, We have prepared a sample but we are unable to reproduce the issue “Grouping is not working” at our end. Please find the below sample link for more information. 


If you still had the issue,  Please share the below details that will be helpful for us to provide better solution  

  1. Please try to reproduce the issue with our above attached sample.
  2. Please share your issue scenario in video demonstration.

Regards, 
Thavasianand S. 



SH Shoaib December 23, 2019 08:20 AM UTC

now please check the code https://codesandbox.io/s/146774-dynamic-grid-modified-4h3hr i replicated my issue here, but please open that link by disabling the web security in google chrome , otherwise you will get the CORS error in your console on my provided service link.


SH Shoaib December 27, 2019 01:32 PM UTC

did you check that ?


SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team December 30, 2019 11:33 AM UTC

Hi Shoaib, 

We have checked your query and achieved your requirement by overriding process response method. We suggest you to use the below way to achieve your requirement. Please refer the below code example and sample for more information. 

  processResponse(data, ds, query, xhr, request, changes) { 
    var metaCheck = 'odata.metadata'; 
        if ((request && request.type === 'GET') && !this.rootUrl && data[metaCheck]) { 
            var dataUrls = data[metaCheck].split('/$metadata#'); 
            this.rootUrl = dataUrls[0]; 
            this.resourceTableName = dataUrls[1]; 
        } 
        var pvtData = 'pvtData'; 
        if (!isNullOrUndefined(data.d)) { 
            var dataCopy = ((query && query.isCountRequired) ? data.d.results : data.d); 
            var metaData = '__metadata'; 
            if (!isNullOrUndefined(dataCopy)) { 
                for (var i = 0; i < dataCopy.length; i++) { 
                    if (!isNullOrUndefined(dataCopy[i][metaData])) { 
                        delete dataCopy[i][metaData]; 
                    } 
                } 
            } 
        } 
        var pvt = request && request[pvtData]; 
        var emptyAndBatch = this.processBatchResponse(data, query, xhr, request, changes); 
        if (emptyAndBatch) { 
            return emptyAndBatch; 
        } 
        var versionCheck = xhr && request.getResponseHeader('DataServiceVersion'); 
        var count = null; 
        var version = (versionCheck && parseInt(versionCheck, 10)) || 2; 
        if (query && query.isCountRequired) { 
            var oDataCount = '__count'; 
            if (data[oDataCount] || data['odata.count']) { 
                count = data[oDataCount] || data['odata.count']; 
            } 
            if (data.d) { 
                data = data.d; 
            } 
            if (data[oDataCount] || data['odata.count']) { 
                count = data[oDataCount] || data['odata.count']; 
            } 
        } 
        if (version === 3 && data.value) { 
            data = data.value; 
        } 
        if (data.d) { 
            data = data.d; 
        } 
        if (version <= 3 && data.results) { 
            data = data.results; 
        } 
        var args = {}; 
        args.count = count; 
        args.result = data; 
        this.getAggregateResult(pvt, data, args, null, query); 
        return DataUtil.isNull(count) ? args.result : { result: args.result, count: args.count, aggregates: args.aggregates }; 
 } 


To avoid this above overriding process response method, you have to maintain your DataServiceVersion as “2.0”.  Please refer the below screenshot for more information. 

 

In request header, We are returning a service version as V2.0 but the response header returning a service version as V3.0. We suspect that you are try to return a service in V3 format. Because of this conflict the grouping was not working properly. Please try to return the service in V2 format. 

Regards, 
Seeni Sakthi Kumar S


SH Shoaib December 31, 2019 03:19 PM UTC

thanks , this work perfectly fine.

i want to ask another thing is that can i used this ODataAdaptor with PivotView ? 
if yes then can you provide any example for that , because in your documentation there isn't anything available for pivot view.


SN Sivamathi Natarajan Syncfusion Team January 2, 2020 11:47 AM UTC

Hi Shoaib, 
  
We have prepared a sample as per your requirement using ODataAdaptor in pivot view. 
  
  
Please let us know if any concerns. 
  
Regards, 
Sivamathi. 


Loader.
Live Chat Icon For mobile
Up arrow icon