Bug In Query Builder

[Eimantas Baigys]

Hello, in the demo Query Builder examples you have Header Template and Column Template.

I was trying to merge them so I that I can have custom header and custom columns. However, after copying two examples togerther header template stops working and falls back to default one. Is there any way I could have header template and column template at the same time?

I was also trying to do Custom Value Template and Custom Column Template and they work fine

Code Snipped I have created: (from two examples combined, nothing custom added)

<SfQueryBuilder TValue="Employee" @ref="QueryBuilderObj">

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

            <QueryBuilderTemplates>

                <HeaderTemplate>

                    @{

                        string condition = (string)context.Condition;

                    }

                    <SfDropDownList ID="@context.ID" @bind-Value="condition" TValue="string" TItem="Condition" CssClass="e-outline" Width="100px" DataSource="@ConditionsList">

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

                        <DropDownListEvents TValue="string" TItem="Condition" ValueChange="e => conditionChange(e, context)"></DropDownListEvents>

                    </SfDropDownList>

                    <div class="e-header">

                        <div class="e-qb-hdr-content">

                            <SfButton Content="Add Group" CssClass="e-custom-button" @onclick="e => addGroup(e, context)"></SfButton>

                        </div>

                        <div class="e-qb-hdr-content">

                            <SfButton Content="Add Condition" CssClass="e-custom-button" @onclick="e => addCondition(e, context)"></SfButton>

                        </div>

                        @if (context.ID.Split("_")[1].IndexOf("0") < 0)

                        {

                            <div class="e-qb-hdr-content">

                                <SfButton Content="Delete Group" CssClass="e-custom-button e-danger" @onclick="e => deleteGroup(e, context)"></SfButton>

                            </div>

                        }

                    </div>

                </HeaderTemplate>

            </QueryBuilderTemplates>

            <QueryBuilderColumns>

                <QueryBuilderColumn Field="EmployeeID" Label="Employee ID" Type="ColumnType.Number"></QueryBuilderColumn>

                <QueryBuilderColumn Field="FirstName" Label="First Name" Type="ColumnType.String"></QueryBuilderColumn>

                <QueryBuilderColumn Field="LastName" Label="Last Name" Type="ColumnType.String">

                    <QueryBuilderTemplates>

                        <ValueTemplate>

                            @{

                                string value = (string)context.Value;

                            }

                            <SfDropDownList TValue="string" TItem="ItemFields" DataSource="@items" @bind-Value="@value">

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

                                <DropDownListEvents TItem="ItemFields" TValue="string" ValueChange="e => onChange(e, context)"></DropDownListEvents>

                            </SfDropDownList>

                        </ValueTemplate>

                    </QueryBuilderTemplates>

                </QueryBuilderColumn>

                <QueryBuilderColumn Field="HireDate" Label="Hire Date" Type="ColumnType.Date"></QueryBuilderColumn>

                <QueryBuilderColumn Field="Country" Label="Country" Type="ColumnType.String">

                    <QueryBuilderTemplates>

                        <ColumnTemplate>

                            <div class="e-rule-filter">

                                @{

                                    string field = (string)context.Field;

                                    string value = (string)context.Value;

                                    string checkedValue = (string)context.Operator;

                                    string radioGroupName = "rule_" + Guid.NewGuid();

                                }

                                <SfDropDownList @bind-Value="@field" TItem="string" TValue="string" DataSource="@Columns">

                                    <DropDownListEvents TItem="string" TValue="string" />

                                </SfDropDownList>

                            </div>

                            <div class="e-rule-operator e-operator">

                                <SfRadioButton Label="Is Equal" Name="@radioGroupName" Value="equal" Checked="@checkedValue" @onchange="@((e) => changeOperator(e, context))"></SfRadioButton>

                                <SfRadioButton Label="Is Not Equal" Name="@radioGroupName" Value="notequal" Checked="@checkedValue" @onchange="@((e) => changeOperator(e, context))"></SfRadioButton>

                            </div>

                            <div class="e-rule-value e-value">

                                <SfDropDownList @bind-Value="@value" TValue="string" Placeholder="Select Country" TItem="Country" DataSource="@CountriesList">

                                    <DropDownListFieldSettings Text="Name"></DropDownListFieldSettings>

                                    <DropDownListEvents TItem="Country" TValue="string" ValueChange="e => changeValue(e, context)"></DropDownListEvents>

                                </SfDropDownList>

                            </div>

                        </ColumnTemplate>

                    </QueryBuilderTemplates>

                </QueryBuilderColumn>

            </QueryBuilderColumns>

        </SfQueryBuilder>

