Blazor Hierarchical Grid Remote Data Operations

    By default, the IgbHierarchicalGrid uses its own logic for performing data operations.

    You can perform these tasks remotely and feed the resulting data to the IgbHierarchicalGrid by taking advantage of certain inputs and events, which are exposed by the IgbHierarchicalGrid.

    Remote Paging

    As Blazor Server is already a remote instance, unlike the demos in the other platforms we do not need to set another remote instance for the data, as the data is already remote. In order to do remote paging, we just need to set a couple of methods ins the data class

            public Task<List<NwindDataItem>> GetData(int index, int perPage)
        {
            var itemsToReturn = items.Skip(index).Take(perPage).ToList();
            return Task.FromResult(itemsToReturn);
        }

        public Task<int> GetDataLength()
        {
            return Task.FromResult(items.Count);
        }

    After declaring the service, we need to create a component, which will be responsible for the IgbHierarchicalGrid construction and data subscription.

    First we should load some data to the grid. It is best to do after the grid has been rendered to avoid any timing issues.

        protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await Paginate(0, PerPage);
            totalRecordsCount = await NwindDataService.GetDataLength();
            StateHasChanged();
        }
    }

    After that we just need to bind the paging events to our custom methods, and remote paging is set:

    <IgbPaginator @ref="pager" PageChange="OnPageChange" PerPageChange="OnPerPageChange" TotalRecords="totalRecordsCount"></IgbPaginator>

....

@code {
        private async void OnPerPageChange(IgbNumberEventArgs e)
    {
        PerPage = e.Detail;
        await Paginate(0, e.Detail);
    }

    private async void OnPageChange(IgbNumberEventArgs e)
    {
        await Paginate(e.Detail, PerPage);
    }
    ...
        private async Task Paginate(double page, double perPage)
    {
        this.page = page;
        double skip = this.page * PerPage;
        double top = PerPage;

        try
        {
            data = await NwindDataService.GetData(Convert.ToInt32(skip), Convert.ToInt32(perPage));
            isLoading = false;
            UpdateUI();
        }
        catch (Exception ex)
        {
            Console.Error.WriteLine($"Error fetching data: {ex.Message}");
        }
    }
}

    For further reference please check the full demo bellow:

    Grid Remote Paging Demo

    Known Issues and Limitations

    • When the grid has no PrimaryKey set and remote data scenarios are enabled (when paging, sorting, filtering, scrolling trigger requests to a remote server to retrieve the data to be displayed in the grid), a row will lose the following state after a data request completes:
    • Row Selection
    • Row Expand/collapse
    • Row Editing
    • Row Pinning

    API References

    Additional Resources

    Our community is active and always welcoming to new ideas.