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.


    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.

    How to

    Change the Sorting Icon in column headers

    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.

    Change the color of the 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;
        }
    }