How to properly use paging and load on demand data

[Martin Sato]

Hi,

   After browsing to your samples and documentation, I cannot seem to get what my requirement which is as follows:

   Page Size: 5

   Total Rows in DB: 7

 On Load, I want to retrieve data rows 1-5, and after the user click [next] button or page 2, I want to retrieve data rows 6-7 will be loaded and assigned to datagrid.

  I cannot find a better example show this, I saw that all the rows are loaded once, then assigned to datagrid, then datagrid updates its page control showing the # of pages, etc. 

  What I want is load only the rows within the current page skipping other rows just to make it clear 

  [view 1]

  row 1

  row 2

  row 3

  row 4

  row 5

  [<< < 1, 2 > >> ] ====> if user clicks #2 or next page, please refer to view #2

 [View 2]  

 row 6

 row 7

I am using Blazor Server.

Thank you.

  

[Vignesh Natarajan]

Hi Martin,  

 

Thanks for contacting Syncfusion support.  

 

Query: “ I want to retrieve data rows 1-5, and after the user click [next] button or page 2, I want to retrieve data rows 6-7 will be loaded and assigned to datagrid.” 

 

We have analyzed your query and we understand that you want to bind data to Grid with on demand loading concept and server side paging. This can be achieved using AllowPaging property and SfDataManager with Adaptor. We have provided support for different Adaptors namely (WebAPI, OData, ODataV4, Url etc.) to load data from different service to grid with on demand loading concept / server side paging. These adaptors uses on demand loading concept to fetch data from server when Paging is enabled.  

 

Refer our UG documentation for your reference 

 

https://blazor.syncfusion.com/documentation/data/adaptors/  

https://blazor.syncfusion.com/documentation/datagrid/data-binding/#remote-data  

https://blazor.syncfusion.com/documentation/datagrid/custom-binding/ - CustomAdaptor 

 

Please get back to us if you have further queries.    

 

Regards, 

Vignesh Natarajan 

[Martin Sato]

Thanks, I will give it a try.

[Vignesh Natarajan]

Hi Martin,  

Thanks for the update.  

We will wait to hear from you. Please get back to us if you have further queries.  

Regards, 

Vignesh Natarajan 

 

[Robert Kazimirski]

Hi  Vignesh 

I know DataGrid.DataSource supports IQueryable but it caches data locally in DataGrid.

I am using Blazor Server. 

You said " We have provided support for different Adaptors namely (WebAPI, OData, ODataV4, Url etc.)".

Do you support Adaptor for simple  IQueryable so user can fetch page data from database on demand?

regards

Robert

[Monisha Saravanan]

Hi Robert,

Greetings from Syncfusion.

Yes we can use IQueryable data with adaptors. In the below documentation we have used IQueryable data. Kindly check the below documentation for your reference.

Reference: https://blazor.syncfusion.com/documentation/datagrid/entity-frame-work

Sample: https://github.com/ej2gridsamples/Blazor/blob/master/EntityFramework.zip

Please let us know if you have any concerns or if you face any difficulties.

Regards,

Monisha

[Robert Kazimirski]

Hi Monisha,

Greetings from Poland.

Thanks for your answer. The links you have sent are based on Blazor WASM which rely on Controllers and QueryString.

As I said I use Blazor Server which directly depends on DataGrid Control.

Regards,

Robert

[Monisha Saravanan]

Hi Robert,

For server related databinding kindly refer the below documentation. In the below documentation we have used custom adaptor and the data is fetched directly from the database. Based on the return value from the custom adaptor the data will be binded to DataGrid.  If we misunderstood your query kindly share us the exact requirement from your end.

    // Performs data Read operation

    public override object Read(DataManagerRequest dm, string key = null)

    {

        string appdata = _env.ContentRootPath;

        string path = Path.Combine(appdata, "App_Data\\NORTHWND.MDF");

        string str = $"Data Source=(LocalDB)\\MSSQLLocalDB;AttachDbFilename='{path}';Integrated Security=True;Connect Timeout=30";

        // based on the skip and take count from DataManagerRequest here we formed SQL query string

        string qs = "SELECT OrderID, CustomerID FROM dbo.Orders ORDER BY OrderID OFFSET " + dm.Skip + " ROWS FETCH NEXT " + dm.Take + " ROWS ONLY;";

        DataSet data = CreateCommand(qs, str);

        Orders = data.Tables[0].AsEnumerable().Select(r => new Order

        {

            OrderID = r.Field<int>("OrderID"),

            CustomerID = r.Field<string>("CustomerID")

        }).ToList();  // here we convert dataset into list

        IEnumerable<Order> DataSource = Orders;

        SqlConnection conn = new SqlConnection(str);

        conn.Open();

        SqlCommand comm = new SqlCommand("SELECT COUNT(*) FROM dbo.Orders", conn);

        Int32 count = (Int32)comm.ExecuteScalar();

        return dm.RequiresCounts ? new DataResult() { Result = DataSource, Count = count } : (object)DataSource;

    }

}

Reference: Data Binding in Blazor DataGrid Component | Syncfusion

Please let us know if you have any concerns.

Regards,

Monisha

[Robert Kazimirski]

Hi  Monisha,

Thanks for your answer.

I thought that you have something out-of-the-box like these ones below (which are more difficult to write):

" We have provided support for different Adaptors namely (WebAPI, OData, ODataV4, Url etc.)".

However I take a look at  CustomAdaptor.

By the way, take a look at the documentation: AdaptorInstance. It is written: " Injecting services into custom adaptor class, is not supported"  for class that inherites from DataAdaptor and used as  AdaptorInstance="@typeof(CustomAdaptor)"

In another documentation Inject service into Custom Adaptor it is showed that you can inject services into custom adaptor without using   custom adaptor as a Blazor component .

regards

Robert

[Monisha Saravanan]

Hi Robert,

Sorry for the confusion.

We would like to inform that it is not possible to call services from razor page and in this documentation the codes used inside the razor part to inject services should be in separate class file. Here we have showed inside the same page for an example. Also we have logged the documentation task to change the UG and it will be reflected in any of our upcoming release.

Please let us know if you have any concerns.

Regards,

Monisha