Query Builder TemplateColumn

[Jim]

Are there any examples of adding a TemplateColumn to the Blazor Query Builder component?

[Saranya Dhayalan]

Hi Jim, 

 

Thank you for contacting Syncfusion support 

 

We have checked your reported, you can achieve this by using column templating. In this you can set the remote data of dropdownlist for “payment mode” column. Please find the below code snippet: 

 

@using Syncfusion.Blazor.QueryBuilder 

@using Syncfusion.Blazor.DropDowns 

@using Syncfusion.Blazor.Buttons 

@using Syncfusion.Blazor.Inputs 

@using Syncfusion.Blazor.Data 

 

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

    <SfQueryBuilder Width="70%" ModelType="typeof(SfQueryBuilder)"> 

        <QueryBuilderRule Condition="and" Rules="@Rules"></QueryBuilderRule> 

        <QueryBuilderColumns> 

            <QueryBuilderColumn Field="Category" Label="Category" Type="string"></QueryBuilderColumn> 

            <QueryBuilderColumn Field="PaymentMode" Label="PaymentMode" Type="string" Values="@DropValue"> 

                <Template> 

                    <SfDropDownList TValue="string" TItem="OrderDetails" PopupHeight="230px" Placeholder="Select a name" Query="@RemoteDataQuery"> 

                        <SfDataManager Url="https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Orders" CrossDomain="true" Adaptor="Syncfusion.Blazor.Adaptors.ODataAdaptor"></SfDataManager> 

                        <DropDownListFieldSettings Text="CustomerID" Value="CustomerID"></DropDownListFieldSettings> 

                    </SfDropDownList> 

                </Template> 

            </QueryBuilderColumn> 

            <QueryBuilderColumn Field="TransactionType" Label="TransactionType" Type="boolean" Values="@CheckboxValue"> 

                <Template> 

                    <SfCheckBox TChecked="bool" Label="Is Expensive" Checked="true" ValueChange="@CheckboxChange"> 

                    </SfCheckBox> 

                </Template> 

            </QueryBuilderColumn> 

            <QueryBuilderColumn Field="Description" Label="Description" Type="string"></QueryBuilderColumn> 

            <QueryBuilderColumn Field="Date" Label="Date" Type="date"></QueryBuilderColumn> 

            <QueryBuilderColumn Field="Amount" Label="Amount" Type="number" Values="@SliderValue"> 

                <Template> 

                    <SfSlider TValue="string" Min="0" Max="100" Value="@DefaultSliderValue"> 

                        <SliderEvents TValue="string" OnChange="SliderChange"></SliderEvents> 

                    </SfSlider> 

                </Template> 

            </QueryBuilderColumn> 

        </QueryBuilderColumns> 

    </SfQueryBuilder> 

</div> 

 

 

 

@code{ 

 

    public string SliderValue { get; set; } 

 

    public string DefaultValue = "Cash"; 

 

    public string DefaultSliderValue = "50"; 

 

    public string DropValue { get; set; } 

 

    bool Done { get; set; } = true; 

 

    string CheckboxValue => Done ? "IsExpensive" : "Income"; 

 

    public void OnChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string> args) 

    { 

        DropValue = args.Value; 

    } 

 

    public void SliderChange(Syncfusion.Blazor.Inputs.SliderChangeEventArgs<string> args) 

    { 

        SliderValue = args.Value; 

    } 

 

    public void CheckboxChange(Syncfusion.Blazor.Buttons.ChangeEventArgs<bool> args) 

    { 

        Done = args.Checked; 

    } 

 

    public Query RemoteDataQuery = new Query().Select(new List<string> { "CustomerID" }).Take(6).RequiresCount(); 

    public class OrderDetails 

    { 

        public int? OrderID { get; set; } 

        public string CustomerID { get; set; } 

        public int? EmployeeID { get; set; } 

        public double? Freight { get; set; } 

        public string ShipCity { get; set; } 

        public bool Verified { get; set; } 

        public DateTime? OrderDate { get; set; } 

        public string ShipName { get; set; } 

        public string ShipCountry { get; set; } 

        public DateTime? ShippedDate { get; set; } 

        public string ShipAddress { get; set; } 

    } 

 

    List<RuleModel> Rules = new List<RuleModel>() 

