FilterTemplate does not filter

In the Documentation the example using Filter template in tree grid component is not filtering by the selected value (the error can be reproduced copying and pasting the demo code in a project). Also I saw it does not show how to use the context or if has a PredicateModel like The Grid component.
The tree Grid component will have the Checkbox option like the Grid component? If not how can we filter boleean column in a list or checkboxes

3 Replies 1 reply marked as answer

FS Farveen Sulthana Thameeztheen Basha Syncfusion Team January 20, 2021 04:26 PM UTC

Hi Adriana, 

Thanks for contacting Syncfusion Support. 

Query#:-  I saw it does not show how to use the context or if has a PredicateModel like The Grid component. 
 
We are able to replicate the problem by preparing the sample from using documentation. In order to access the filtered values inside the FilterTemplate, we can use the implicit named parameter context(as like Grid component). You can type cast the context as PredicateModel<T> to get filter values inside template. 

We will correct the documentation to access the filtered values using context and let you know it is refreshed.  Until then, we suggest you to refer below code and sample Link for more information:- 

Refer to the code below:- 
<SfTreeGrid @ref="TreeGrid" DataSource="@TreeGridData" IdMapping="TaskId" ParentIdMapping="ParentId" TreeColumnIndex="1" AllowFiltering="true"> 
    <TreeGridFilterSettings Type="Syncfusion.Blazor.TreeGrid.FilterType.Menu"></TreeGridFilterSettings> 
    <TreeGridColumns> 
        .    .   . 
       <TreeGridColumn Field="Duration" HeaderText="Duration" Width="100" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"> 
            <FilterTemplate> 
                <SfDropDownList Placeholder="Duration" ID="Duration" @bind-Value="@((context as PredicateModel<int?>).Value)" TItem="BusinessObject" TValue="int?" DataSource="@TreeGridData"> 
                    <DropDownListFieldSettings Value="Duration" Text="Duration"></DropDownListFieldSettings> 
                </SfDropDownList> 
            </FilterTemplate> 
        </TreeGridColumn> 
 
         
    </TreeGridColumns> 
</SfTreeGrid> 

Screenshot:- 
 


Query#:- The tree Grid component will have the Checkbox option like the Grid component? If not how can we filter boolean column in a list or checkboxes 
 
We can also place the SfCheckbox inside filterTemplate in TreeGrid component, so that we can filter boolean column. 

Refer to code below:- 
<SfTreeGrid @ref="TreeGrid" DataSource="@TreeGridData" IdMapping="TaskId" ParentIdMapping="ParentId" TreeColumnIndex="1" AllowFiltering="true"> 
    <TreeGridFilterSettings Type="Syncfusion.Blazor.TreeGrid.FilterType.Menu"></TreeGridFilterSettings> 
    <TreeGridColumns> 
          .   .  . 
       <TreeGridColumn Field="Progress" HeaderText="Progress" Width="100" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn> 
        <TreeGridColumn Field="Priority" HeaderText="Priority" Width="60"> 
           <FilterTemplate> 
                 <SfCheckBox ID="Priority" Label="true" TChecked="bool?" @bind-Checked="@((context as PredicateModel<bool?>).Value)"></SfCheckBox> 
           </FilterTemplate> 
        </TreeGridColumn> 
    </TreeGridColumns> 
</SfTreeGrid> 

Screenshot:- 
 


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


Regards, 
Farveen sulthana T 


Marked as answer

AS Adriana Selena Tito Ilasaca replied to Farveen Sulthana Thameeztheen Basha January 20, 2021 05:43 PM UTC

Hi Adriana, 

Thanks for contacting Syncfusion Support. 

Query#:-  I saw it does not show how to use the context or if has a PredicateModel like The Grid component. 
 
We are able to replicate the problem by preparing the sample from using documentation. In order to access the filtered values inside the FilterTemplate, we can use the implicit named parameter context(as like Grid component). You can type cast the context as PredicateModel<T> to get filter values inside template. 

We will correct the documentation to access the filtered values using context and let you know it is refreshed.  Until then, we suggest you to refer below code and sample Link for more information:- 

Refer to the code below:- 
<SfTreeGrid @ref="TreeGrid" DataSource="@TreeGridData" IdMapping="TaskId" ParentIdMapping="ParentId" TreeColumnIndex="1" AllowFiltering="true"> 
    <TreeGridFilterSettings Type="Syncfusion.Blazor.TreeGrid.FilterType.Menu"></TreeGridFilterSettings> 
    <TreeGridColumns> 
        .    .   . 
       <TreeGridColumn Field="Duration" HeaderText="Duration" Width="100" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"> 
            <FilterTemplate> 
                <SfDropDownList Placeholder="Duration" ID="Duration" @bind-Value="@((context as PredicateModel<int?>).Value)" TItem="BusinessObject" TValue="int?" DataSource="@TreeGridData"> 
                    <DropDownListFieldSettings Value="Duration" Text="Duration"></DropDownListFieldSettings> 
                </SfDropDownList> 
            </FilterTemplate> 
        </TreeGridColumn> 
 
         
    </TreeGridColumns> 
