docs(grid): filter menu template example 2

Author: marin-bratanov

components/grid/templates/filter.md

@@ -21,7 +21,18 @@ There are two different templates you can use depending on the [Filter Mode]({%s
 
 ## Filter Menu
 
-By default, the filter menu contains two filter values that are tied with a logical operator - OR or AND. The filter template for it (`<FilterMenuTemplate>` under the corresponding `<GridColumn>`) provides you with the default composite filter in its `context`, and the `Filter` and `Clear` buttons below the template.
+By default, the filter menu contains two filter values that are tied with a logical operator - OR or AND. The filter template for it (`<FilterMenuTemplate>` under the corresponding `<GridColumn>`) provides you with the default composite filter in the `FilterDescriptor` field of its `context`, and the `Filter` and `Clear` buttons below the template.
+
+You can get started from the following examples:
+
+<!-- Start Document Outline -->
+
+* [Basic Template - Single Filter Operator](#basic-template---single-filter-operator)
+* [Add A Third Filter Operator](#add-a-third-filter-operator)
+
+
+
+### Basic Template - Single Filter Operator
 
 In the example below, you can see how to:
 
@@ -32,7 +43,7 @@ In the example below, you can see how to:
 
 Comments in the code offer more insights into how all the features tie together.
 
->caption Customize Filter Menu operators and value area
+>caption Customize Filter Menu operators and value area to use only one operator
 
 ````CSHTML
 @using Telerik.DataSource
@@ -135,6 +146,260 @@ Comments in the code offer more insights into how all the features tie together.
 
 ![Custom filter menu template](images/filter-menu-template-basic.png)
 
+### Add A Third Filter Operator
+
+In the example below, you can see how to:
+
+* mimic the default behavior (by implementing the default functionality)
+* add a third operator (by adding another instance of the filter operator editor)
+* provide custom filter operators lists and texts (through the data sources of the custom dropdowns)
+
+Comments in the code offer more insights into how all the features tie together.
+
+>caption Add a third filter operator
+
+````CSHTML
+@using Telerik.DataSource
+
+<TelerikGrid Data="@GridData" Pageable="true" Width="300px"
+             FilterMode="@GridFilterMode.FilterMenu">
+    <GridColumns>
+        <GridColumn Field="@nameof(SampleData.UnitsInStock)">
+            <FilterMenuTemplate>
+                @{
+                    UnitsInStockFilterMenuTemplateContext = context;
+
+                    var compositeFilterDescriptor = UnitsInStockFilterMenuTemplateContext.FilterDescriptor as CompositeFilterDescriptor;
+
+                    var descriptor1 = compositeFilterDescriptor.FilterDescriptors.ElementAtOrDefault(0) as FilterDescriptor;
+
+                    var descriptor3 = new FilterDescriptor()
+                    {
+                        Member = descriptor1.Member,
+                        MemberType = descriptor1.MemberType,
+                    };
+
+                    UnitsInStockFilterMenuTemplateContext.FilterDescriptor.FilterDescriptors.Add(descriptor3);
+                }
+
+                @* first filter logic *@
+                <div>
+                    <TelerikDropDownList Data="@UnitsInStockFilterOperators"
+                                         @bind-Value="@UnitsInStockFilterOperator1"
+                                         TextField="@(nameof(FilterOperatorDescriptor.Text))"
+                                         ValueField="@(nameof(FilterOperatorDescriptor.Operator))"
+                                         PopupHeight="auto">
+                    </TelerikDropDownList>
+                </div>
+                <div>
+                    <TelerikNumericTextBox @bind-Value="@UnitsInStockFilterValue1"></TelerikNumericTextBox>
+                </div>
+
+                @* logical operator *@
+                <div>
+                    <TelerikDropDownList @bind-Value="@UnitsInStockFilterLogicalOperator1"
+                                         Data="@FilterLogicalOperators"
+                                         Width="75px" PopupHeight="auto"
+                                         TextField="@nameof(FilterLogicalOperatorDescriptor.Text)"
+                                         ValueField="@nameof(FilterLogicalOperatorDescriptor.Operator)">
+                    </TelerikDropDownList>
+                </div>
+
+                @* second filter logic *@
+                <div>
+                    <TelerikDropDownList Data="@UnitsInStockFilterOperators"
+                                         @bind-Value="@UnitsInStockFilterOperator2"
+                                         TextField="@(nameof(FilterOperatorDescriptor.Text))"
+                                         ValueField="@(nameof(FilterOperatorDescriptor.Operator))"
+                                         PopupHeight="auto">
+                    </TelerikDropDownList>
+                </div>
+                <div>
+                    <TelerikNumericTextBox @bind-Value="@UnitsInStockFilterValue2"></TelerikNumericTextBox>
+                </div>
+
+                @* third filter logic *@
+                <div>
+                    <TelerikDropDownList Data="@UnitsInStockFilterOperators"
+                                         @bind-Value="@UnitsInStockFilterOperator3"
+                                         TextField="@(nameof(FilterOperatorDescriptor.Text))"
+                                         ValueField="@(nameof(FilterOperatorDescriptor.Operator))"
+                                         PopupHeight="auto">
+                    </TelerikDropDownList>
+                </div>
+                <div>
+                    <TelerikNumericTextBox @bind-Value="@UnitsInStockFilterValue3"></TelerikNumericTextBox>
+                </div>
+            </FilterMenuTemplate>
+        </GridColumn>
+        <GridColumn Field="@nameof(SampleData.ProductId)" Filterable="false" />
+    </GridColumns>
+</TelerikGrid>
+
+@code {
+    public List<SampleData> GridData { get; set; } = Enumerable.Range(1, 50).Select(x => new SampleData { ProductId = x, UnitsInStock = x % 10 }).ToList();
+
+    // data sources for the custom filter dropdowns
+    public List<FilterLogicalOperatorDescriptor> FilterLogicalOperators { get; set; }
+    public List<FilterOperatorDescriptor> UnitsInStockFilterOperators { get; set; }
+
+    // the filter template context that lets you customize its filter operators list
+    public FilterMenuTemplateContext UnitsInStockFilterMenuTemplateContext { get; set; }
+
+    // get the filter descriptor list from the context
+    public CompositeFilterDescriptor UnitsInStockCompositeFilterDescriptor
+    {
+        get => UnitsInStockFilterMenuTemplateContext.FilterDescriptor;
+    }
+
+    // custom filter operators- they use two-way binding with the customized components in the template
+    public FilterOperator UnitsInStockFilterOperator1
+    {
+        get => UnitsInStockFilterDescriptor1.Operator;
+        set => UnitsInStockFilterDescriptor1.Operator = value;
+    }
+
+    public FilterOperator UnitsInStockFilterOperator2
+    {
+        get => UnitsInStockFilterDescriptor2.Operator;
+        set => UnitsInStockFilterDescriptor2.Operator = value;
+    }
+
+    public FilterOperator UnitsInStockFilterOperator3
+    {
+        get => UnitsInStockFilterDescriptor3.Operator;
+        set => UnitsInStockFilterDescriptor3.Operator = value;
+    }
+
+    // custom filter values - they use two-way binding with the customized components in the template
+    public short? UnitsInStockFilterValue1
+    {
+        get => (short?)(UnitsInStockFilterDescriptor1.Value);
+        set => UnitsInStockFilterDescriptor1.Value = (short?)value;
+    }
+
+    public short? UnitsInStockFilterValue2
+    {
+        get => (short?)(UnitsInStockFilterDescriptor2.Value);
+        set => UnitsInStockFilterDescriptor2.Value = (short?)value;
+    }
+
+    public short? UnitsInStockFilterValue3
+    {
+        get => (short?)(UnitsInStockFilterDescriptor3.Value);
+        set => UnitsInStockFilterDescriptor3.Value = (short?)value;
+    }
+
+    // logical operator value
+    public FilterCompositionLogicalOperator UnitsInStockFilterLogicalOperator1
+    {
+        get => UnitsInStockCompositeFilterDescriptor.LogicalOperator;
+        set => UnitsInStockCompositeFilterDescriptor.LogicalOperator = value;
+    }
+
+    // shortcuts to get the filter descriptors
+    public FilterDescriptor UnitsInStockFilterDescriptor1 => GetUnitsInStockFilterDescriptor(0);
+
+    public FilterDescriptor UnitsInStockFilterDescriptor2 => GetUnitsInStockFilterDescriptor(1);
+
+    public FilterDescriptor UnitsInStockFilterDescriptor3 => GetUnitsInStockFilterDescriptor(2);
+
+    public FilterDescriptor GetUnitsInStockFilterDescriptor(int index)
+    {
+        var unitsInStockFilter = UnitsInStockFilterMenuTemplateContext.FilterDescriptor;
+        var descriptor = unitsInStockFilter.FilterDescriptors.ElementAtOrDefault(index) as FilterDescriptor;
+        return descriptor;
+    }
+
+
+    // initialize data for the filter operators and logical operators lists
+    protected override async Task OnInitializedAsync()
+    {
+        // filter operators
+        UnitsInStockFilterOperators = GetNumericFilterOperators();
+        // logical operators
+        FilterLogicalOperators = GetFilterLogicalOperators();
+    }
+
+
+
+    // model class for the custom dropdowns with the filter operators
+    public class FilterOperatorDescriptor
+    {
+        public string Text { get; set; } = "Is equal to";
+
+        public FilterOperator Operator { get; set; } = FilterOperator.IsEqualTo;
+    }
+
+    // model class for the dropdowns with logical operators list
+    public class FilterLogicalOperatorDescriptor
+    {
+        public string Text { get; set; }
+
+        public FilterCompositionLogicalOperator Operator { get; set; }
+    }
+
+    // provide a list with the custom logical operators to the template
+    public List<FilterLogicalOperatorDescriptor> GetFilterLogicalOperators()
+    {
+        var data = new List<FilterLogicalOperatorDescriptor>();
+
+        data.Add(new FilterLogicalOperatorDescriptor()
+        {
+            Text = "- OR -",
+            Operator = FilterCompositionLogicalOperator.Or
+        });
+
+        data.Add(new FilterLogicalOperatorDescriptor()
+        {
+            Text = "- AND -",
+            Operator = FilterCompositionLogicalOperator.And
+        });
+
+        return data;
+    }
+
+    // provide a list with the filter operators to the template
+    public List<FilterOperatorDescriptor> GetNumericFilterOperators()
+    {
+        var data = new List<FilterOperatorDescriptor>();
+
+        data.Add(new FilterOperatorDescriptor()
+        {
+            Text = "- DIFFERENT FROM -",
+            Operator = FilterOperator.IsNotEqualTo
+        });
+
+        data.Add(new FilterOperatorDescriptor()
+        {
+            Text = "- LESS THAN -",
+            Operator = FilterOperator.IsLessThan
+        });
+
+        data.Add(new FilterOperatorDescriptor()
+        {
+            Text = "- GREATER THAN -",
+            Operator = FilterOperator.IsGreaterThan
+        });
+
+        return data;
+    }
+
+    // sample model for the grid
+    public class SampleData
+    {
+        public int ProductId { get; set; }
+        public int UnitsInStock { get; set; }
+    }
+}
+````
+
+>caption The result from the code snippet above, after opening the filter menu and applying some filteres
+
+![Three filteres in the filter menu](images/filter-menu-template-three-operators.png)
+
+
+
 
 ## See Also