Interactive Features

This section explains you how to use context menu, Column Chooser window and RowHeader in SfDatagrid. You can also see the different types of available API, methods and events for Column Chooser window and for row header.

Column Chooser

ColumnChooser allows you to add or remove columns dynamically from the current SfDataGrid view using drag-and-drop operations.

Adding a Default Column Chooser in an application

You can add a Column Chooser in an application by creating an instance for ColumnChooser and GridColumnChooserController class, and then assign the GridColumnChooserController’s instance to GridColumnDragDropController.

The following code example illustrates how to add a default ColumnChooser in an application.

ColumnChooser chooserWindow;

void MainPage_Loaded(object sender, RoutedEventArgs e)

 {

    chooserWindow = new ColumnChooser(this.datagrid);

    this.datagrid.GridColumnDragDropController = new GridColumnChooserController(this.datagrid, chooserWindow);

     chooserWindow.ShowColumnChooser();

 }

The following screenshot illustrates aDefault Column Chooser window.

NOTE

The default Column Chooser displays the empty window when there is no hidden column initially.

Customizing Column Chooser

Customization of ColumnChooser is achieved in the following two ways such as:

UI Customization
Drag and Drop Customization

UI Customization:

Instead of using default ColumnChooser window, you can also select any other panel as column chooser’s window. You can achieve using IColumnChooser interface.

Default ColumnChooser is implemented with this interface for drag-and-drop operation.

Methods in IColumnChooser:

Method	Prototype	Description
AddChild	AddChild(GridColumn column)	Adds a child in the Column Chooser window
RemoveChild	RemoveChild(GridColumn column)	Removes a child from the Column Chooser window.
GetControlRect	GetControlRect()	Returns the Rect structure of the Column Chooser window.

The following code example illustrates how to add and remove a child from Custom Column Chooser panel.

#region IColumnChooser methods

  public class CustomChooser : IColumnChooser

    {



        public CustomChooser(SfDataGrid dataGrid, Panel chooserPanel)

        {

            this.DataGrid = dataGrid;

            this.chooserPanel = chooserPanel as StackPanel;

        }

        StackPanel chooserPanel;

        List<GridColumn> initialChildren = new List<GridColumn>();



#region IColumnChooser methods

        /// <summary>

        /// Adds the Child for the column chooser wherever the column gets hide

        /// </summary>

        /// <param name="column"></param>

        /// <remarks>

        /// chooserPanel is a Panel present in the MainPage of the App

        /// CustomColumnChooserItem is a control which will add or remove to the chooserPanel

        /// </remarks>

        public void AddChild(GridColumn column)

        {

            if (chooserPanel == null)

            {

                initialChildren.Add(column);

                return;

            }

            if (this.chooserPanel.Children.ToList<CustomColumnChooserItem>().All(item => (item as CustomColumnChooserItem).Column.MappingName != column.MappingName) && this.DataGrid.View != null)

            {

                var chooserItem = new CustomColumnChooserItem(column, this.DataGrid)

                { 

                  Height = 40, Width = 200, 

                  Content = column.MappingName, 

                  Background = new SolidColorBrush(Color.FromArgb(0xFF ,0xF9,0xF9,0xF9)), 

                  BorderBrush=new SolidColorBrush(Color.FromArgb(0xFF,0xAD,0xAD,0xAD)),

                  BorderThickness = new Thickness(0,0,0,1) };

                chooserItem.Controller = this.DataGrid.GridColumnDragDropController;

                chooserItem.ColumnName = column.HeaderText;

                this.chooserPanel.Children.Add(chooserItem);

            }

        }



        /// <summary>

        /// Remove the Child for the column chooser wherever the column gets Unhide

        /// </summary>

        /// <param name="column"></param>

        /// <remarks>

        /// chooserPanel is a Panel present in the MainPage of the App

        /// CustomColumnChooserItem is a control which will add or remove to the chooserPanel

        /// </remarks>

        public void RemoveChild(GridColumn column)

        {

            if (this.chooserPanel != null && this.chooserPanel.Children.Count > 0)

            {

               var element = this.chooserPanel.Children.ToList<CustomColumnChooserItem>().FirstOrDefault(item => (item as CustomColumnChooserItem).Column.MappingName == column.MappingName);

                if (element != null)

                    this.chooserPanel.Children.Remove(element);

            }

        }



        /// <summary>

        /// Returns the Rect of the ColumnChooserControl

        /// </summary>

        /// <returns></returns>

        /// <remarks></remarks>

        public Rect GetControlRect()

        {

            return new Rect(this.chooserPanel.TransformToVisual(null).TransformPoint(new Point(0, 0)), this.chooserPanel.DesiredSize);

        }



        #endregion

 }

The following screenshot illustrates a Custom Column Chooser.

Drag and Drop Customization

