Cannot change items per page or do search in Blazor DataGrid

[Brian Collings]

I am new to both Blazor and Syncfusion and have a few problems that are probably simple to solve but I do not have enough experience yet..

I have data in an SQL Server database and am using Entity Framework to access the data. The following is the code for my page

@page "/"

<h2>Inventory Items</h2>

@using InventoryWave.Server.Models

@using Syncfusion.Blazor

@using Syncfusion.Blazor.Grids

@using Syncfusion.Blazor.Data

@using Syncfusion.Blazor.Buttons

<SfGrid @ref="DefaultGrid" TValue="InventoryItem" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel", "Search" })" AllowPaging="true" AllowResizing="true" AllowExcelExport="true" AllowPdfExport="true">

    <GridEvents TValue="InventoryItem" OnActionFailure="@ActionFailure"></GridEvents>

    <SfDataManager Url="/api/InventoryItems" Adaptor="Adaptors.WebApiAdaptor"></SfDataManager>

    <GridPageSettings PageCount="5" PageSizes="true"></GridPageSettings>

    <GridSearchSettings IgnoreCase="true"></GridSearchSettings>

    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true"></GridEditSettings>

    <GridColumns>

        <GridColumn Field="@nameof(InventoryItem.Id)" IsPrimaryKey="true" Visible="false"></GridColumn>

        <GridColumn Field="@nameof(InventoryItem.Barcode)" Width="50"></GridColumn>

        <GridColumn Field="@nameof(InventoryItem.Description)" Width="110"></GridColumn>

        <GridColumn Field="@nameof(InventoryItem.ProductTypeId)" HeaderText="Type" Width="50"></GridColumn>

        <GridColumn Field="@nameof(InventoryItem.UnitOfMeasureId)" HeaderText="UOM" Width="40"></GridColumn>

        <GridColumn Field="@nameof(InventoryItem.Amount)" Width="60" Format="N2" TextAlign="TextAlign.Right"></GridColumn>

        <GridColumn Field="@nameof(InventoryItem.UnitPrice)" HeaderText="Price" Width="60" Format="N2" TextAlign="TextAlign.Right"></GridColumn>

        <GridColumn Field="@nameof(InventoryItem.ReorderLevel)" HeaderText="Level" Width="60" Format="N2" TextAlign="TextAlign.Right"></GridColumn>

        <GridColumn Field="@nameof(InventoryItem.ReorderQuantity)" HeaderText="Qty" Width="60" Format="N2" TextAlign="TextAlign.Right"></GridColumn>

    </GridColumns>

</SfGrid>

<SfButton OnClick="ExcelExport" Content="Excel Export"></SfButton>

<SfButton OnClick="PdfExport" Content="PDF Export"></SfButton>

<span class="error">@ErrorDetails</span>

@code{

    private SfGrid<InventoryItem> DefaultGrid;

    public string ErrorDetails = "";

    public async Task ExcelExport()

    {

        ExcelExportProperties excelExport = new ExcelExportProperties();

        excelExport.ExportType = ExportType.AllPages;

        await this.DefaultGrid.ExcelExport(excelExport);

    }

    public async Task PdfExport()

    {

        PdfExportProperties pdfExport = new PdfExportProperties();

        pdfExport.ExportType = ExportType.AllPages;

        await this.DefaultGrid.PdfExport(pdfExport);

    }

    public void ActionFailure(FailureEventArgs e)

    {

        this.ErrorDetails = e.Error.Message;

    }

}

When I try to change the number of items per page or do a search it is not working. I've been through the Syncfusion documentation and cannot figure out what I'm doing wrong.

Can you help please?

[Renjith Singh Rajendran]

Hi Brian,  

Greetings from Syncfusion support. 

 

When using the WebAPI services, you need to handle these data operation actions(search/filter/sort/paging actions) at controller based on the querystring you get using the “Request.Query” from the request in Get method.  

So we suggest you to ensure to handle the searching/paging actions at server side, based on the “Request.Query” you get from the request when binding WebApi services.  

 

        [HttpGet] 

        public object Get() 

        { 

            ... 

            var queryString = Request.Query;                  //Based on this request query, handle the search/page action. 

            string page = queryString["$inlineCount"];   //get the paging query here      

            string filter = queryString["$filter"];   //get the search query here      

            ... 

       } 

 

 

Please get back to us if you have further queries.  

 

Regards, 

Renjith R