Grid not rendering all rows

[Jon]

Hi there,

I am using axios to retrieve transactions from an api call. Here is the method:

        getAllRejects:function(){

            var that=this;

            var base_url="/ach-rejects/all";

            var promises=[];

            var data={

                date:this.my_date

            };

            this.transactions={};

            axios({

                method:'post',

                data:{

                    date:this.my_date

                },

                url:base_url

            })

            .then((response)=>{

                that.transactions=response.data;

            })

            .catch((error)=>{

                    this.$store.commit('error',error);

                }

            )

        },

The grid html is as follows:

            <ejs-grid ref='grid' id='transaction_grid' :enableVirtualization='true' :columns="gridSourceColumns" :allowGrouping='false' gridLines="Vertical" height='800' :dataSource="transactions" :allowSorting='true' :allowTextWrap='true' :textWrapSettings='wrapSettings'  :toolbar='toolbar' :allowExcelExport='true' :toolbarClick='toolbarClick'></ejs-grid>

The problem is the api call returns like 100 rows, but the grid control only ever renders the first 12. Regardless of whether 14 or 140 rows are returned. It's very puzzling.

Any ideas?  There are no errors in the javascript console and everything else looks good.

[Praveenkumar Gajendiran]

Hi Jon,

Greetings from Syncfusion support.

Based on your query we suspect that you have try to achieve custom binding in Syncfusion EJ2-Grid with Virtualization feature.

We checked the code example and found that you have used axios for binding the data.  For custom binding we suggest you to use Grid’s custom-data binding feature which handles the Grid action through ‘dataStateChange’ event.  

For this you need to return back the response object(Grid data) from the server as result(JSON data source) and count(Total data count) properties and set it to the Grid’s dataSource property. On setting the data source in this format, the ‘dataStateChange’ event will be triggered with corresponding Grid action query for every Grid action performed like Paging, Sorting and Filtering.., and the ‘dataSourceChanged’ event will be triggered when performing CRUD action in Grid.  

Using this you can send the queries in your required format to your service using ajax call and assign the returned response object (As result and count properties) to the Grid’s dataSource property.

Please refer the below code example, sample and documentation for more information. 

Code Example: 

[App.vue]

<template> 

  <div class="col-lg-12 control-section"> 

    <div> 

      <ejs-grid ref="grid" id="transaction_grid" :enableVirtualization="true" :allowGrouping="false" 

        gridLines="Vertical" :height="height" :dataSource="data" :allowSorting="true"    :allowTextWrap="true"  :allowExcelExport="true" :dataStateChange="dataStateChange" > 

        <e-columns> 

          <e-column field="OrderID" headerText="Order ID" width="130" textAlign="Right"></e-column> 

          <e-column field="CustomerID" headerText="Customer Name" width="150"></e-column> 

          <e-column field="ShipName" headerText="Ship Name" width="200"></e-column> 

          <e-column field="ShipCity" headerText="Ship City" width="150"></e-column> 

        </e-columns> 

      </ejs-grid> 

    </div> 

  </div> 

</template> 

<script> 

import Vue from "vue"; 

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

import { OrderService } from "./order-service"; 

 

Vue.use(GridPlugin); 

 

export default Vue.extend({ 

  data() { 

    return { 

      data: {}, 

      height: 800, 

      orderService: new OrderService() 

    }; 

  }, 

  mounted() { 

    // Used vue mounted hook to provide dataSource to Grid and handled the initial paging 

    let state = { skip: 0, take: 40 }; 

    this.dataStateChange(state); 

  }, 

  methods: { 

    dataStateChange: function(state) { 

      // Handled the other Grid actions like paging, sorting etc.. by using dataState change event 

      this.orderService.execute(state).then(gridData => { 

        this.data = gridData; 

      }); 

    } 

  }, 

  provide: { 

    grid: [Sort, Group, Page, VirtualScroll] 

  } 

}); 

</script> 

<style> 

@import "https://cdn.syncfusion.com/ej2/material.css"; 

</style>

---------------------------------------------------------------------------------------------------------------------------------------
[order-service.ts]

export class OrderService { 

  public ajax: Ajax = new Ajax({ 

    type: “GET”, 

    mode: true, 

    onFailure: (e: Error) => { 

      return false; 

    } 

  }); 

  private BASE_URL: string = 

    “https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Orders”; 

  public execute(state: DataStateChangeEventArgs): Promise<DataResult> { 

    return this.getData(state); 

  } 

  private getData(state: DataStateChangeEventArgs): Promise<DataResult> { 

    const pageQuery = `$skip=${state.skip}&$top=${state.take}`; // handled the page query 

    let sortQuery: string = “”; 

    if ((state.sorted || []).length) { 

      sortQuery = 

        `&$orderby=` + 

        (<any>state).sorted 

          .map((obj: Sorts) => { 

            return obj.direction === “descending” 

              ? `${obj.name} desc` 

              : obj.name; 

          }) 

          .reverse() 

          .join(“,”); 

    } 

    this.ajax.url = `${ 

      this.BASE_URL 

    }?${pageQuery}${sortQuery}&$inlinecount=allpages&$format=json`; 

    return this.ajax.send().then((response: any) => { 

      let data: any = JSON.parse(response); 

      return <DataResult>{ 

        result: data[“d”][“results”], 

        count: parseInt(data[“d”][“__count”], 10) 

      }; 

    }); 

  } 

} 

Here, We have prepared a sample for your reference, 

Sample: https://codesandbox.io/s/customdatabinding-07mp8?file=/src/order-service.ts

In the above sample we are able to reproduce your reported issue when we do not inject the “VirtualScroll” module to the Grid. Please ensure that you have injected the “VirtualScroll” module.

Refer the below document link for the Virtualization, Custom-binding and dataStateChange event of Grid,

Documentation link: https://ej2.syncfusion.com/vue/documentation/grid/virtual/#virtualization
                                     https://ej2.syncfusion.com/vue/documentation/grid/data-binding/#custom-binding
                                     https://ej2.syncfusion.com/vue/documentation/api/grid/#datastatechange 

If you still face the issue please share the below details that will be helpful for us to provide better solution. 

1)      Please share your Syncfusion package version. 

2)      If possible please replicate the problem with our above attached sample. 

3)      Share your complete Grid rendering code. 

Let us know if you have any concerns.

Regards,
Praveenkumar G