Custom HeaderTemplate will always set the condition back to "AND" - even if a rule is set with OR condition
Hi,
Please refer to the following code, which is based on a custom-header sample code from the forum:
@page "/querybuilder"
@using Syncfusion.Blazor.QueryBuilder
@using Syncfusion.Blazor.DropDowns
@using Syncfusion.Blazor.Buttons
<SfQueryBuilder TValue="EmployeeDetails" @ref="qbObj">
<QueryBuilderTemplates>
<HeaderTemplate>
<SfDropDownList ID="@context.ID" TValue="string" TItem="Operator" CssClass="e-outline" Width="100px" DataSource="@operData" @ref="ddlObj">
<DropDownListFieldSettings Text="Text"></DropDownListFieldSettings>
<DropDownListEvents TValue="string" TItem="Operator" Created="e => ddlCreated(e, context)" ValueChange="e => onChange(e, context)"></DropDownListEvents>
</SfDropDownList>
<div id="addgrp">
<SfButton Content="Add Group" CssClass="e-small e-outline" @onclick="e => addGrpBtn(e, context)"></SfButton>
</div>
<div id="addgrp">
<SfButton Content="Add Condition" CssClass="e-small e-outline" @onclick="e => addCondBtn(e, context)"></SfButton>
</div>
@if (context.ID.Split("_")[1].IndexOf("0") < 0)
{
<div id="addgrp">
<SfButton Content="Delete Group" CssClass="e-small e-outline e-danger" @onclick="e => deleteGrpBtn(e, context)"></SfButton>
</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="TitleOfCourtesy" Label="Title of Courtesy" Type="ColumnType.Boolean" Values="Values"></QueryBuilderColumn>
<QueryBuilderColumn Field="Title" Label="Title" Type="ColumnType.String"></QueryBuilderColumn>
<QueryBuilderColumn Field="HireDate" Label="Hire Date" Type="ColumnType.Date"></QueryBuilderColumn>
<QueryBuilderColumn Field="Country" Label="Country" Type="ColumnType.String"></QueryBuilderColumn>
<QueryBuilderColumn Field="City" Label="City" Type="ColumnType.String"></QueryBuilderColumn>
</QueryBuilderColumns>
</SfQueryBuilder>
<div>
<SfButton @onclick="ShowCurrentSql">Show current SQL</SfButton>
</div>
Current SQL is: <p>@CurrentSql</p>
<div>
<SfButton @onclick="SetCustomSqlWithOrRule">Set custom sql (with OR rule)</SfButton>
<SfButton @onclick="SetCustomSqlWithAndRule">Set custom sql (with AND rule)</SfButton>
</div>
SQL should be: <p>@SqlShouldBe</p>
@code {
SfDropDownList<string, Operator> ddlObj { set { ddlRefs.Add(value); } }
SfQueryBuilder<EmployeeDetails> qbObj;
List<SfDropDownList<string, Operator>> ddlRefs = new List<SfDropDownList<string, Operator>>();
private string[] Values = new string[] { "Mr.", "Mrs." };
private string grpID;
List<RuleModel> Rules = new List<RuleModel>()
{
new RuleModel { Field="Country", Label="Country", Type="String", Operator="equal", Value = "England" },
new RuleModel { Field="EmployeeID", Label="EmployeeID", Type="Number", Operator="notequal", Value = 1001 },
new RuleModel { Condition="or", Rules=new List<RuleModel>() { new RuleModel() { Field="FirstName", Label="First Name", Type = "String", Operator ="equal", Value="Mark" } }}
};
public class Operator
{
public string Text { get; set; }
}
public class EmployeeDetails
{
public int EmployeeID { get; set; }
public string FirstName { get; set; }
public bool TitleOfCourtesy { get; set; }
public string Title { get; set; }
public DateTime HireDate { get; set; }
public string Country { get; set; }
public string City { get; set; }
}
List<Operator> operData = new List<Operator>()
{
new Operator() { Text = "AND" },
new Operator() { Text = "OR" }
};
private void ddlCreated(Object obj, HeaderTemplateModel model)
{
foreach (SfDropDownList<string, Operator> ddlObj in ddlRefs)
{
if (ddlObj.ID == model.ID)
{
ddlObj.Value = model.Condition.ToUpper();
}
}
}
private void onChange(ChangeEventArgs<string, Operator> args, HeaderTemplateModel model)
{
if (args.IsInteracted)
{
model.Condition = args.Value.ToLower();
}
}
private void addGrpBtn(MouseEventArgs args, HeaderTemplateModel model)
{
grpID = model.ID.Split("_")[1];
qbObj.AddGroup(new RuleModel { Condition = "or", Rules = new List<RuleModel>() { new RuleModel() } }, grpID);
}
private void addCondBtn(MouseEventArgs args, HeaderTemplateModel model)
{
grpID = model.ID.Split("_")[1];
qbObj.AddRule(new RuleModel(), grpID);
}
private void deleteGrpBtn(MouseEventArgs args, HeaderTemplateModel model)
{
grpID = model.ID.Split("_")[1];
qbObj.DeleteGroup(grpID);
}
private string CurrentSql { get; set; } = "";
private string SqlShouldBe { get; set; } = "";
private void ShowCurrentSql()
{
CurrentSql = qbObj.GetSqlFromRules(qbObj.GetValidRules());
}
private void SetCustomSqlWithOrRule()
{
var sqlToSet = "EmployeeID = 0 OR FirstName LIKE ('t%')";
SqlShouldBe = sqlToSet;
qbObj.SetRulesFromSql(sqlToSet);
ShowCurrentSql();
}
private void SetCustomSqlWithAndRule()
{
var sqlToSet = "EmployeeID = 0 AND FirstName LIKE ('t%')";
SqlShouldBe = sqlToSet;
qbObj.SetRulesFromSql(sqlToSet);
ShowCurrentSql();
}
}
<style>
#addgrp {
display: inline-block;
padding: 0 0 0 12px;
}
</style>
The problem is that if I press the button "Set custom SQL (with OR rule)", the AND/OR selector in the current template isn't updated.
In fact, even if I remove the custom header template, even the standard header control seems to have problems with this scenario; if I press either of the "Set custom SQL" buttons, it will set the AND/OR button in the header twice, but then stop updating it.
Can you advise if this is a bug in the built-in header control, and if so, fix it?
Thanks!
Hi Darren,
We can reproduce your reported issue in our end. we will validate and update you the details on or before 16th September 2022.
Regards,
YuvanShankar A
Hi Darren,
We can reproduce your reported issue at our end. So, we have confirmed this as an issue and logged a bug report for this. You can track its status from the below feedback link.
The fix will be available in our upcoming patch release which is scheduled for first week of October 2022.
We appreciate your patience until then.
Regards,
YuvanShankar A
Hi Darren,
Thanks for the patience.
We are glad to announce our weekly patch release (20.3.0.48) is rolled out. We have included the fix for this issue in this release. So, we suggest you upgrade our Syncfusion packages to our latest version to resolve this issue in your end. (20.3.0.48).
Feedback link: https://www.syncfusion.com/feedback/37812/condition-not-update-properly-when-we-use-header-template-and-set-the-rule-using
Release Notes: https://blazor.syncfusion.com/documentation/release-notes/20.3.48?type=all#query-builder
Please refer the below code snippet and attached sample file.
|
<HeaderTemplate> @{ var Cond = context.Condition == null ? "and" : context.Condition; } <SfDropDownList ID="@context.ID" TValue="string" TItem="Operator" CssClass="e-outline" Width="100px" DataSource="@operData" @ref="ddlObj" Value="@Cond"> <DropDownListFieldSettings Text="Text" Value="Value"></DropDownListFieldSettings> <DropDownListEvents TValue="string" TItem="Operator" Created="e => ddlCreated(e, context)" ValueChange="e => onChange(e, context)"></DropDownListEvents> </SfDropDownList> ………………………………………………………….. </HeaderTemplate> @code{ public class Operator { public string Text { get; set; } public string Value { get; set; } } List<Operator> operData = new List<Operator>() { new Operator() { Text = "AND", Value = "and" }, new Operator() { Text = "OR", Value = "or" } }; } |
Regards,
YuvanShankar A
Attachment: Counter_1365f191.zip
- 3 Replies
- 2 Participants
-
DA Darren
- Sep 12, 2022 06:26 AM UTC
- Oct 6, 2022 06:33 AM UTC
