How to create Query for getting expand OData v4 info in Grid

[Erick]

Hello,

I have the following razor page:

@page "/customer"

@inject IConfiguration Configuration

@inject IXARetailAPIService XARetailAPIService

@{

var Tool = (new List<string>() {"Add", "Edit", "Delete", "Search", "ColumnChooser"});

var apiURL = Configuration.GetValue<String>("APIURL_OData");

}

<h1>Clientes</h1>

<SfGrid ID="Grid" TValue="People" AllowPaging="true" AllowSorting="true" AllowReordering="true"

AllowResizing="true" AllowFiltering="false" AllowGrouping="false" ShowColumnChooser="true" Toolbar="@Tool">

<GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" ShowDeleteConfirmDialog="true" Mode="EditMode.Dialog"></GridEditSettings>

<SfDataManager Url=@($"{apiURL}/people") Adaptor="Adaptors.ODataV4Adaptor" CrossDomain="true"></SfDataManager>

<GridColumns>

<GridColumn Field=@nameof(People.Id) HeaderText="Id" IsPrimaryKey="true" IsIdentity="true" AllowEditing="false" Visible="false" ShowInColumnChooser="false"></GridColumn>

<GridColumn Field=@nameof(People.PersonSalutation) HeaderText="Saludo" AutoFit="true"></GridColumn>

<GridColumn Field=@nameof(People.FirstName) HeaderText="Nombres" AutoFit="true"></GridColumn>

<GridColumn Field=@nameof(People.LastName) HeaderText="Apellidos" AutoFit="true"></GridColumn>

<GridColumn Field=@nameof(People.ShortName) HeaderText="Nombre Corto" AutoFit="true"></GridColumn>

<GridColumn Field=@nameof(People.PersonIdType) HeaderText="Tipo de Id" AutoFit="true"></GridColumn>

<GridColumn Field=@nameof(People.IdNumber) HeaderText="Identificación" AutoFit="true"></GridColumn>

<GridColumn Field=@nameof(People.EmailAddress) HeaderText="Email" AutoFit="true"></GridColumn>

<GridColumn Field=@nameof(People.IsCustomerActive) HeaderText="Activo" DisplayAsCheckBox="true" AutoFit="true"></GridColumn>

</GridColumns>

</SfGrid>

I need to get expanded OData info for PersonSalutation and PersonIdType number-to-description mapping (in my database model these are represented as PersonSalutationNavigation and PersonIdTypeNavigation). A Get with Expand parameter would get something like the following JSON:

GET http://localhost:60000/api/odata/people(3)?$expand=PersonIdtypeNavigation,PersonSalutationNavigation

{

"@odata.context": "http://localhost:60000/api/odata/$metadata#People(PersonIdTypeNavigation(),PersonSalutationNavigation())/$entity",

"Id": 3,

"FirstName": "Steve",

"LastName": "Stevenson",

"ShortName": "Steve",

"IdNumber": "1234",

"Gender": 0,

"Birthday": null,

"MaritalStatus": null,

"EmailAddress": "[email protected]",

"MainPhoneNumber": null,

"MainAddress": "",

"LastActivityDate": "2020-06-20T14:25:26-06:00",

"IsCustomerActive": false,

"LoyaltyDiscount": null,

"PersonIdType": 4,

"PersonNationality": null,

"PersonSalutation": 10,

"PersonSector": null,

"PersonIdTypeNavigation": {

"Id": 4,

"IdDescription": "Pasaporte"

},

"PersonSalutationNavigation": {

"Id": 10,

"SalutationShort": "Dr.",

"SalutationDescription": "Doctor"

}

}

How can I modify my Grid Query to get this expanded info? In an additional scenario, how would it be if I have nested information?

Thanks in advance,

Erick

[Rahul Narayanasamy]

Hi Erick,  

Greetings from Syncfusion. 

Query: “How to create Query for getting expand OData v4 info in Grid” 

We have validated your query and you want to bind complex data to Grid. We suggest you to achieve your requirement using Query property of Grid and define the complex property with dot operator. Refer the below code example 

@using Syncfusion.Blazor.Grids 

@using Syncfusion.Blazor.Data 

 

