Question for Query Builder + SfDataManager + custom adapter + Data Grid

[Jacky]

Hi All,

How can I use query builder for SfDataManager custom adapter of Data Grid ?

Best Regards!

Jacky

[YuvanShankar Arunagiri]

Hi Jacky,

We have validated your report query and prepared the sample based on your requirement. Please refer the below code snippet and UG link for more details about custom adaptors.

UG link: https://blazor.syncfusion.com/documentation/data/custom-binding

[Index.razor]:

@using Syncfusion.Blazor.QueryBuilder

@using Syncfusion.Blazor.Grids

@using Syncfusion.Blazor.Data

@using Syncfusion.Blazor

 

<div class="col-lg-12 control-section">

  <SfQueryBuilder @ref="querybuilder" TValue="Order">

    <QueryBuilderEvents TValue="Order" Created="created" RuleChanged="updateRule"></QueryBuilderEvents>

    <SfDataManager AdaptorInstance="@typeof(CustomAdaptor)" Adaptor="Adaptors.CustomAdaptor"></SfDataManager>

  </SfQueryBuilder>

</div>

<div class="col-lg-12 control-section">

  <div class="content-wrapper">

    <div class="row">

      <SfGrid TValue="Order" AllowPaging="true" DataSource="@gridData">

        <GridEvents Created="created" TValue="Order"></GridEvents>

        <GridColumns>

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

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

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

        </GridColumns>

      </SfGrid>

    </div>

  </div>

</div>

@code{

    private SfQueryBuilder<Order> querybuilder;

    public static List<Order> Orders { get; set; }

    private IEnumerable<Order> gridData { get; set; }

 

    protected override void OnInitialized()

    {

      Orders = Enumerable.Range(1, 75).Select(x => new Order()

      {

        OrderID = 1000 + x,

        CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],

        Freight = 2 * x,

      }).ToList();

    }

 

    public class Order

    {

      public int OrderID { get; set; }

      public string CustomerID { get; set; }

      public int Freight { get; set; }

    }

 

    private void created()

    {

      gridData = Orders;

    }

 

    private void updateRule(Syncfusion.Blazor.QueryBuilder.RuleChangeEventArgs args)

    {

      if (querybuilder.GetValidRules().Rules.Count > 0)

      {

        gridData = querybuilder.GetFilteredRecords().ToList().AsEnumerable<Order>();

      }

      else

      {

        gridData = Orders;

      }

      StateHasChanged();

    }

    public class CustomAdaptor : DataAdaptor

    {

      // Performs data Read operation

      public override object Read(DataManagerRequest dm, string key = null)

      {

        IEnumerable<Order> DataSource = Orders;

        if (dm.Search != null && dm.Search.Count > 0)

        {

          // Searching

          DataSource = DataOperations.PerformSearching(DataSource, dm.Search);

        }

        if (dm.Sorted != null && dm.Sorted.Count > 0)

        {

          // Sorting

          DataSource = DataOperations.PerformSorting(DataSource, dm.Sorted);

        }

        if (dm.Where != null && dm.Where.Count > 0)

        {

          // Filtering

          DataSource = DataOperations.PerformFiltering(DataSource, dm.Where, dm.Where[0].Operator);

        }

        int count = DataSource.Cast<Order>().Count();

        if (dm.Skip != 0)

        {

          //Paging

          DataSource = DataOperations.PerformSkip(DataSource, dm.Skip);

        }

        if (dm.Take != 0)

        {

          DataSource = DataOperations.PerformTake(DataSource, dm.Take);

        }

        return dm.RequiresCounts ? new DataResult() { Result = DataSource, Count = count } : (object)DataSource;

      }

    }

}

Could you please check the above code and get back to us, if you need any further assistance on this. 

Regards,

YuvanShankar A

Attachment: Index_142e8707.zip

[Jacky]

Hi  YuvanShankar,

Thank for your sample.

I found the Blog about Data manager support features:

https://www.syncfusion.com/blogs/post/top-5-features-of-blazor-query-builder.aspx#data-manager-support

Is the GetDataManagerQuery method  work for current version 20.1.0.61 ?

It seems to a better way to integrate with the DataGrid. 

Best Regards!

Jacky

[YuvanShankar Arunagiri]

Hi Jacky,

Query: Is the GetDataManagerQuery method  work for current version 20.1.0.61 ?

We have validated your reported query and GetDataManagerQuery will work properly in latest version 20.2.0.36/(20.1.0.61) also and prepared the sample based on your requirement. Please find the below attachment and get back to us, if you need any further assistance on this. 

Regards,

YuvanShankar A

Attachment: BlazorQBDm_210ace9.zip

[Jacky]

Hi  YuvanShankar,

I got it, Thank for your sample.

Best Regards!

Jacky

[YuvanShankar Arunagiri]

Hi Jacky,

We are happy to hear that your requirement has been fulfilled. Please get back to us if you need any further assistance on this.

Regards,

YuvanShankar A