grid to display spinner on startup

[Leigh Anderson]

Hi

I have a view where I want to display the page with an empty grid that shows the spinner, then load the data for the grid

This is the outline of what I'm trying:

<script>

function loadData() {

document.getElementById('testGrid').ej2_instances[0].showSpinner();

// then load data and update the grid

}

</script>

<div id="testGridholder">

<ejs-grid id="testGrid" created="loadData"></ejs-grid>

<input type="button" onclick="loadData()" value="reload" />

</div>

Problem is, when the page first displays, the spinner isn't displayed.

If I click 'reload', the spinner is displayed as expected.

What do I need to change to get the spinner to display at the start?

Thanks

[Rajapandiyan Settu]

Hi Leigh, 

Thanks for contacting Syncfusion support. 

Query: I have a view where I want to display the page with an empty grid that shows the spinner, then load the data for the grid 

You can achieve your requirement by executing the showSpinner method after some time interval. 

[index.cshtml] 

    function created(args) { 

        setTimeout(()=>{ 

            // show the spinner after some time interval 

            document.getElementById('testGrid').ej2_instances[0].showSpinner(); 

        },200) 

        getData(args); // get the data for Grid 

    } 

Note: 

In EJ2 Grid, we are not supposed to render a Grid with both dataSource and columns as empty. We must define at least anyone of these property to render a Grid. This is the default behavior of EJ2 Grid. 

So, we suggest you to bind the columns during the Grid initialization. 

[index.cshtml] 

<ejs-grid id="testGrid" created="created" allowPaging="true" height="190"> 

    // define the Grid columns 

    <e-grid-columns> 

       <e-grid-column field="OrderID" headerText="Order ID" width="125"></e-grid-column> 

       <e-grid-column field="CustomerID" headerText="Customer ID"  width="120"></e-grid-column> 

       <e-grid-column field="ShipCountry" headerText="Ship Country"  width="165"></e-grid-column> 

       <e-grid-column field="Freight" headerText="Freight" width="150"></e-grid-column> 

    </e-grid-columns> 

</ejs-grid> 

Find the below sample for your reference. 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/core_3_0_grid_loaddata-186863356.zip 

Please let us know if you have any concerns. 

Regards, 

Rajapandiyan S 

[Leigh Anderson]

Thanks - that works for me.

(I do have the column bindings in my actual code - just removed it to make the example simpler)

One other quick question:

With the DatePicker - how do I centre the text on the date in the control with CSS?

I tried using .e-input-group.e-control-wrapper with text-align: center; but it doesn't work.

Thanks

[Rajapandiyan Settu]

Hi Leigh, 

We happy to hear that our previous update resolved problem at your end. 

Query: how do I centre the text on the date in the control with CSS? 

You can achieve this by using following CSS styles. 

    <style> 

      .e-datetimepicker.e-input { 

        text-align: center; 

      } 

    </style> 

 

Please get back to us if you need further assistance. 

Regards, 

Rajapandiyan S