{ 

            new RuleModel { Label="Category", Field="Category", Type="string", Operator="equal", Value="Clothing" }, 

            new RuleModel { Condition="or", Rules = new List<RuleModel>() { 

                new RuleModel { Label="Payment Mode", Field="PaymentMode", Type="string", Operator="equal", Value="Cash" }, 

                new RuleModel { Label="TransactionType", Field="TransactionType", Type="boolean", Operator="equal", Value="Is Expensive" }, 

            } }, 

            new RuleModel { Label="Amount", Field="Amount", Type="number", Operator="equal", Value=50 } 

    }; 

} 

<style> 

 

    .e-query-builder { 

        margin: 0 auto; 

    } 

 

    .e-control-wrapper.e-slider-container.e-horizontal { 

        height: 0; 

    } 

</style> 

 

 

Please find the below sample link for the column template support 

 

Sample link:  https://www.syncfusion.com/downloads/support/forum/157731/ze/Sample165472838 

 

Please check the above sample and get back to us if you need further assistance on this. 

 

Regards,            

Saranya D 

[Jim]

That works great.  Thanks, Saranya!

[Saranya Dhayalan]

Hi Jim, 

 

Most Welcome… 

 

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

 

Regards, 

Saranya D 

[Jim]

Hi Saranya.

I am getting an error thrown when clicking the Remove this condition X.  Uncaught TypeError: Cannot read property 'id' of null.

I traced it to the following line in the querybuilder-c52f82.min.js file

(s = this.getColumn(a.rules[d].field)) && s.template && this.templateDestroy(s, i.querySelector(".e-template").id),

I think the class should be .e-blazor-template rather than .e-template.

[Jim]

Additionally, changing the operator breaks the template component. For example, changing PaymentMode to the In operator. 

[Mohan Kumar Ramasamy]

Hi Jim 

 

We have checked your reported query, we can reproduce the reported issue in our end. We have logged an issue report for this, and we will include this fix in our upcoming release. You can track the status in the below feedback link.  

 

Link:   https://www.syncfusion.com/feedback/18137/error-thrown-when-clicking-the-remove-condition  

 

Regards, 

Mohankumar R 

[Jim]

Hi.  

I tried to upgrade the example project above to v18.3.41 and it is throwing a large number of errors.  I tried the documentation but it is not updated. 

[Mohan Kumar Ramasamy]

Hi Jim, 

 

Sorry for the inconvenience caused. In our latest version (v18.3.35), we have included some breaking changes in Querybuilder component. We would like you to review the breaking changes from the below location before you upgrade. 

Link: https://blazor.syncfusion.com/documentation/release-notes/18.3.35/?type=all#query-builder  

 

For your reference, We have prepared a sample based on this, please refer below link. 

 

Link: https://www.syncfusion.com/downloads/support/forum/157731/ze/157731-QueryBuilder-264232011  

 

We will update the same in our documentation. 

 

 

If you are still facing the issue, kindly share the below details. 

 

• If possible, try to reproduce the reported issue in provided sample or share the issue reproducible sample

Please provide the above requested information, based on that we will check and provide you a better solution quickly. 

  

Regards, 

Mohankumar R 

[Jim]

Thanks for your reply.  I am trying to get a working example using Query Builder Templates

[Mohan Kumar Ramasamy]

Hi Jim, 

 

Thanks for update. We have prepared a sample for Query builder template. Please refer below link. 

 

Link:  https://www.syncfusion.com/downloads/support/forum/157731/ze/157731-QueryBuilderTemplate-1155191998  

 

Please let us know, if you need any further assistance. 

 

Regards, 

Mohan kumar R 

[Jim]

Looks great. Thanks!

[Mohan Kumar Ramasamy]

Hi Jim, 

 

Thanks for the update.  

 

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

 

Regards, 

Mohan kumar R