DataGrid Cell Padding

[Kevin Watson]

What is the correct way to remove or change the cell padding in a SfDataGrid?

Thanks

[Vijayarasan Sivanandham]

Hi Kevin Watson,

Your requirement to change the cell padding in SfDataGrid Can be achieved by writing the style for TargetTypes GridHeaderCellControl and GridCell. Refer to the below code snippet,

<!--Set the padding for HeaderCellControl and GridCell-->

 <Style  TargetType="syncfusion:GridHeaderCellControl">

     <Setter Property="Padding" Value="5"/>

 </Style>

 <Style  TargetType="syncfusion:GridCell">

     <Setter Property="Padding" Value="5"/>               

 </Style>

UG Link: UI Customization in WinUI DataGrid control | Syncfusion

Conditional styling in WinUI DataGrid control | Syncfusion

Find the sample demo in the attachment.

Regards,
Vijayarasan S

If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.

Attachment: SfDataGridDemo_54a65aee.zip

[Kevin Watson]

Updated the example to have a padding of "1", but there is still excessive padding for each of the cells. Images attached.

<syncfusion:SfDataGrid x:Name="sfDataGrid"
            AutoGenerateColumns="True"
            AllowEditing="True"
            AllowFiltering="True"
            ItemsSource="{Binding Orders}" >
    <syncfusion:SfDataGrid.Resources>
        <!--Set the padding for HeaderCellControl and GridCell-->
        <Style  TargetType="syncfusion:GridHeaderCellControl">
            <Setter Property="Padding" Value="1"/>
        </Style>
        <Style  TargetType="syncfusion:GridCell">
            <Setter Property="Padding" Value="1"/>
        </Style>
    </syncfusion:SfDataGrid.Resources>
</syncfusion:SfDataGrid>

Thanks for the quick reply and example.

Attachment: PaddingImages_2be70c05.zip

[Vijayarasan Sivanandham]

Kevin Watson,

The reported scenario occurs because the display control has padding in GridColumn. You can overcome this by creating a custom GridCellTextBoxRenderer and customizing the OnInitializeDisplayElement method as shown below.

//Remove existing TextBox Renderer

this.sfDataGrid.CellRenderers.Remove("TextBox");

//Add customized TextBox Renderer

this.sfDataGrid.CellRenderers.Add("TextBox", new GridCellTextBoxRendererExt());

 

// Custom renderer for the text cell

public class GridCellTextBoxRendererExt : GridCellTextBoxRenderer

{

     public override void OnInitializeDisplayElement(DataColumnBase dataColumn, TextBlock uiElement, object dataContext)

     {

         base.OnInitializeDisplayElement(dataColumn, uiElement, dataContext);

         // Set the padding for the TextBlock control in the text cell

         uiElement.Padding = new Thickness(1);

     }

}

In your sample, when using different columns, you need to customize the column type. Please refer to the user documentation below for information on cell renderers based on column types.

UG Link: Column Types in WinUI DataGrid control | Syncfusion

Find the sample demo in the attachment.

If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.

Attachment: SfDataGridDemo_d255f87d.zip