</SfTreeGrid> 

Screenshot:- 
 


Query#:- The tree Grid component will have the Checkbox option like the Grid component? If not how can we filter boolean column in a list or checkboxes 
 
We can also place the SfCheckbox inside filterTemplate in TreeGrid component, so that we can filter boolean column. 

Refer to code below:- 
<SfTreeGrid @ref="TreeGrid" DataSource="@TreeGridData" IdMapping="TaskId" ParentIdMapping="ParentId" TreeColumnIndex="1" AllowFiltering="true"> 
    <TreeGridFilterSettings Type="Syncfusion.Blazor.TreeGrid.FilterType.Menu"></TreeGridFilterSettings> 
    <TreeGridColumns> 
          .   .  . 
       <TreeGridColumn Field="Progress" HeaderText="Progress" Width="100" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn> 
        <TreeGridColumn Field="Priority" HeaderText="Priority" Width="60"> 
           <FilterTemplate> 
                 <SfCheckBox ID="Priority" Label="true" TChecked="bool?" @bind-Checked="@((context as PredicateModel<bool?>).Value)"></SfCheckBox> 
           </FilterTemplate> 
        </TreeGridColumn> 
    </TreeGridColumns> 
</SfTreeGrid> 

Screenshot:- 
 


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


Regards, 
Farveen sulthana T 


Thanks using the predicate model works perfectly. Just using checkboxes only render a true option if I add other checkboxes false and All how should this be binded


FS Farveen Sulthana Thameeztheen Basha Syncfusion Team January 21, 2021 03:27 PM UTC

Hi Adriana, 

Thanks for your update. 

Query#:- Just using checkboxes only render a true option if I add other checkboxes false and All how should this be binded.  
 
Thanks for your update. In the previous update, we have explained about how to use Predicate model(to access the filtered values) in FilterTemplate. If you want CheckBox with True and False values, you can simply place FilterType as CheckBox of FilterSettings property of TreeGrid columns. Using this FilterSettings property we can set different FilterType such as Menu, Excel and CheckBox for different columns in same TreeGrid. 
 
#Solution1:- 
Refer to the code below:- 
<SfTreeGrid @ref="TreeGrid" DataSource="@TreeGridData" IdMapping="TaskId" ParentIdMapping="ParentId" TreeColumnIndex="1" AllowFiltering="true"> 
    <TreeGridFilterSettings Type="Syncfusion.Blazor.TreeGrid.FilterType.Menu"></TreeGridFilterSettings> 
    <TreeGridColumns> 
        <TreeGridColumn Field="TaskId" HeaderText="Task ID" Width="80" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn> 
         
        <TreeGridColumn Field="Priority" HeaderText="Priority" Width="60" FilterSettings="@(new   Syncfusion.Blazor.Grids.FilterSettings{ Type = Syncfusion.Blazor.Grids.FilterType.CheckBox })"></TreeGridColumn> 
         
    </TreeGridColumns> 
</SfTreeGrid> 
 
 
 
#Solution2:-  
Or else we can also show Boolean values(with FilterTemplate using SfRadioButton) with true and false values. 

<SfTreeGrid @ref="TreeGrid" DataSource="@TreeGridData" IdMapping="TaskId" ParentIdMapping="ParentId" TreeColumnIndex="1" AllowFiltering="true"> 
    <TreeGridFilterSettings Type="Syncfusion.Blazor.TreeGrid.FilterType.Menu"></TreeGridFilterSettings> 
    <TreeGridColumns> 
      
        <TreeGridColumn Field="Priority" HeaderText="Priority" Width="60"> 
            <FilterTemplate> 
                <SfRadioButton Label="true" Name="options" Value="true" @bind-Checked="@((context as PredicateModel<bool?>).Value)"></SfRadioButton> 
                <SfRadioButton Label="false" Name="options" Value="false" @bind-Checked="@((context as PredicateModel<bool?>).Value)"></SfRadioButton> 
            </FilterTemplate> 
        </TreeGridColumn> 
    </TreeGridColumns> 
</SfTreeGrid> 

Refer to the Screenshot:- 
 

You can use anyone of the above solution to accomplish your requirement. Please get back to us if you are facing any difficulties on this. 

Regards, 
Farveen sulthana T 


Loader.
Up arrow icon