By default, column drag-and-drop operations are handled by GridColumnDragDropController class. You can achieve drag-and-drop customization by overriding the methods in GridColumnDragDropController class.

Virtual methods in GridColumnDragDropController class are as follows:

Method	Prototype	Description
CanShowPopup	CanShowPopup(GridColumn column)	Returns whether the column shows pop-up for its header or not.
OnColumnHiddenChanged	OnColumnHiddenChanged(GridColumn column)	Occurs when GridColumn’s Hidden property value changes.
OnPopupContentDropped	OnPopupContentDropped(Point point)	Occurs when the dragged pop-up is dropped.
OnPopupContentPositionChanged	OnPopupContentPositionChanged(double HorizontalDelta, double VerticalDelta, Point mousePoint, Point mousePointOverGrid)	Occurs when pop-up position changes while dragging.
PointToGridRegion	PointToGridRegion(Point point)	Called to find the GridRegion at a given point.
CreatePopupContent	CreatePopupContent(GridColumn column)	Called when pop-up content is created.
PopupContentDroppedOnGroupDropArea	PopupContentDroppedOnGroupDropArea(GridColumn column)	Called when a draggable pop-up is dropped on a GroupDropArea part
PopupContentDroppedOnHeaderRow	PopupContentDroppedOnHeaderRow(int oldIndex, int newColumnIndex)	Called when a draggable pop-up is dropped on HeaderRow part
PopupContentDroppedOnGrid	PopupContentDroppedOnGrid(Point point)	Called when a draggable pop-up is dropped on Grid part

GridColumnChooserController:

GridColumnChooserController class plays a vital role in Column Chooser drag-and-drop operation. You can achieve drag-and-drop customization by overriding the GridColumnChooserController methods.

Properties, Methods and Overrides in GridColumnChooserController:

Property	Type	Description	Default Value
AllowHidingForLastColumn	Boolean	Returns whether to add last column in the view of Column Chooser or not	True

Method	Prototype	Description
Show	Show(int colIndex, MouseEventArgs e)	Called to display the pop-up to enable drag operation. Note: This method shows pop-up in handling pointer events.

RowHeader

RowHeader is a special Column used to indicate the row status like CurrentRow, Editing status, Errors in row and etc. You can enable or disable RowHeader using ShowRowHeader property in SfDataGrid.

RowHeader Visibility:

RowHeader does not appear in the visual display of the SfDataGrid. You can set ShowRowHeader to ‘true’ to display it in SfDataGrid. The following code example displays you how to enable RowHeader in SfDataGrid.

xaml

<Page.DataContext>

<local:ViewModel/>

</Page.DataContext>



<syncfusion:SfDataGrid x:Name="dataGrid"

                       ItemsSource="{Binding Path=OrdersDetails}"

                       ShowRowHeader="True"/>

The following screenshot displays a SfDataGrid with a RowHeader:

RowHeader Width:

By default, the RowHeader width value is set to ’45’ (Data Type: double).you can customize the width by setting any desired width as a numeric value to RowHeaderWidth property in SfDataGrid.

xaml

<Page.DataContext>

<local:ViewModel/>

</Page.DataContext>



<syncfusion:SfDataGrid x:Name="dataGrid"

                       ItemsSource="{Binding Path=OrdersDetails}"

                       ShowRowHeader="True"

                       RowHeaderWidth="100"/>

RowHeader Indicators:

The following table lists the different RowHeader indicators.

Row Indicator	Description
	Indicates the current row item.
	Indicates the row is in edit mode.
	Indicates adding a new row.
	Indicates the row has errors. Error is shown when the Model is derived from IDataErrorInfo or INotifyDataErrorInfo.
	Indicates that the current row has errors.

How To

How to display row index in row header

You can also display row index in the row header instead of indicating the status of the row. To display the row index, you have to edit the control template of the GridRowHeaderCell, as shown in the following code example.

xaml

<Page.Resources>

<Style TargetType="syncfusion:GridRowHeaderCell">

    <Setter Property="Background" Value="Transparent" />

    <Setter Property="BorderBrush" Value="#FF7fd0de" />

    <Setter Property="BorderThickness" Value="0,0,1,1" />

    <Setter Property="Template">

        <Setter.Value>

            <ControlTemplate TargetType="syncfusion:GridRowHeaderCell">

                <Border x:Name="PART_RowHeaderCellBorder"

                        Background="{TemplateBinding Background}"

                        BorderBrush="{TemplateBinding BorderBrush}"

                        BorderThickness="{TemplateBinding BorderThickness}">

                        <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center"

                        Text="{Binding Path=RowIndex, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" />

                </Border>

            </ControlTemplate>

        </Setter.Value>

    </Setter>

</Style>

</Page.Resources>

The following screenshot displays a row index in row header.