Shift Columns Entire Grid to Left

[slynch]

Is there a way to have all columns shift to the left, not headers and column text, the entire grid body?  I looks like the grid is always centered, I want to move the red space all the way to the right and the headers and columns to the left where the red space is.

[Vignesh Natarajan]

Hi Stephen,  

 

Thanks for contacting Syncfusion support.  

 

Query: “ I want to move the red space all the way to the right and the headers and columns to the left where the red space is.” 

 

We have achieved your requirement to shift the command columns to left using CustomAttributes property of GridColumn. Using CustomAttributes, we have added class to that particular column and changed the alignment of the column using CSS property text-align.  

 

Refer the below code example  

 

<SfGrid DataSource="@Orders" AllowPaging="true" Height="315"> 

    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true"></GridEditSettings> 

    <GridColumns> 

        <GridColumn HeaderText="Manage Records" CustomAttributes="@(new Dictionary<string, object>(){ { "class", "e-attr" }})" HeaderTextAlign="TextAlign.Left" Width="150"> 

            <GridCommandColumns> 

                <GridCommandColumn Type="CommandButtonType.Edit" ButtonOption="@(new CommandButtonOptions() { IconCss = "e-icons e-edit", CssClass = "e-flat" })"></GridCommandColumn> 

            </GridCommandColumns> 

        </GridColumn> 

    </GridColumns> 

</SfGrid> 

<style> 

    .e-grid .e-gridheader .e-headercell.e-attr .e-headercelldiv,  

    .e-grid .e-gridcontent .e-rowcell.e-unboundcell.e-attr { 

     text-align: left !important; 

    } 

</style> 

 

 

Refer the below screenshot for the output of above code example  

 

 

 

Refer our ug documentation for your reference 

 

https://blazor.syncfusion.com/documentation/datagrid/cell/#custom-attributes  

 

Please get back to us if you have further queries.  

 

Regards, 

Vignesh Natarajan