How do I load remote data without OData

[Peter Morris]

My app calls out to a WebApi with a request in a specific format

    public class EventSearchQuery
    {
        public string DescriptionContains { get; set; }
        public EnergyType? EnergyType { get; set; }
        public DateTime? FromUtcTime { get; set; }
        public DateTime? BeforeUtcTime { get; set; }
        public int PageNumber { get; set; }
        public int PageSize { get; set; }

    }   

The response from the server is as follows

    public class EventSearchResponse
    {
        public int TotalCount { get; set; }
        public EventSummary[] Events { get; set; } = new EventSummary[0];

        public EventSearchResponse() { }

        public EventSearchResponse(int totalCount, EventSummary[] events)
        {
            TotalCount = totalCount;
            Events = events;
        }
    }

    public class EventSummary
    {
        public int Id { get; set; }
        public DateTime UtcTime { get; set; }
        public EnergyType EnergyType { get; set; }
        public string Description { get; set; }
    }

My grid has paging + sorting + filtering enabled. When a filter is changed, sort order changed, or new page selected, I need an event to fire so I can retrieve the current page of results and display it to the user. My questions are

1. Is there some kind of EventCallback somewhere I can hook into to make the API request when the grid needs it?
2. How do I get the ordering information?
3. How do I get the values the user typed into the column filters?
4. How do I tell the grid there are 1_000_000 results even though the server only returns a single page of 10 items?

Thanks

[Madhu Sudhanan P]

Hi Peter, 

Thanks for contacting Syncfusion support. 

Query 1: Is there some kind of EventCallback somewhere I can hook into to make the API request when the grid needs it? 

 

We suggest you to use the Custom Adaptor feature of our DataManager component which is suitable to achieve your requirement. Please refer to the below documentation for more details.  

 

https://ej2.syncfusion.com/blazor/documentation/grid/custom-binding/#data-binding 

The custom adaptor can be provided to the grid`s data manager either as class instance or Blazor component. We suggest you to use custom adaptor as individual component since it supports dependency injection and other benefits. Please refer to the below documentation. 

https://ej2.syncfusion.com/blazor/documentation/grid/custom-binding/#custom-adaptor-as-component 

Here the ReadAsync method of CustomAdaptor will be invoked every time when grid needs data. And the ReadAsync method will be passed with DataManagerRequest class instance which will hold the information about data needed (similar to the mentioned EventSearchQuery in your case), you can get the requested details for the paging, sorting, filtering actions from this DataManagerRequest class.  

 

The DataManagerRequest.Skip and DataManagerRequest.Take will hold the current range of data needed by Grid component. 

 

DataManagerRequest class reference: https://helpstaging.syncfusion.com/cr/blazor 

 

Query 2: How do I get the ordering information? 

 

The DataManagerRequest.Sorted property will hold the current sorted columns information. 

 

Query 3: How do I get the values the user typed into the column filters? 

 

The DataManagerRequest.Where property will hold the current filtered columns information. 

 

Query 4 : How do I tell the grid there are 1_000_000 results even though the server only returns a single page of 10 items? 

 

When Grid requires total records count from the data source then the DataManagerRequest.RequiresCount property will be set as true. If the RequiresCount is true then return data from the ReadAsync method should be object with properties Result to hold the current view data and Count to hold the total records count.  

 

The code example that shows the usage of RequiresCount is as follows. 

 

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

{ 

    ..... 

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

} 

 

 

You could also refer to our online demo which shows the usage of custom binding feature in grid including handling CRUD operations. 

 

https://blazor.syncfusion.com/demos/Grid/CustomBinding?theme=bootstrap4 

Please get back to us if you need further assistance. 

Regards, 

Madhu Sudhanan P