[Sangeetha Priya Murugan]

Hi Eimantas, 

 

Thank you for contacting Syncfusion support. 

 

We have checked your provided code snippets and we suggest you render the header template in QueryBuilderTemplates tag inside QueryBuildercolumns tag as like as below. 

 

Code Example: 

 

 

<SfQueryBuilder TValue="Employee" @ref="QueryBuilderObj"> 

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

 

        <QueryBuilderColumns> 

            ..// 

            <QueryBuilderColumn Field="Country" Label="Country" Type="ColumnType.String"> 

                <QueryBuilderTemplates> 

                    <HeaderTemplate> 

                        @{ 

                            string condition = (string)context.Condition; 

                        } 

                        <SfDropDownList ID="@context.ID" @bind-Value="condition" TValue="string" TItem="Condition" CssClass="e-outline" Width="100px" DataSource="@ConditionsList"> 

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

                            <DropDownListEvents TValue="string" TItem="Condition" ValueChange="e => conditionChange(e, context)"></DropDownListEvents> 

                        </SfDropDownList> 

                        <div class="e-header"> 

                            <div class="e-qb-hdr-content"> 

                                <SfButton Content="Add Group" CssClass="e-custom-button" @onclick="e => addGroup(e, context)"></SfButton> 

                            </div> 

                            <div class="e-qb-hdr-content"> 

                                <SfButton Content="Add Condition" CssClass="e-custom-button" @onclick="e => addCondition(e, context)"></SfButton> 

                            </div> 

                            @if (context.ID.Split("_")[1].IndexOf("0") < 0) 

                            { 

                                <div class="e-qb-hdr-content"> 

                                    <SfButton Content="Delete Group" CssClass="e-custom-button e-danger" @onclick="e => deleteGroup(e, context)"></SfButton> 

                                </div> 

                            } 

                        </div> 

                    </HeaderTemplate> 

                    <ColumnTemplate> 

                        <div class="e-rule-filter"> 

                            @{ 

                                string field = (string)context.Field; 

                                string value = (string)context.Value; 

                                string checkedValue = (string)context.Operator; 

                                string radioGroupName = "rule_" + Guid.NewGuid(); 

                            } 

                            <SfDropDownList @bind-Value="@field" TItem="string" TValue="string" DataSource="@Columns"> 

                                <DropDownListEvents TItem="string" TValue="string" ValueChange="e => changeField(e, context)"></DropDownListEvents> 

                            </SfDropDownList> 

                        </div> 

                        <div class="e-rule-operator e-operator"> 

                            <SfRadioButton Label="Is Equal" Name="@radioGroupName" Value="equal" Checked="@checkedValue" @onchange="@((e) => changeOperator(e, context))"></SfRadioButton> 

                            <SfRadioButton Label="Is Not Equal" Name="@radioGroupName" Value="notequal" Checked="@checkedValue" @onchange="@((e) => changeOperator(e, context))"></SfRadioButton> 

                        </div> 

                        <div class="e-rule-value e-value"> 

                            <SfDropDownList @bind-Value="@value" TValue="string" Placeholder="Select Country" TItem="Country" DataSource="@CountriesList"> 

                                <DropDownListFieldSettings Text="Name"></DropDownListFieldSettings> 

                                <DropDownListEvents TItem="Country" TValue="string" ValueChange="e => changeValue(e, context)"></DropDownListEvents> 

                            </SfDropDownList> 

                        </div> 

                    </ColumnTemplate> 

                </QueryBuilderTemplates> 

            </QueryBuilderColumn> 

        </QueryBuilderColumns> 

    </SfQueryBuilder> 

 

For your convenience we have prepared the sample based on our suggestion. Please find the below link. 

 

Sample Link: https://www.syncfusion.com/downloads/support/forum/171587/ze/Server5.0-364375028 

 

Regards, 

Sangeetha M