Styles

SfDataGrid allows you to apply style to all of its elements by writing a Style class overriding from DataGridStyle and assigning it to the SfDataGrid.GridStyle property.

The following example explains you how to apply custom style to SfDataGrid.

  • c#
  • //Apply custom style to SfDataGrid from code
    dataGrid.GridStyle = new Dark ();
  • c#
  • //Custom style class
    public class Dark : DataGridStyle
    {
        public Dark()
        {
        }
    
        public override UIColor GetHeaderBackgroundColor()
        {
            return UIColor.FromRGB(15, 15, 15);
        }
    
        public override UIColor GetHeaderForegroundColor()
        {
            return UIColor.FromRGB(255, 255, 255);
        }
    
        public override UIColor GetRecordBackgroundColor()
        {
            return UIColor.FromRGB(43, 43, 43);
        }
    
        public override UIColor GetRecordForegroundColor()
        {
            return UIColor.FromRGB(255, 255, 255);
        }
    
        public override UIColor GetSelectionBackgroundColor()
        {
            return UIColor.FromRGB(42, 159, 214);
        }
    
        public override UIColor GetSelectionForegroundColor()
        {
            return UIColor.FromRGB(255, 255, 255);
        }
    
        public override UIColor GetCaptionSummaryRowBackgroundColor()
        {
            return UIColor.FromRGB(02, 02, 02);
        }
    
        public override UIColor GetCaptionSummaryRowForeGroundColor()
        {
            return UIColor.FromRGB(255, 255, 255);
        }
    
        public override UIColor GetBorderColor()
        {
            return UIColor.FromRGB(81, 83, 82);
        }
    
        public override UIColor GetLoadMoreViewBackgroundColor()
        {
            return UIColor.FromRGB(242, 242, 242);
        }
    
        public override UIColor GetLoadMoreViewForegroundColor()
        {
            return UIColor.FromRGB(34, 31, 31);
        }
    
        public override UIColor GetAlternatingRowBackgroundColor()
        {
            return UIColor.Cyan;
        }
    
    }

    The following picture shows the grid loaded in different styles.

    Applying alternate row style

    SfDataGrid allows you to apply the alternative row style by writing a custom grid style deriving from DataGridStyle and assigning it to the SfDataGrid.GridStyle property.

  • c#
  • //Apply alternative row style
    dataGrid.GridStyle = new CustomStyle ();
    
    // Custom style class
    public class CustomGridStyle : DataGridStyle
    {
        public CustomGridStyle()
        {   
        }
        public override UIColor GetAlternatingRowBackgroundColor()
        {
            return UIColor.Gray;
        }
    }

    Customizing the alternation count

    SfDataGrid allows you to customize the alternate row count for applying the alternate row style using the SfDataGrid.AlternationCount property.

    The below code illustrates how to set the alternate row count.

  • c#
  • //Apply alternative row count
    dataGrid.AlternationCount = 3;

    Border Customization

    • SfDatagrid allows you to customize the grid borders to vertical, horizontal, both or none based on requirements. Override the DataGridStyle.GetGridLinesVisibility method to customize the borders in SfDataGrid.
  • c#
  • //Apply custom style to SfDataGrid from code
    dataGrid.GridStyle = new CustomStyle ();
  • c#
  • //Custom Style class 
    public class CustomStyle : DataGridStyle
    {
        public CustomStyle ()
        {
        }
        public override GridLinesVisibility GetGridLinesVisibility()
        {
            return base.GetGridLinesVisibility();
        }
    }

    Following are the lists of options available to customize the grid borders.

    Both

    • GridLinesVisibility.Both allows you to display the DataGrid with both Horizontal and Vertical borders.
  • c#
  • public override GridLinesVisibility GetGridLinesVisibility()
    {
        return GridLinesVisibility.Both;
    }

    The following screenshot shows the final outcome upon execution of the above code.

    Horizontal

    • GridLinesVisibility.Horizontal allows you to display the DataGrid with Horizontal border only
  • c#
  • public override GridLinesVisibility GetGridLinesVisibility()
    {
        return GridLinesVisibility.Horizontal;
    }

    The following screenshot shows the final outcome upon execution of the above code.

    Vertical

    • GridLinesVisibility.Vertical allows you to display the DataGrid with Vertical border only
  • c#
  • public override GridLinesVisibility GetGridLinesVisibility()
    {
        return GridLinesVisibility.Vertical;
    }

    The following screenshot shows the final outcome upon execution of the above code.

    None

    • GridLinesVisibility.None allows you to display the DataGrid without borders
  • c#
  • public override GridLinesVisibility GetGridLinesVisibility()
    {
        return GridLinesVisibility.None;
    }

    The following screenshot shows the final outcome upon execution of the above code.

    Customizing the sort icons in header

    You can load any desired image as the sort icon in the SfDataGrid using the GetHeaderSortIndicatorDown and GetHeaderSortIndicatorUp overrides of the DataGridStyle class. The following code example illustrates how to change the SortIcon in SfDataGrid.

  • c#
  • //Apply custom style to SfDataGrid from code
    dataGrid.GridStyle = new Custom();
    
    public class Custom : DataGridStyle
    {
    
        public override UIImage GetHeaderSortIndicatorUp()
        {
            return UIImage.FromFile("SortDown.png");
        }
    
        public override UIImage GetHeaderSortIndicatorDown()
        {
            return UIImage.FromFile("SortUp.png");
        }
    
    }

    The following screenshots shows the final outcome of the above code

    NOTE

    The image’s BuildAction must be set to BundleResource so that we can access the image via its name.

    Customizing resizing indicator

    You can change the color of the resizing indicator using the GetResizingIndicatorColor override of the DataGridStyle class. The following code example illustrates how to change the color of the ResizingIndicator in SfDataGrid.

  • c#
  • //Apply custom style to SfDataGrid from code
    dataGrid.GridStyle = new Custom();
    
    public class Custom : DataGridStyle
    {
        public override UIColor GetResizingIndicatorColor()
        {
            return UIColor.Blue;
        }
    }