How to tell when grid is fully loaded

[William Morgenweck]

I have a page that has a tab control.  Lets say Tab 1 and Tab 2.  Tab 1 has a datagrid that is on a separate vue page that gets it data from an api.  The data is stored in veux so if it is needed I don't have to go back to the api. When I click on Tab 2 the element in Tab 1 is unloaded.  When I click on tab 1 the page is reloaded and I would like to go back to where I was.  I can store the record index but I can't find a place to call it that works.  I have put a button for testing purposes and that works totally fine. 

    var grid = this.$refs.membersGrid.ej2Instances;
    grid.refresh();
   grid.selectRow(5,true)

I have tried putting this code into a computed and also mounted.  It gets called but the $refs says it is undefined.  If I put it into updated it gets called and reads the grid but does not select the 5th row.  Is there a way that I can call it so the $refs can read the grid and the grid shows row 5 selected?

[Joseph Christ Nithin Issack]

Hi William, 

  Greetings from Syncfusion support. 

  Based on you requirement you are having two tabs Tab1, Tab2. In Tab 1 you have a `DataGrid` when you click on the Tab2 and go back to Tab1 you refresh the grid in Tab 1 and also you want the 5^th row to be selected. 

  To achieve your requirement you can use the `selecting` Event of the Tab component and the `dataBound` event of the EJ2 grid along with a flagged variable. 

  Please refer the below code example. 

<template> 

    <div id="app"> 

        <div> 

            <ejs-tab id="element" :selecting="selecting"> 

        <e-tabitems> 

                <e-tabitem :header="header1" content="#grid1"></e-tabitem> 

            <e-tabitem :header="header2" content="#grid2"></e-tabitem> 

        </e-tabitems> 

      </ejs-tab> 

    </div > 

    <div id="grid1"> 

        <ejs-grid 

            ref="grid1" 

        :dataSource="data" 

        :editSettings="editSettings" 

        :dataBound="dataBound" 

        height="310px" 

      > 

        <e-columns> 

            <e-column 

                field="OrderID" 

                headerText="Order ID" 

                textAlign="Right" 

            :isPrimaryKey="true" 

            width="100" 

          ></e-column> 

        <e-column 

            field="CustomerID" 

            headerText="Customer ID" 

            width="120" 

        ></e-column> 

        <e-column 

            field="ShipCountry" 

            headerText="Ship Country" 

            editType="dropdownedit" 

            width="150" 

        ></e-column> 

        </e-columns> 

      </ejs - grid > 

    </div > 

    <div id="grid2" style="display: none"> 

        <ejs-grid 

            ref="grid2" 

        :dataSource="data" 

        :editSettings="editSettings" 

        height="310px" 

      > 

        <e-columns> 

            <e-column 

                field="OrderID" 

                headerText="Order ID" 

                textAlign="Right" 

            :isPrimaryKey="true" 

            width="100" 

          ></e-column> 

        <e-column 

            field="CustomerID" 

            headerText="Customer ID" 

            width="120" 

        ></e-column> 

        <e-column 

            field="ShipCountry" 

            headerText="Ship Country" 

            editType="dropdownedit" 

            width="150" 

        ></e-column> 

        </e-columns> 

      </ejs - grid > 

    </div > 

  </div > 

</template > 

<script> 

        import Vue from "vue"; 

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

import { closest } from "@syncfusion/ej2-base"; 

import { data } from "./datasource.js"; 

import { TabPlugin } from "@syncfusion/ej2-vue-navigations"; 

 

Vue.use(GridPlugin); 

Vue.use(TabPlugin); 

 

export default { 

  data() { 

    return { 

      data: data, 

      header1: { text: "Grid1" }, 

      header2: { text: "Grid2" }, 

      editSettings: { allowEditing: true, allowDeleting: true }, 

      firstRender: true, 

    }; 

  }, 

  provide: { 

    grid: [Page, Edit, Toolbar], 

  }, 

  methods: { 

    dataBound(args) { 

      if (this.firstRender) { 

        this.firstRender = false; 

        var grid = this.$refs.grid1.ej2Instances; 

        grid.selectRow(5, true); 

      } 

    }, 

    selecting(args) { 

      if (args.selectingIndex === 0) { 

        this.firstRender = true; 

        if (this.firstRender) { 

          var grid = this.$refs.grid1.ej2Instances; 

          grid.refresh(); 

        } 

      } 

    }, 

  }, 

}; 

</script> 

<style> 

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

.e-round-corner { 

  border-radius: 10px; 

} 

</style> 

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

Please refer the attached sample. If we have misunderstood your requirement please provide the following details so that we will provide proper solution ASAP. 

• Complete grid rendering code.
• Share how you have bound the grid to the Tab component.
• If possible replicate your issue in the sample attached or share a working sample.

Regards, 

Joseph I, 

[William Morgenweck]

This is awesome-- I'll play with it and keep you posted 

[Joseph Christ Nithin Issack]

  

Hi William,  

Thanks for your update. We will wait to hear from you. 

Regards, 

Joseph I