We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
WEBINAR  Visualize Customer Survey Reports Using Our React 3D Circular Charts Control —Thursday, May 02, 10:00 A.M. ET REGISTER NOW
close icon
  1. Home
  2. Forum
  3. Blazor
  4. Grid + Query Builder + OData

Grid + Query Builder + OData

Hi all, i'm trying to use the datagrid with the query builder connected to an odata v4 endpoint with Blazor client-side, i'm getting a lot of errors in the process. if you an example will be great!

BTW, i'm following something similar to this: https://blazor.syncfusion.com/demos/query-builder/grid?theme=bootstrap4

Thanks!

3 Replies 1 reply marked as answer
MK Mohan Kumar Ramasamy Syncfusion Team August 3, 2020 08:29 AM UTC

Hi Julio, 
 
We have checked your reported query, we can achieve your requirement using the ODataV4Adaptor. Please refer the below code snippets. 
 
<div class="col-lg-12 control-section"> 
    <SfQueryBuilder @ref="Querybuilder"> 
        <SfDataManager Url="https://services.odata.org/V4/Northwind/Northwind.svc/Orders/" Adaptor="Adaptors.ODataV4Adaptor"></SfDataManager> 
        <QueryBuilderRule Condition="or" Rules="@ImportRules"></QueryBuilderRule> 
        <QueryBuilderEvents RuleChanged="UpdateRule"></QueryBuilderEvents> 
        <QueryBuilderColumns> 
            <QueryBuilderColumn Field="OrderID" Label="Order ID" Type="number"></QueryBuilderColumn> 
            <QueryBuilderColumn Field="CustomerID" Label="Customer Name" Type="string"></QueryBuilderColumn> 
            <QueryBuilderColumn Field="ShipCity" Label="Ship City" Type="string"></QueryBuilderColumn> 
            <QueryBuilderColumn Field="ShipCountry" Label="Ship Country" Type="string"></QueryBuilderColumn> 
        </QueryBuilderColumns> 
    </SfQueryBuilder> 
</div> 
<div class="col-lg-12 control-section"> 
    <div class="content-wrapper"> 
        <div class="row"> 
            <SfGrid TValue="Order" AllowPaging="true" Query="@GridQueryData"> 
                <SfDataManager Url="https://services.odata.org/V4/Northwind/Northwind.svc/Orders/" Adaptor="Adaptors.ODataV4Adaptor"></SfDataManager> 
                <GridColumns> 
                    <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="TextAlign.Right" Width="120"></GridColumn> 
                    <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn> 
                    <GridColumn Field=@nameof(Order.ShipCity) HeaderText=" Ship City" Width="130"></GridColumn> 
                    <GridColumn Field=@nameof(Order.ShipCountry) HeaderText="Ship Country" Width="120"></GridColumn> 
                </GridColumns> 
            </SfGrid> 
        </div> 
    </div> 
</div> 
@code{ 
    public class Order 
    { 
        public int? OrderID { get; set; } 
        public string CustomerID { get; set; } 
        public string ShipCity { get; set; } 
        public string ShipCountry { get; set; } 
    } 
 
    SfQueryBuilder Querybuilder; 
    private Query GridQueryData = new Query().Where("CustomerID", "equal", "VINET"); 
    public Object QueryData; 
    public WhereData FilterQuery; 
    public RuleModel GetRule { get; set; } 
    private async void Created() 
    { 
        RuleModel Rule = new RuleModel() 
        { 
            Condition = "or", 
            Rules = new List<RuleModel> { 
            new RuleModel { Field = "CustomerID", Value = "VINET", Operator = "equal"  } }, 
        }; 
        this.GetRule = await Querybuilder.GetValidRules(Rule); 
        this.UpdateRule(new RuleChangeEventArgs() { Name = "", PreviousRule = null, Type = "", Rule = this.GetRule }); 
    } 
    public List<RuleModel> ImportRules = new List<RuleModel> 
{ 
        new RuleModel { Field = "CustomerID", Value = "VINET", Operator = "equal" } 
    }; 
    private async void UpdateRule(RuleChangeEventArgs args) 
    { 
        this.QueryData = await Querybuilder.GetFilteredRecords(); 
        if (this.QueryData != null) 
        { 
            this.FilterQuery = ((JObject)this.QueryData).ToObject<WhereData>(); 
            if (this.FilterQuery.Where != null && this.FilterQuery.Where.Count > 0) 
            { 
                GridQueryData = new Query().Where(this.FilterQuery.Where); 
            } 
            this.StateHasChanged(); 
        } 
        else 
        { 
            GridQueryData = new Query(); 
            this.StateHasChanged(); 
        } 
    } 
    public class WhereData 
    { 
        public List<WhereFilter> Where { get; set; } 
    } 
} 
 
 
We have prepared a sample based on this, please refer below link. 
 
 
Please let us know, if you need any further assistance, 
 
