Show FilterToggleButton only when there is filter applied

[Sergey Salnikov]

Hi.

In SFDataGrid control I need to allow a user to apply filters on columns, but a FilterButton in header of column must not be shown, when there is no filter applied (just likewise sorting indicator is shown only when column included in sorting and hidden otherwise). And since FilterToggleButton used not only for indicating filter presence but also for applying filter, it is necessary to provide a convinient way to add filter for column when button is hidden.

There are two acceptable solutions for that requirement:

1. One can show FilterToggleButton when mouse cursor is over the column header.

2. One can add command "Apply filter for column" in context menu of the column header.

Unfortunately, I stuck in both ways.

1. I've tried to change ControlTemplate for GridHeaderCellControl, adding trigger:

  <MultiTrigger>

    <MultiTrigger.Conditions>

      <Condition Property="FilterIconVisiblity" Value="Visible"/>

      <Condition Property="IsMouseOver" Value="true"/>

    </MultiTrigger.Conditions>

    <Setter TargetName="PART_FilterToggleButton" Property="Visibility" Value="Visible"/>

  </MultiTrigger>

Thus, I've got that FilterButton is shown only when mouse cursor is over column header. But I can't add condition for filter presence, because property GridHeaderCellControl.IsFilterApplied is protected. So when filter is applied, user can't see it until he moves cursor over column header. It's not appropriate.

2. I've changed ControlTemplate for FilterToggleButton, and hid the path "PART_FilterToggleButtonIndicator" when VisualState is "UnFiltered". And in header context menu I've added item "Apply filter for column", but in it's handler I can't show FilterPopupControl, because method GridHeaderCellControl.OpenFilterPopUp() for some unknown reason is protected too.

Please, help me to find a solution for this requirement.

[Jai Ganesh S]

Hi Sergey, 

 

You can achieve your requirement for showing the FilterToggleButton (if you set AllowFiltering as true) when mouse over on the column by customize the GridHeaderCellRenderer and GridHeaderCellControl like below, 

 

Customize GridHeaderCellRenderer: 

datagrid.CellRenderers.Remove("Header"); 

datagrid.CellRenderers.Add("Header", new GridDataHeaderCellRendererExt()); 

 

public class GridDataHeaderCellRendererExt : GridDataHeaderCellRenderer 

    { 

        protected override Syncfusion.UI.Xaml.Grid.GridHeaderCellControl OnCreateEditUIElement() 

        { 

            return new GridHeaderCellControlExt(); 

        } 

 

        public override void OnUpdateEditBinding(Syncfusion.UI.Xaml.Grid.DataColumnBase dataColumn, Syncfusion.UI.Xaml.Grid.GridHeaderCellControl element, object dataContext) 

        { 

            base.OnUpdateEditBinding(dataColumn, element, dataContext); 

            element.FilterIconVisiblity = System.Windows.Visibility.Collapsed; 

        } 

    } 

 

Customize GridHeaderCellControl: 

public class GridHeaderCellControlExt:GridHeaderCellControl 

    { 

        public GridHeaderCellControlExt() 

            : base() 

        { 

             

        } 

 

        protected override void OnMouseEnter(System.Windows.Input.MouseEventArgs e) 

        { 

            base.OnMouseEnter(e); 

 

            if(this.DataGrid.AllowFiltering && Column.AllowFiltering) 

               this.FilterIconVisiblity = System.Windows.Visibility.Visible; 

            else if(this.DataGrid.AllowFiltering && !Column.AllowFiltering) 

                this.FilterIconVisiblity = System.Windows.Visibility.Collapsed; 

            else if(!this.DataGrid.AllowFiltering && Column.AllowFiltering) 

                this.FilterIconVisiblity = System.Windows.Visibility.Visible; 

            else 

                this.FilterIconVisiblity = System.Windows.Visibility.Collapsed; 

        } 

 

        protected override void OnMouseLeave(System.Windows.Input.MouseEventArgs e) 

        { 

            base.OnMouseLeave(e); 

 

            if(Column.FilterPredicates.Count!=0) 

                this.FilterIconVisiblity = System.Windows.Visibility.Visible; 

            else 

                this.FilterIconVisiblity = System.Windows.Visibility.Collapsed; 

        } 

    } 

 

