1. Home
  2. Forum
  3. Blazor
  4. Specifying QueryBuilderColumn Operators does not seem to work anymore

Specifying QueryBuilderColumn Operators does not seem to work anymore

I am trying to create custom operators for a QueryBuilderColumn, however the operators list is not being honored. Below is a snippit of my implementation. What am I missing? This seems like quite a simplistic implementation, however the default operators are showing, not my list of operators specified.



<SfQueryBuilder TValue="Customer" MaxGroupCount="0">

    <QueryBuilderColumns>

        <QueryBuilderColumn Field="Name" Label="Name" Type=Syncfusion.Blazor.QueryBuilder.ColumnType.String Operators="@cOperators"></QueryBuilderColumn>

    </QueryBuilderColumns>

</SfQueryBuilder>


@code{

    public List<OperatorsModel> cOperators = new List<OperatorsModel> {

        new OperatorsModel { Text="Equal", Value="equal"},

        new OperatorsModel { Text="Not equal", Value="notequal"}

    };

}


12 Replies
GK Gayathri KarunaiAnandam Syncfusion Team July 29, 2021 03:58 PM UTC

Hi HappyCamper, 

We have checked your reported query and code snippet. We can add custom operator to QueryBuilder. We have modified your code snippet to achieve your requirement. Please check the code snippet. 

Code Snippet: 
 
<SfQueryBuilder TValue="string[]" MaxGroupCount="0"> 
    <QueryBuilderColumns> 
        <QueryBuilderColumn Field="Name" Label="Name" Type=Syncfusion.Blazor.QueryBuilder.ColumnType.String Operators="@cOperators"></QueryBuilderColumn> 
    </QueryBuilderColumns> 
</SfQueryBuilder> 
@code{ 
    public List<OperatorsModel> cOperators = new List<OperatorsModel> { 
        new OperatorsModel { Text="Equal", Value="equal"}, 
        new OperatorsModel { Text="Not equal", Value="notequal"} 
    }; 
} 

For your convenience, we have prepared a sample based on this. Please check the below link. 


Please get back to us, if you need further assistance. 

Regards, 
Gayathri K 


HA HappyCamper August 2, 2021 09:34 PM UTC

Hi  Gayathri,


I spent some time troubleshooting this more and I believe I found a bug in the querybuildercomponent.  In my project the querybuilder is inside a blazor component, which is shown in a sidebar component.  For some reason, If the blazor component that hosts the querycomponent accepts parameters of type Guid or an eventcallback or Action, the custom operators for the querycomponent is not honored.  Below code and example project attached.  Could you please confirm that it is a bug?