Regards, 
Mohankumar R 


DA Dario June 17, 2021 02:16 PM UTC

Hi

I'm trying to use Syncfusion Blazor in a similar scenario to the example in this thread, but using the current latest version of Synfusion.Blazor (v19.1.0.69).

I'm using the sample code provided by Mohan Kumar Ramasamy [Syncfusion], referenced the latest NuGet package (19.1.0.69) and modified the code so that it compiles successfully however it's not working like the original sample.

Do you have an updated sample for QueryBuilder + Grid + OData?

Here is my upgraded .razor file:

@page "/"

@using Syncfusion.Blazor.QueryBuilder
@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.Data
@using Syncfusion.Blazor
@using Newtonsoft.Json.Linq;
@using ColumnType = Syncfusion.Blazor.QueryBuilder.ColumnType

<div class="col-lg-12 control-section">
    <SfQueryBuilder @ref="Querybuilder" TValue="Order">
        <SfDataManager Url="https://services.odata.org/V4/Northwind/Northwind.svc/Orders/" Adaptor="Adaptors.ODataV4Adaptor"></SfDataManager>
        <QueryBuilderRule Condition="or" Rules="@ImportRules"></QueryBuilderRule>
        <QueryBuilderEvents TValue="Order" RuleChanged="UpdateRule"></QueryBuilderEvents>
        <QueryBuilderColumns>
            <QueryBuilderColumn Field="OrderID" Label="Order ID" Type="ColumnType.Number"></QueryBuilderColumn>
            <QueryBuilderColumn Field="CustomerID" Label="Customer Name" Type="ColumnType.String"></QueryBuilderColumn>
            <QueryBuilderColumn Field="ShipCity" Label="Ship City" Type="ColumnType.String"></QueryBuilderColumn>
            <QueryBuilderColumn Field="ShipCountry" Label="Ship Country" Type="ColumnType.String"></QueryBuilderColumn>
        </QueryBuilderColumns>
    </SfQueryBuilder>
</div>
<div class="col-lg-12 control-section">
    <div class="content-wrapper">
        <div class="row">
            <SfGrid TValue="Order" AllowPaging="true" Query="@GridQueryData">
                <SfDataManager Url="https://services.odata.org/V4/Northwind/Northwind.svc/Orders/" Adaptor="Adaptors.ODataV4Adaptor"></SfDataManager>
                <GridColumns>
                    <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="TextAlign.Right" Width="120"></GridColumn>
                    <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
                    <GridColumn Field=@nameof(Order.ShipCity) HeaderText=" Ship City" Width="130"></GridColumn>
                    <GridColumn Field=@nameof(Order.ShipCountry) HeaderText="Ship Country" Width="120"></GridColumn>
                </GridColumns>
            </SfGrid>
        </div>
    </div>
</div>
@code{
    public class Order
    {
        public int? OrderID { get; set; }
        public string CustomerID { get; set; }
        public string ShipCity { get; set; }
        public string ShipCountry { get; set; }
    }

    SfQueryBuilder<Order> Querybuilder;
    private Query GridQueryData = new Query().Where("CustomerID", "equal", "VINET");
    public Object QueryData;
    public WhereData FilterQuery;
    public List<RuleModel> ImportRules = new List<RuleModel>
{
        new RuleModel { Field = "CustomerID", Value = "VINET", Operator = "equal", Type = "String"}
    };
    private void UpdateRule(RuleChangeEventArgs args)
    {
        this.QueryData = Querybuilder.GetFilteredRecords();
        if (this.QueryData != null)
        {
            this.FilterQuery = ((JObject)this.QueryData).ToObject<WhereData>();
            if (this.FilterQuery.Where != null && this.FilterQuery.Where.Count > 0)
            {
                GridQueryData = new Query().Where(this.FilterQuery.Where);
            }
            this.StateHasChanged();
        }
        else
        {
            GridQueryData = new Query();
            this.StateHasChanged();
        }
    }
    public class WhereData
    {
        public List<WhereFilter> Where { get; set; }
    }

}
<style>
    .e-grid {
        margin: 0 auto;
    }

    .control-section {
        min-height: auto;
    }
