Datagrid Buttons +

Hi,

any help to fix that ? "AddButton" I wish to be top or bot of "AllowColumnPicking"

.rz-grid-table { width: unset; } .rz-custom-header { flex: 1; }

<RadzenDataGrid @ref="grid" AllowColumnPicking="true" ....>

<HeaderTemplate>
            <RadzenButton ButtonStyle="ButtonStyle.Success" Icon="add_circle_outline" class="mt-2 mb-4" Text="Add New Order" Click="@InsertRow"/>
    <RadzenButton Text="X" Click="@OnlyX" />
    <RadzenButton Text="AllColumn" Click="@AllColumn" />
    <RadzenStack AlignItems="AlignItems.End">
        <RadzenButton Text="AddColumn" Click="@AddColumn" />
    </RadzenStack>
    
</HeaderTemplate>

Hi @lavazza,

You can try the following CSS:

.rz-group-header {
    flex-wrap: wrap;
    row-gap: 0.5rem;
}

.rz-custom-header {
    flex-basis: 100%;
}

This should place all buttons on a single line above the column picker.

To place the buttons below the column picker, add order:

.rz-custom-header {
    order: 1;
}

Hi,

close but "allowcolumn" move to left side

and what about this solution (how to make this?)

below script `

<RadzenButton ButtonStyle="ButtonStyle.Success" Icon="add_circle_outline" class="mt-2 mb-4" Text="Add New Order" Click="@InsertRow"/>
<RadzenButton Text="X" Click="@OnlyX" />
<RadzenButton Text="AllColumn" Click="@AllColumn" />
<RadzenStack AlignItems="AlignItems.End">
 
   
    <RadzenButton Text="AddColumn" Click="@AddColumn" />
    <RadzenTextBox Change=@OnChange Visible="vis" />
    <RadzenButton Text="Add" Click="@OnChange" Visible="vis" />
</RadzenStack>

`

Why do you need to place all this functionality inside the DataGrid Header, instead of placing it above the DataGrid? The layout you are referring to is achievable inside the Header, but requires additional styling customisations, that I personally don't find feasible given the screenshots, especially if you are after some layout responsiveness.

I'd suggest you have a look at these demos to see how to organize your buttons in a responsive layout above the DataGrid.

In addition, if you are wondering what the difference is between RadzenStack and RadzenRow/Column, see this thread - RadzenStacks for everything?