Using QueryBuilder Header Template and Blank ValueTemplate for Columns

[HappyCamper]

Hi There,

I have two requirements for my QueryBuilder:

1. Display a custom Header template with just an "Add" button without showing the default header for "or" and "and" conditions (Currently, my custom header isn't being rendered as I guess it is because of the duplicate template collections)
2. My querybuilder specificly only uses a field and custom operator, no value. Adding a blank valuetemplate does what I'm intending, however a width of 200px for the "blank div" is added. How can I override it so that that I do not see any large spacing between the operator and "remove condition" button?
   

Code for my querybuilder:

                <SfQueryBuilder TValue="string[]" MaxGroupCount="0" @ref="orderByQueryBuilder">
                    <QueryBuilderShowButtons RuleDelete="true" GroupDelete="false" GroupInsert="false" ></QueryBuilderShowButtons>
                    <QueryBuilderRule Rules="orderByRules" Condition="and"></QueryBuilderRule>
                    <QueryBuilderTemplates>
                        <HeaderTemplate>
                            <div class="e-header">
                                <div class="e-qb-hdr-content">
                                    <SfButton Content="Add" CssClass="e-custom-button" @onclick="e => addCondition(e, context)"></SfButton>
                                </div>
                            </div>
                        </HeaderTemplate>
                    </QueryBuilderTemplates>
                    <QueryBuilderColumns>
                        @foreach (var col in orderByQueryBuilderColumns)
                        {
                            <QueryBuilderColumn Field="@col.Field" Label="@col.Label" Type="ColumnType.String" Operators="@col.Operators">
                                <QueryBuilderTemplates>
                                    <ValueTemplate>
                                    </ValueTemplate>
                                </QueryBuilderTemplates>
                            </QueryBuilderColumn>
                        }
                    </QueryBuilderColumns>
                </SfQueryBuilder>

below a screenshot to illustrate the requirements

[Gayathri KarunaiAnandam]

Hi HappyCamper, 

We have checked your reported query.  

Query 1 : Display a custom Header template with just an "Add" button without showing the default header for "or" and "and" conditions  

We have checked your reported query. We can achieve your requirement by overriding the default CSS. Please check the below code snippet. 

Code: 

<style> 

 

.e-query-builder .e-group-header .e-btn-group{ 

    display: none !important; 

 

}  

</style> 

Query 2: Adding a blank value template does what I'm intending, however a width of 200px for the "blank div" is added. How can I override it so that that I do not see any large spacing between the operator and "remove condition" button? 

We have checked your reported query. We can achieve your requirement by overriding the default CSS. Please check the below code snippet. 

Code: 

<style> 

 

.e-query-builder .e-group-body .e-rule-value.e-show{ 

    width: 5px !important; 

} 

</style> 

For your requirement, we have prepared a sample . Please check the below link. 

Sample: https://www.syncfusion.com/downloads/support/forum/168680/ze/SEF628~1-428835389 

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

Regards, 

Gayathri K