You can also allow to shoe the FilterToggleButton when the filter was applied by wiring the FilterChanged event like below, 

 

this.datagrid.FilterChanged += datagrid_FilterChanged; 

 

void datagrid_FilterChanged(object sender, Syncfusion.UI.Xaml.Grid.GridFilterEventArgs e) 

        { 

            var headerRowBase = this.datagrid.GetRowGenerator().Items.FirstOrDefault(row => row.RowIndex == this.datagrid.GetHeaderIndex()); 

 

            var columnBase = (headerRowBase as DataRowBase).VisibleColumns.FirstOrDefault(col => col.GridColumn != null && col.GridColumn.MappingName.Equals(e.Column.MappingName)); 

            if (e.Column.FilterPredicates.Count != 0) 

            { 

                (columnBase.ColumnElement as GridHeaderCellControl).FilterIconVisiblity = Visibility.Visible; 

            } 

            else 

                (columnBase.ColumnElement as GridHeaderCellControl).FilterIconVisiblity = Visibility.Collapsed; 

        } 

 

Sample: http://www.syncfusion.com/downloads/support/directtrac/156850/ze/SfGridFilterDemo-2064459096 

 

In the above sample, we have shown the FilterToggleButton based on the following conditions, 

 

1.       Column AllowFiltering = False --> Icon is always hidden even if the mouse is over the Header. 

 

2.       Column AllowFiltering = True + Mouse over Header --> the icon is visible 

 

3.       Column AllowFiltering = True + Mouse outside the header --> the icon stays is visible if the column is filtered otherwise it is hidden.  

 

 

Regards, 

Jai Ganesh S 

 

[Sergey Salnikov]

Thank you. This completely solve my problem.

But just in case I wish to ask one more question about second scenario - to open filter popup thru context menu. Is it possible or not?

With your solution it's now easy to redefine protected method GridHeaderCellControl.OpenFilterPopUp as public in our GridHeaderCellControlExt:

        public void OpenFilterPopup()

        {

            base.OpenFilterPopUp();

        }

But calling it from context menu does not open popup. Am I doing something wrong or is there no such possibility in principle?

Regards,

Sergey.

[Jai Ganesh S]

Hi Sergey, 

 

You can achieve your requirement to open the Filter popup through context menu by customizing the GridHeaderCellControl like below, 

 

public class GridHeaderCellControlExt:GridHeaderCellControl 

    { 

        public GridHeaderCellControlExt() 

            : base() 

        { 

             

        } 

 

        public void OpenFilterPopup() 

        { 

           this.FilterToggleButton.IsChecked = true; 

           base.OpenFilterPopUp(); 

        } 

    } 

 

 

 

private static void OnFilterPopupOpened(object obj) 

        { 

            if (obj is GridColumnContextMenuInfo) 

            { 

                var dataGrid = (obj as GridColumnContextMenuInfo).DataGrid; 

 

                var column = (obj as GridColumnContextMenuInfo).Column; 

                

                

                (dataGrid.GetHeaderCell(column) as GridHeaderCellControlExt).OpenFilterPopup(); 

            } 

        } 

 

Sample: http://www.syncfusion.com/downloads/support/directtrac/156356/ze/SfGridFilterDemo649493208 

 

Regards, 

Jai Ganesh S 

[Sergey Salnikov]

One more time thank you.

The sample is very helpful.

[Ashwini Paranthaman]

Hi Sergey, 

We are glad that you requirement has been met. 

Please let us know if you need any other assistance. 

Regards, 

Ashwini P.