<SfGrid @ref="Grid" TValue="Order" Width="400" Query="Qry" AllowPaging="true">    <SfDataManager Url="{your Url}” Adaptor="Adaptors.ODataV4Adaptor"></SfDataManager> 

    <GridPageSettings PageSize="5"></GridPageSettings> 

    <GridColumns> 

        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" Width="120"></GridColumn> 

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

        <GridColumn Field=”Manager.EmployeeId” HeaderText="Manager Id" Width="150"></GridColumn> 

        <GridColumn Field=”Supervisor.EmployeeId” HeaderText="Supervisor Id" Width="150"></GridColumn> 

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

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

    </GridColumns> 

</SfGrid> 

 

@code{ 

    public Query Qry = new Query().Expand(new List<string> { "Manager","Supervisor" }); 

} 

Refer our UG documentation on complex binding for your reference 

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

Kindly get back to us if you have any other concerns.  

Regards, 

Rahul 

[Erick]

Thank you very much. I have followed an slightly different approach by adding this Query:

protected override void OnInitialized()

{

GridQuery = new Query().AddParams("$expand", "PersonSalutationNavigation,PersonIdTypeNavigation");

}

Now I have another related issue. When I edit the grid, I get the Id from the fields to update, instead of the possible values in the expanded table. So I used an EditTemplate to make a DropDownList for the possible values (shows the Salutation text instead of the Salutation Id number) For example:

<GridColumn Field=@nameof(People.Id) HeaderText="Id" IsPrimaryKey="true" IsIdentity="true" AllowEditing="false" Visible="false" ShowInColumnChooser="false"></GridColumn>

<GridColumn Field=@nameof(People.PersonSalutation) HeaderText="Saludo" AutoFit="true">

<Template>

@{

var peopleContext = context as People;

if (@peopleContext.PersonSalutationNavigation != null) {

<span>@peopleContext.PersonSalutationNavigation.SalutationShort</span>

}

}

</Template>

<EditTemplate>

Saludo

<SfDropDownList ID="PersonSalutation" TItem="Salutations" TValue="string" Placeholder="Saludo">

<SfDataManager Url=@($"{apiURL}/salutations") Adaptor="Adaptors.ODataV4Adaptor" CrossDomain="true" Offline="true"></SfDataManager>

<DropDownListFieldSettings Value="Id" Text="SalutationShort"></DropDownListFieldSettings>

</SfDropDownList>

</EditTemplate>

</GridColumn>

My question is, How do I get the current value in the DrowDownList? I know I have to use the Index param, but How the reference to current value is made?

Regards,

erick

[Rahul Narayanasamy]

Hi Erick, 

Thanks for the update. 

We have validated your query and we suspect that you want to show the current edited dropdown column value in Dropdown list column. You can achieve your requirement by using Value property of DropDownList. Find the below code snippets for your reference. 

[code snippets] 

<SfGrid @ref="Grid" DataSource="@orderDetails" AllowPaging="true" Toolbar="@(new string[] {"Add", "Edit" ,"Delete","Update","Cancel" })"> 

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

    <GridColumns> 

       <GridColumn Field=@nameof(OrderDetails.EmployeeID) ForeignKeyField="@nameof(EmployeeDetails.EmployeeID)" ForeignKeyValue="@nameof(EmployeeDetails.FirstName)" DataSource="@employeeDetails" HeaderText="Name" Width="120"> 

            <EditTemplate> 

                @{ 

                    <SfDropDownList ID="EmployeeID" Placeholder="Select the name" Value="(context as OrderDetails).EmployeeID" TItem="EmployeeDetails" TValue="int?" DataSource="@employeeDetails"> 

                        <DropDownListFieldSettings Text="FirstName" Value="EmployeeID"></DropDownListFieldSettings> 

                    </SfDropDownList> 

                } 

            </EditTemplate> 

        </GridColumn> 

    </GridColumns> 

</SfGrid> 

Please get back to us if you need further assistance. 

Regards, 

Rahul 

[Erick]

Thank you. I will test the proposed solutions.

Regards,

Erick

[Rahul Narayanasamy]

Hi Erick, 

Thanks for the update. 

We will wait to hear from you. Please get back to us if you need further assistance. 

Regards, 

Rahul