</style>

MK Mohan Kumar Ramasamy Syncfusion Team June 18, 2021 12:54 PM UTC

Hi Dario, 
 
We have checked your reported query. We have included some breaking changes from this version (v18.3.35) in Query Builder component. We would like you to review the breaking changes from the below location. 
 
 
We can achieve your requirement using GetPredicate method. Please refer below code snippets. 
 
 
@using Syncfusion.Blazor.QueryBuilder 
@using Syncfusion.Blazor.Grids 
@using Syncfusion.Blazor.Data 
@using Syncfusion.Blazor 
@using Newtonsoft.Json.Linq; 
@using ColumnType = Syncfusion.Blazor.QueryBuilder.ColumnType 
 
<div class="col-lg-12 control-section"> 
    <SfQueryBuilder @ref="Querybuilder" TValue="Order"> 
         
        <SfDataManager Url="https://services.odata.org/V4/Northwind/Northwind.svc/Orders/" Adaptor="Adaptors.ODataV4Adaptor"></SfDataManager> 
        <QueryBuilderEvents TValue="Order" RuleChanged="UpdateRule"></QueryBuilderEvents> 
        <QueryBuilderColumns> 
            <QueryBuilderColumn Field="OrderID" Label="Order ID" Type="ColumnType.Number"></QueryBuilderColumn> 
            <QueryBuilderColumn Field="CustomerID" Label="Customer Name" Type="ColumnType.String"></QueryBuilderColumn> 
            <QueryBuilderColumn Field="ShipCity" Label="Ship City" Type="ColumnType.String"></QueryBuilderColumn> 
            <QueryBuilderColumn Field="ShipCountry" Label="Ship Country" Type="ColumnType.String"></QueryBuilderColumn> 
        </QueryBuilderColumns> 
    </SfQueryBuilder> 
</div> 
<div class="col-lg-12 control-section"> 
    <div class="content-wrapper"> 
        <div class="row"> 
            <SfGrid TValue="Order" AllowPaging="true" Query="@GridQueryData"> 
                <SfDataManager Url="https://services.odata.org/V4/Northwind/Northwind.svc/Orders/" Adaptor="Adaptors.ODataV4Adaptor"></SfDataManager> 
                <GridColumns> 
                    <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="TextAlign.Right" Width="120"></GridColumn> 
                    <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn> 
                    <GridColumn Field=@nameof(Order.ShipCity) HeaderText=" Ship City" Width="130"></GridColumn> 
                    <GridColumn Field=@nameof(Order.ShipCountry) HeaderText="Ship Country" Width="120"></GridColumn> 
                </GridColumns> 
                <GridEvents Created="Created" TValue="Order"></GridEvents> 
            </SfGrid> 
        </div> 
    </div> 
</div> 
@code{ 
 
    SfQueryBuilder<Order> Querybuilder; 
    private Query GridQueryData = new Query().Where("CustomerID", "equal", "VINET"); 
    public List<RuleModel> ImportRules = new List<RuleModel> 
{ 
        new RuleModel { Field = "CustomerID", Label="Customer Name", Value = "VINET", Operator = "equal", Type = "String"} 
    }; 
 
    private void Created() 
    { 
        Querybuilder.SetRules(ImportRules, "and"); 
    } 
    private void UpdateRule(RuleChangeEventArgs args) 
    { 
        var predicate = Querybuilder.GetPredicate(); 
        if (predicate != null) 
        { 
            GridQueryData = new Query().Where(predicate); 
        } 
        else 
        { 
            GridQueryData = new Query(); 
        } 
    } 
 
    public class Order 
    { 
        public int? OrderID { get; set; } 
        public string CustomerID { get; set; } 
        public string ShipCity { get; set; } 
        public string ShipCountry { get; set; } 
    } 
 
     
} 
 
 
For your reference, we have prepared a sample based on this. Please refer below link. 
 
 
Please refer below UG Link for Binding with OData services. 
 
 
Please let us know if you need any further assistance. 
 
Regards, 
Mohan kumar R 


Marked as answer
Loader.
Live Chat Icon For mobile
Up arrow icon