DataGrid is performing multiple requests to the service that provides the data when loading for the first time

[Valter Neves]

Hi.

I'm using your MVC .Net Core library in my website.
I've installed the SyncFusion.EJ2.AspNet.Core Nuget package and I have the following code in my cshtml page

<ejs-grid id="Grid"

              allowSelection="false"

              allowSorting="true"

              allowPaging="true"

              allowFiltering="true"

              load="load"

              height="325">

        <e-data-manager url="@Url.Action("Search", "Employee")" adaptor="UrlAdaptor"></e-data-manager>

        <e-grid-filtersettings showFilterBarStatus="true" type="CheckBox" />

        <e-grid-columns>

            <e-grid-column field="Name"

                           headerText="Name"

                           template="#employeeLinkTemplate"

                           width="420"></e-grid-column>

            <e-grid-column field="Active"

                           headerText="Active"

                           template="#statusTemplate"

                           width="125"></e-grid-column>

            </e-grid-column>

        </e-grid-columns>

    </ejs-grid>

    <script>

        function load() {

        const rowHeight = 60;

        const browserHeight = window.innerHeight;

        const gridHeight = browserHeight - 275;

        const grid = document.getElementById('Grid').ej2_instances[0];

        const pageSize = grid.pageSettings.pageSize;   //initial page size

        const pageResize = (gridHeight - (pageSize * rowHeight)) / rowHeight; //new page size is obtained here

        grid.pageSettings.pageSize = pageSize + Math.round(pageResize);

        grid.height = gridHeight;

        grid.rowHeight = rowHeight;

    }

</script>

The javascript code that I'm performing during the load action will adapt the grid and rows height to the available space in my page so it can expand itself and sets the number of results per page.
I've noticed that  my Search action called multiple times during the page load.
From what I saw in other tickets, the grid refresh is fired when we set some properties.

One of my approaches was avoiding to set the DataManager when I'm declaring the grid and set it in my javascript code, only after changing the height properties.
This way the grid would only perform requests after setting the DataManager.

Unfortunately, I couldn't found any documentation that allows me to do something like this in that script:

grid.properties.dataSource = new ej.data.DataManager(["/Produce/Search"], new ej.data.ODataV4Adaptor());

I'm not even sure if this is the best approach to reach my goal.
Can you please provide me some guidance about this subject?

Thank you.

[Ajith Govarthan]

Hi Valter, 

  

Greetings from Syncfusion. 

  

Query: I've noticed that  my Search action called multiple times during the page load. 

  

Based on the attached code Snippet we found that you have not enabled searching feature in the grid but changed the pageSize when dynamically in the load event. At initial rendering of grid when we define allowPaging as true we need to get the records from the server-side based on the pageSize. So, when we change pageSize in load event the grid will be refreshed to bind  the records based on the changed pageSize on the grid.  

  

To get required records, the grid re-fires a call back to the server to get the data. It is the default behaviour. To avoid that you can set the pageSize based on the row Height when you define the grid code itself so which will not send multiple requests to servers. 

  

Code Snippet: 

Index.cshtml 

  

@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).Columns(col => 

{ 

    col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); 

}).AllowPaging().PageSettings(page =>{page.PageSize(7)}).ActionComplete("actionComplete").DataBound("dataBind").Render() 

  

Query: I couldn't found any documentation that allows me to do something like this in that script 

  

Based on your query we have prepared sample in that we have used load event and in the load event we have assigned the datamanger to the grid datasource to render the grid with data properly. 

We have attached the sample So please refer the sample for your reference. 

  

Code Snippet:  

Index.cshtml 

  

    @Html.EJS().Grid("CommandColumn").Load("onload").Columns(col => 

{ 

  

} 

</div> 

  

<script> 

    function onload(args) { 

        var hostUrl = 'https://ej2services.syncfusion.com/production/web-services/'; 

        var data = new ej.data.DataManager({ 

            url: hostUrl + 'api/Orders', 

            adaptor: new ej.data.WebApiAdaptor(), 

            crossDomain: true 

        }); 

        var grid = document.getElementsByClassName("e-grid")[0].ej2_instances[0]; 

        grid.dataSource = data; 

    } 

  

</script> 

  

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/TimeZone-1963182887_-_meeting-659468611.zip  

  

Regards, 

Ajith G.