Prevent auto load data, load it manually

[SZL]

Hello,

I have this DataGrid:

<ejs-grid id="GridOverview" allowFiltering="false" allowPaging="false" query="new ej.data.Query().addParams('ParamInt1', getIdParam())"
        rowDataBound="rowDataBound"
        actionFailure="onActionFailure">
    <e-grid-editSettings allowAdding="false" allowDeleting="false" allowEditing="true" mode="Normal"></e-grid-editSettings>
    <e-data-manager url="/api/Grid/UrlDataSource" updateUrl="/api/Grid/UpdateContent" adaptor="UrlAdaptor" ></e-data-manager>
    <e-grid-columns>
        <e-grid-column field="@nameof(Content.Id)" isPrimaryKey="true" headerText="Content" isPrimaryKey="true" textAlign="Right" width="100"></e-grid-column>
        <e-grid-column field="@nameof(Content.ContentName)" headerText="Content" isPrimaryKey="true" textAlign="Right" width="100"></e-grid-column>
        <e-grid-column field="@nameof(Content.Quantity)" editType="numericedit" validationRules="@(new { required= true })" format="" headerText="Quantity" width="150"></e-grid-column>
        <e-grid-column field="@nameof(Content.HasProblem)" headerText="Has Problem" width="150" visible="false"></e-grid-column>
        <e-grid-column field="@nameof(Content.Problem)" headerText="Problem" width="150" visible="false"></e-grid-column>
    </e-grid-columns>
</ejs-grid>

I would like prevent auto load of datasource when page loading.
I have button and I would like to load the data when I click on this button.

I try set offline mode to true, but it is not good because it will not refresh when I click on button.

 $('#refreshButton').click(function() {

     var grid = document.getElementById("GridOverview").ej2_instances[0];

     grid.refresh(); // Refresh the grid

 });

How can I do this? Thank you!

Additional info: the grid.refresh() also not updates the query parameter.

Basically I would like show grid data based on some  javascript parameters in View with ajax. This query parameter can be change in view and in this case I need reload the grid without reload the page.

[Dineshnarasimman Muthu]

Hi,

Greetings from Syncfusion Support.

We have reviewed your query about dynamically loading data into the grid when a button is clicked and adding a query parameter to this process. Below is an example code snippet to demonstrate on achieving this requirement.

In this example, when the button is clicked, a new DataManager is created with the UrlAdaptor. Additionally, a Query object is used to add a parameter dynamically to the request. Then the grid instance is accessed, and the grid's query and dataSource properties are updated with the new Query and DataManager. This refreshes the grid’s data with the updated information.

<script>

document.getElementById('refreshButton').addEventListener('click', function() {

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

    var dataManager = new ej.data.DataManager({

        url: '/Home/UrlDataSource',

        adaptor: new ej.data.UrlAdaptor(),

       

    });

    var newQuery=new ej.data.Query().addParams('ParamInt1', true)

    grid.query=newQuery;

    grid.dataSource = dataManager;

});

</script>

 

Please get back to us for further assistance.

Regards,

Dineshnarasimman M

Attachment: GridSample_62904576.zip

[SZL]

Thank you, so if I good understand I need remove the datamanager from taghelper, and add it manually with js later.

A bit it is a weird solution (mix taghelper and js), but it works.

(I need extend the js part with updateUrl too)

If I can suggest a feature request: a "refreshData(param)" method should be perfect in the future. :) 

Thank you very much, have a nice day!

Additional info: finally I created a method for refresh data and not need remove the data manager from taghelper (and re-define it with javascript):

<script>
    $(document).ready(function() {
        $('#refreshButton').click(function() {
           refreshGridData("GridOverview", "ParamInt1", getIdParam2());
        });
    });

    function refreshGridData(id, paramName, paramValue){
        var grid = document.getElementById(id).ej2_instances[0];


        var dataManager = grid.dataSource;
        var newQuery = new ej.data.Query().addParams(paramName, paramValue);


        grid.query = newQuery;
        grid.dataSource = dataManager;
    }
</script>

For prevent initial load, I will set an ID that not exists in database.

Do you see any possible problem with this solution?

Thank you!

[Dineshnarasimman Muthu]

Hi,

Based on your query, it seems that during the initial rendering of the grid, you do not want to load any data. Instead, the data should only be fetched when a button is clicked. In this case, you should send a query to the server and bind the data to the grid after receiving the response.

When using the UrlAdaptor in the grid, the response from the server must be in the format of result and count. Please refer to the attached example payload and response from the Network Tab for clarification.

Payload which gets first 12 records:

Response in result and count format:

If your requirement is to prevent data from loading during the initial rendering of the grid, here are two approaches you can consider:

1. Return an Empty Array with Count as 0 Initially:
   On the first request, return an empty array with a count of 0. Then, when the button is clicked, send a custom query to the server and bind the data accordingly.
2. Set a Dummy URL in the Initial State:
   You can set a dummy URL in the initial grid configuration, which will return an empty datasource. Then, upon the button click, change the URL to the correct one, ensuring that the grid binds data only after the button click event triggers.

<ejs-grid id="Grid" allowPaging='true' allowFiltering='true' >

 <e-data-manager url="/Home/" adaptor="UrlAdaptor" />

 

 

document.getElementById('refreshButton').addEventListener('click', function() {

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

    grid.dataSource.dataSource.url='Home/UrlDataSource'

    var newQuery=new ej.data.Query().addParams('ParamInt1', true)

    grid.query=newQuery;

 

Both approaches will ensure that the data is bound only after the button click and not during the initial load. If we have misunderstood your requirement, please provide additional details and we will be happy to assist further.

Regards,

Dineshnarasimman M

[SZL]

Hello,

Thank you for detailed answer. You understand very well my task.

Problem with the method 2: e-data-manager in my case defined with lot of properties in taghelper. So re-define it with js is not a good solution I think. It produces redundant code. (another reason: I don't like JS, I only use it when there is nothing else :-) ).

 

I think the best solution will be: define datamanager in taghelper and pass 0 as ID on initial load, it will return and empty collection. In js I can copy the existing datasource and I can set the new query parameter similar as in my previous comment.

In the future it would be great to have the following two features:

- autoLoad: false/true

- refreshData(query) method

Thank you very much all of your help!

[Dineshnarasimman Muthu]

Hi,

We sincerely apologize for any inconvenience caused and thank you for your patience.

We would like to clarify how the grid behaves when a custom query is added using the addParams method. This method allows the grid to send specific parameters to the server and receive updated data in response.

When the server processes the query and sends a response, the grid automatically refreshes its data source to reflect the updated information. This built-in functionality eliminates the need for any manual refresh mechanisms or additional logic to update the grid’s data.

 

[HomeController.cs]

 

public IActionResult UrlDatasource([FromBody] ExtendedDataManagerRequest dm)

{

if(dm.ParamInt1=="true")

{

  return dm.RequiresCounts ? Json(new { result = DataSource, count = count }) : Json(DataSource);

}

else

{

    var emptyList = new List<object>();

    return dm.RequiresCounts ? Json(new { result = emptyList, count = emptyList.Count() }) : Json(emptyList);

}

 

 

[Index.cshtml]

 

<script>

document.getElementById('refreshButton').addEventListener('click', function() {

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

 

    var newQuery=new ej.data.Query().addParams('ParamInt1', "true")

    grid.query=newQuery;

 

});

</script>

 

We have implemented this logic in the sample application provided as an attachment for your reference.

Video:

Regards,

Dineshnarasimman M

Attachment: GridQuery_e76b4b24.zip