Bind Grid to WebAPI Not Working

[Marc]

Hi. 

I am trying to bind the grid to the results of a webAPI call.  This is a blazor app.

Grid definition looks like this.

<SfGrid TValue="Organization" class="mr-2"
        AllowPaging="true"        AllowFiltering="false"        AllowSorting="true"        AllowTextWrap="true"        AllowResizing="true"
        AllowGrouping="false"        RowHeight="30"
        Toolbar="@(new List<string>() {"Add", "Edit", "Delete", "Update", "Cancel" })">

    <SfDataManager Url="api/organization" Adaptor="Syncfusion.Blazor.Adaptors.WebApiAdaptor" />

    <GridEditSettings AllowAdding="true"                      AllowDeleting="true"                      AllowEditing="true"
                      AllowEditOnDblClick="false"                      Mode="EditMode.Normal"                      AllowNextRowEdit="false"
                      ShowConfirmDialog="true"                      ShowDeleteConfirmDialog="true" />

    <GridPageSettings PageSize="40"></GridPageSettings>

    <GridColumns>
        <GridColumn Field=@nameof(Organization.Orgsan) HeaderText="ID" IsPrimaryKey="true" IsIdentity="true" LockColumn="true" AllowAdding="false" TextAlign="TextAlign.Left" MinWidth="10" Width="10" />
        <GridColumn Field=@nameof(Organization.OrgName) HeaderText="Name" IsPrimaryKey="false" LockColumn="false" AllowAdding="true" TextAlign="TextAlign.Left" MinWidth="10" Width="35" />

        @*<GridColumn Width="10">
            <Template>
                @{
                    var frmfth = (context as Organization);
                    <SfButton CssClass="e-info e-small" @onclick="@((args) => onToggleClick_Resolved(args,frmfth))" IsToggle="true" IsPrimary="true">Detail</SfButton>
                }
            </Template>
        </GridColumn>*@
    </GridColumns>

</SfGrid>

The grid is using sfdata manager. 

The HTTP controller looks like this.

 // GET: api/<ValuesController>
        [HttpGet]
        public object GetAll()
        {
            IQueryable<Organization> data = _orgRepo.GetAll().AsQueryable();
            var count = data.Count();
            var queryString = Request.Query;
            if (queryString.Keys.Contains("$inlinecount"))
            {
                StringValues Skip;
                StringValues Take;
                int skip = (queryString.TryGetValue("$skip", out Skip)) ? Convert.ToInt32(Skip[0]) : 0;
                int top = (queryString.TryGetValue("$top", out Take)) ? Convert.ToInt32(Take[0]) : data.Count();
                return new { Items = data.Skip(skip).Take(top), Count = count };
            }
            else
            {
                return data;
            }
        }

Where I think the problem lies is in this line of code.  I do not think the URL is being called correctly.   How does it now to add this https://localhost:44318/ to the URL.  I am wondering if the issue is that the API is not being call at the correct port?

    <SfDataManager Url="api/organization" Adaptor="Syncfusion.Blazor.Adaptors.WebApiAdaptor" />

It seems that the grid control and API reference are not communicating. 

When I test the API independently through a CURL call, it is returning a result set.

As always, your help is greatly appreciated.

Marc.

[Rahul Narayanasamy]

Hi Marc, 

Greetings from Syncfusion. 

Query: Bind Grid to WebAPI Not Working 

We have validated your query and we suspect that you are facing problem while binding data from WebApiAdaptor. We have checked your case from our end and we could not able to reproduce the problem. The data is properly get from the controller and bound to the Grid. Find the below sample for your reference. 

Reference: https://blazor.syncfusion.com/documentation/common/data-binding/webapi-service-binding 

Sample: https://www.syncfusion.com/downloads/support/forum/170770/ze/WebAPISample1828756506  

If you are still facing the problem, then could you please share the below details. It will be helpful to validate and provide a better solution. 

• Bind OnActionFailure event to Grid and share the exception details if you have received any errors.

https://blazor.syncfusion.com/documentation/datagrid/events#onactionfailure 

• Reproduce the problem in the provided sample and revert back to us.
• Share the details about the request details.
• Share a simple reproduceable sample if possible.

Regards, 

Rahul 

 

[Marc]

Your example works great.  Couple of follow up questions.

#1 - You define the grid as follows:

<SfGrid @ref="Grid" TValue="Organization" AllowFiltering="true" AllowSorting="true" AllowPaging="true"
        Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })">
.....

@code{
    SfGrid<Organization> Grid { get; set; }
}

What is the purpose of the @ref?  Organizations is already covered in the TValue so is this really required? 

#2 -  WebAPI in Separate Project

The sample project was very helpful.  However, it had the web page and API in the same project.  I have a solution that has the blazor server app and webapi in different projects.  

In the below code example, I need to specify the full path of the API project with port number.  Just referencing the API does not work.   Is it possible to get this URL property from a variable or set it in code?

  @*<SfDataManager Url="https://localhost:44318/api/Organization" Adaptor="Adaptors.WebApiAdaptor"></SfDataManager>*@
    <SfDataManager Url="api/Organization" Adaptor="Adaptors.WebApiAdaptor"></SfDataManager>

[Rahul Narayanasamy]

Hi Marc, 

Thanks for the update. 

Query: What is the purpose of the @ref?  Organizations is already covered in the TValue so is this really required? 

We have validated your query and we would like to inform you that the @ref is used to reference the particular element. This component references are used to invoke methods from underlying components. Using this reference, you can invoke public methods of the Grid.  

Reference: 

https://www.syncfusion.com/faq/blazor/components/how-do-i-get-the-reference-or-instance-of-a-component 

https://blazor.syncfusion.com/documentation/datagrid/how-to/access-public-methods 

Query: WebAPI in Separate Project - I have a solution that has the blazor server app and webapi in different projects. . . . I need to specify the full path of the API project with port number.  Just referencing the API does not work.   Is it possible to get this URL property from a variable or set it in code? 

We have validated your query and you can provide whole url(https://localhost:44318/api/Organization) in Url property of the SfDataManager. Here, we have prepared a sample based on your case(WebApi in different project). Find the below code snippets and sample for your reference. 

<SfGrid ID="Grid" TValue="Orders" @ref="Grid" AllowExcelExport="true" 

            Toolbar="@(new List<string>() { "ExcelExport"})" Height="315" Width="900"> 

        <GridEvents OnToolbarClick="ToolbarClick" TValue="Orders"></GridEvents> 

        <SfDataManager Url=https://localhost:44395/api/Default Adaptor="Adaptors.WebApiAdaptor"></SfDataManager> 

        <GridColumns> 

            <GridColumn Field=@nameof(Orders.OrderID) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="TextAlign.Right" Width="120"></GridColumn> 

            <GridColumn Field=@nameof(Orders.CustomerID) HeaderText="Customer Name" Width="120"></GridColumn> 

            <GridColumn Field=@nameof(Orders.OrderDate) HeaderText=" Order Date" Format="d" TextAlign="TextAlign.Right" Width="130" Type="ColumnType.Date"></GridColumn> 

            <GridColumn Field=@nameof(Orders.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn> 

        </GridColumns> 

    </SfGrid> 

Sample: https://www.syncfusion.com/downloads/support/forum/170770/ze/Sample450005854  

Please let us know if you have any concerns. 

Regards, 

Rahul