Main Component / Page

 <SfSidebar @ref="SidebarObj" Position="@Position" HtmlAttributes="@HtmlAttribute" @bind-IsOpen="SidebarToggle">
                <ChildContent>                    @if (SidebarToggle)                    {                        //Querycomponent that renders custom operators correctly                        <QueryComponent TestParam="test"></QueryComponent>

                        //Querycomponent that DOES NOT render custom operators correctly                        <QueryComponent2 testParam="@TestGuid"></QueryComponent2>                    }
                </ChildContent>            </SfSidebar>



QueryComponent1 (With querycomponent that renders custom operators correctly)


<SfQueryBuilder TValue="string[]" MaxGroupCount="0">    

<QueryBuilderColumns>        
<QueryBuilderColumn Field="Name" Label="Name" Type=Syncfusion.Blazor.QueryBuilder.ColumnType.String Operators="@cOperators"></QueryBuilderColumn>    
</QueryBuilderColumns>
</SfQueryBuilder>
<div>Test Param: @TestParam</div>
@code{
    [Parameter] public string TestParam { get; set; }

    public List<OperatorsModel> cOperators = new List<OperatorsModel> {        new OperatorsModel { Text="Equal", Value="equal"},        new OperatorsModel { Text="Not equal", Value="notequal"}    };}


QueryComponent2 (With querybuilder that does not render custom operators)


<SfQueryBuilder TValue="string[]" MaxGroupCount="0">    <QueryBuilderColumns>        <QueryBuilderColumn Field="Name" Label="Name" Type=Syncfusion.Blazor.QueryBuilder.ColumnType.String Operators="@cOperators"></QueryBuilderColumn>    </QueryBuilderColumns></SfQueryBuilder>

@code{
    [Parameter] public Guid testParam { get; set; }

    public List<OperatorsModel> cOperators = new List<OperatorsModel> {        new OperatorsModel { Text="Equal", Value="equal"},        new OperatorsModel { Text="Not equal", Value="notequal"}    };}



Attachment: querybuildertest_94c103fa.zip

GK Gayathri KarunaiAnandam Syncfusion Team August 3, 2021 05:19 PM UTC

Hi HappyCamper, 

We have checked your query and sample. We have modified your sample to achieve your requirement. Please check the below code snippet. 

 <div class="control-section"> 
    <div id="wrapper"> 
        <div class="col-lg-12 col-sm-12 col-md-12" id="sidebar-section"> 
            <!-- sidebar element declaration --> 
            <span id="hamburger" @onclick="@Show" class="@Hamburgerclass"></span> 
            <SfSidebar @ref="SidebarObj" Position="@Position" HtmlAttributes="@HtmlAttribute" @bind-IsOpen="SidebarToggle"> 
                <ChildContent> 
                    @if (SidebarToggle) 
                    { 
                        //Querycomponent that renders custom operators correctly 
                        <QueryComponent TestParam="test"></QueryComponent>  
 
 
                        //Querycomponent that DOES NOT render custom operators correctly 
                        <QueryComponent2 testParam="@TestGuidValue"></QueryComponent2> 
                    } 
 
                </ChildContent> 
            </SfSidebar> 
            <!-- end of sidebar element --> 
            <!-- main content declaration --> 
            <div> 
                <div class="title default">Main content</div> 
                <div class="sub-title"> 
                    Click the button to open/close the Sidebar. 
                    <div style="padding:20px" class="center-align"> 
                        <!-- button element declaration --> 
                        <SfButton @onclick="Toggle" CssClass="e-btn e-info">Toggle Sidebar</SfButton> 
                    </div> 
                    
                </div> 
            </div> 
        </div> 
        <!--end of main content declaration --> 
    </div> 
</div> 
@code { 
    public string TestGuidValue { get; set; }  
    public Guid TestGuid { get; set; } = Guid.Parse("19ADF783-C733-494A-A4CE-3ED8EC0930DD"); 
 
    protected override void OnInitialized() 
    { 
       TestGuidValue =  TestGuid.ToString(); 
    } 
 
 
    } 

@using Syncfusion.Blazor.QueryBuilder 
<SfQueryBuilder TValue="string[]" MaxGroupCount="0" ID="Query2"> 
    <QueryBuilderColumns> 
        <QueryBuilderColumn Field="Name" Label="Name" Type=Syncfusion.Blazor.QueryBuilder.ColumnType.String Operators="@cOperators2"></QueryBuilderColumn> 
    </QueryBuilderColumns> 
</SfQueryBuilder> 
 
 
 
@code{ 
 
    [Parameter] public string testParam { get; set; } 
 
 
    public List<OperatorsModel> cOperators2 = new List<OperatorsModel> { 
        new OperatorsModel { Text="Equal", Value="equal"}, 
        new OperatorsModel { Text="Not equal", Value="notequal"} 
    }; 
} 

For your convenience, we have modified your sample. Please check the below link. 


Please check the above link and get back to us, if you need further assistance. 

Regards, 
Gayathri K 


HA HappyCamper August 3, 2021 06:24 PM UTC

Gayathri, 

The problem is not converting to string.  The problem is that the querybuilder component is not rendering custom operators when using Parameters in the blazor component other than string.  In my main project.  the blazor component has an Eventcallback Parameter to report back to the main component (index page) to report when a button (save button) is clicked, so the UI on the main page can be updated.

So.  Yes, your example above works around the QueryBuilder component error, but it does not resolve the underlying issue with the querybuilder component.

Let's take a different approach.  Same example, using an eventcallback in the blazor component as an example, rather than a Guid. (I Also updated the sample which is attached)

This still does not render the custom operators correctly.  How would you work around this, or is there a bug in the QueryBuilder component that needs to be fixed?


index.razor


@page "/"


@using Syncfusion.Blazor.Navigations

@using Syncfusion.Blazor.Buttons


<div class="control-section">

    <div id="wrapper">

        <div class="col-lg-12 col-sm-12 col-md-12" id="sidebar-section">

            <!-- sidebar element declaration -->

            <span id="hamburger" @onclick="@Show" class="@Hamburgerclass"></span>

            <SfSidebar @ref="SidebarObj" Position="@Position" HtmlAttributes="@HtmlAttribute" @bind-IsOpen="SidebarToggle">

                <ChildContent>

                    @if (SidebarToggle)

                    {

                        //Querycomponent that renders custom operators correctly

                        <QueryComponent TestParam="test"></QueryComponent>



                        //Querycomponent that DOES NOT render custom operators correctly

                        <QueryComponent2 cmdCompleted="QueryUpdated"></QueryComponent2>

                    }


                </ChildContent>

            </SfSidebar>

            <!-- end of sidebar element -->

            <!-- main content declaration -->

            <div>

                <div class="title default">Main content</div>

                <div class="sub-title">

                    Click the button to open/close the Sidebar.

                    <div style="padding:20px" class="center-align">

                        <!-- button element declaration -->

                        <SfButton @onclick="Toggle" CssClass="e-btn e-info">Toggle Sidebar</SfButton>

                    </div>


                </div>

            </div>

        </div>

        <!--end of main content declaration -->

    </div>

</div>

@code {

    SfSidebar SidebarObj;

    public string Leftbtn = "Left";

    public string Hamburgerclass = "e-icons menu default";

    public SidebarPosition Position { get; set; } = SidebarPosition.Left;

    public bool SidebarToggle = false;


    public void Show()

    {

        SidebarToggle = true;

    }

    public void Close()

    {

        SidebarToggle = false;

    }

    public void Toggle()

    {

        SidebarToggle = !SidebarToggle;

    }

    public void PositionChange(Syncfusion.Blazor.Buttons.ChangeArgs<string> args)

    {

        if (args.Value == "Left")

        {

            this.Position = SidebarPosition.Left;

            this.Hamburgerclass = "e-icons menu default";

        }

        else

        {

            this.Position = SidebarPosition.Right;

            this.Hamburgerclass = "e-icons menu default e-rtl";

        }

    }

    Dictionary<string, object> HtmlAttribute = new Dictionary<string, object>()

{

        {"class", "default-sidebar" }

    };


    public async Task QueryUpdated()

    {


        //Do stuff


        SidebarToggle = false;

    }

}


QueryComponent2.razor




<SfQueryBuilder TValue="string[]" MaxGroupCount="0">

    <QueryBuilderColumns>

        <QueryBuilderColumn Field="Name" Label="Name" Type=Syncfusion.Blazor.QueryBuilder.ColumnType.String Operators="@cOperators"></QueryBuilderColumn>

    </QueryBuilderColumns>

</SfQueryBuilder>


<Syncfusion.Blazor.Buttons.SfButton OnClick="ReportToParent">Save</Syncfusion.Blazor.Buttons.SfButton>



@code{


    [Parameter] public EventCallback<string> cmdCompleted { get; set; }


    public List<OperatorsModel> cOperators = new List<OperatorsModel> {

        new OperatorsModel { Text="Equal", Value="equal"},

        new OperatorsModel { Text="Not equal", Value="notequal"}

    };


    public async void ReportToParent()

    {

        await cmdCompleted.InvokeAsync();

    }

}


Attachment: querybuildertest_2bdc9cd0.zip

GK Gayathri KarunaiAnandam Syncfusion Team August 5, 2021 04:06 AM UTC

Hi HappyCamper, 

We have checked your reported query and sample. We need to validate more on this. So, we will provide further details on August 9th, 2021. We appreciate your patience until then. 

Regards, 
Gayathri K 


HA HappyCamper August 5, 2021 04:18 AM UTC

Thanks, awaiting your reply.


GK Gayathri KarunaiAnandam Syncfusion Team August 9, 2021 03:21 AM UTC

Hi HappyCamper, 

As promised, we will provide further details and we appreciate your patience. 

Regards, 
Gayathri K 


GK Gayathri KarunaiAnandam Syncfusion Team August 10, 2021 05:09 PM UTC

Hi HappyCamper, 

Thanks for the patience. 

We have checked your query. We can reproduce your reported issue in our end. We have logged this issue as a bug, and it will be available in our upcoming patch release which will be scheduled on August 25th  ,2021 and we appreciate your patience until then. 
 
You can also track the status of this bug by using our feedback portal link below.   
   
 
Please get back to us, if you need further assistance. 
 
Regards, 
Gayathri K 


HA HappyCamper August 25, 2021 01:47 AM UTC

Gayathri,

There has been two releases since your promise on Aug 10.  This issue is currently blocking our projects and no further development is possible... When will this be fixed?


GK Gayathri KarunaiAnandam Syncfusion Team August 25, 2021 06:06 PM UTC

Hi HappyCamper, 

We deeply regret for the inconvenience. 

We have faced some complexities while implementing this fix. And need to check more dependent test cases for this issue.  So, we will consider this in our September 1st weekly release and we appreciate your patience until then. 
 

Regards, 
Gayathri K 


GK Gayathri KarunaiAnandam Syncfusion Team September 7, 2021 04:00 AM UTC

Hi HappyCamper,    
   
Sorry for the inconvenience caused.   
   
We are facing more complexity on fixing this issue. So, we will include this fix in our next patch release, which will be scheduled on September 8th, 2021. We appreciate your patience until then. You can also track the status of this bug fix using below feedback portal link.    
   
   
Regards,    
Gayathri K  


GK Gayathri KarunaiAnandam Syncfusion Team September 9, 2021 02:12 PM UTC

Hi HappyCamper,  
  
Thanks for the patience.  
  
We are glad to announce that our weekly patch release (19.0.2.60) is rolled out. We have included the fix for your issue [ Custom operator does not render properly ] in this release. So, we suggest you upgrade our Syncfusion packages to latest version to resolve this issue in your end. (19.0.2.60)  
  
  
  
Please let us know, if you need further assistance.  
  
Regards,  
Gayathri K  


Loader.
Up arrow icon