I defined datagrid with several columns and I set TextAlign for each column. All columns are set according to my settings, only one is not. The last one but it does not meter if I move it to another place, problem persist Header is set to the left but not data. I inspected it in the browser and it appears that html for that column does not have proper css.
<RadzenDataGrid @ref="grid0" ColumnWidth="200px" AllowFiltering="false" FilterMode="FilterMode.Advanced" AllowPaging="false" AllowColumnResize="true" AllowSorting="true" ShowPagingSummary="false" PageSize=10
Data="@bRRDR" TItem="Bezra.Models.BEZRA.BRRDR" RowSelect="@SelRow" RowDoubleClick="@EditRow" Density="@Density.Compact" AllowVirtualization="true" Style="min-width: 1000px; max-width: 100%; height: 200px" Responsive="true"
SelectionMode="DataGridSelectionMode.Single" @bind-Value=@selectedRdr>
I tried to paste image of datagrid but it make a mess all around. This is my source:
<RadzenDataGrid @ref="grid0" ColumnWidth="200px" AllowFiltering="false" FilterMode="FilterMode.Advanced" AllowPaging="false" AllowColumnResize="true" AllowSorting="true" ShowPagingSummary="false" PageSize=10
Data="@bRRDR" TItem="Bezra.Models.BEZRA.BRRDR" RowSelect="@SelRow" RowDoubleClick="@EditRow" Density="@Density.Compact" AllowVirtualization="true" Style="min-width: 1000px; max-width: 100%; height: 200px" Responsive="true"
SelectionMode="DataGridSelectionMode.Single" @bind-Value=@selectedRdr>
<RadzenDataGrid @ref="grid0" ColumnWidth="200px" AllowFiltering="false" FilterMode="FilterMode.Advanced" AllowPaging="false" AllowColumnResize="true" AllowSorting="true" ShowPagingSummary="false" PageSize=10
Data="@bRRDR" TItem="Bezra.Models.BEZRA.BRRDR" RowSelect="@SelRow" RowDoubleClick="@EditRow" Density="@Density.Compact" AllowVirtualization="true" Style="min-width: 1000px; max-width: 100%; height: 200px" Responsive="true"
SelectionMode="DataGridSelectionMode.Single" @bind-Value=@selectedRdr>
<Columns>
<RadzenDataGridColumn TItem="Bezra.Models.BEZRA.BRRDR" Property="RDRID" Title="Radno mesto" Width="40px" TextAlign="TextAlign.Right">
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="Bezra.Models.BEZRA.BRRDR" Property="DATPOC" Title="Početak" FormatString="{0:d}" Width="30px" TextAlign="TextAlign.Center">
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="Bezra.Models.BEZRA.BRRDR" Property="DATEND" Title="Kraj" FormatString="{0:d}" Width="30px" TextAlign="TextAlign.Center">
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="Bezra.Models.BEZRA.BRRDR" Property="RADID" Title="Rad. ID" Width="40px" TextAlign="TextAlign.Right">
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="Bezra.Models.BEZRA.BRRDR" Property="BRRAD.IMEPREZIME" Title="Zaposleni" TextAlign="TextAlign.Left">
</RadzenDataGridColumn>
</Columns>
</RadzenDataGrid>
Sorry
You can try a few things like removing ColumnWidth="200px" and see if removing the min-width: 1000px; max-width: 100%; changes anything.
Thank you for the tip about the source. Unfortunately, I removed ColumnWidth="200px", nothing, I tried with other attributes and achieved nothing. I moved the column around, nothing.
It looks like this
We will need a reproduction as your code alone doesn't reproduce the issue. Everything seems fine when we test in this page.
Here is what we tested:
@using RadzenBlazorDemos.Data
@using RadzenBlazorDemos.Models.Northwind
@using Microsoft.EntityFrameworkCore
@inherits DbContextPage
<RadzenDataGrid
Data="@employees" TItem="Employee" ColumnWidth="200px" AllowFiltering="false" FilterMode="FilterMode.Advanced" AllowPaging="false" AllowColumnResize="true" AllowSorting="true" ShowPagingSummary="false" PageSize=10
Density="@Density.Compact" AllowVirtualization="true" Style="min-width: 1000px; max-width: 100%; height: 200px" Responsive="true" SelectionMode="DataGridSelectionMode.Single">
<Columns>
<RadzenDataGridColumn TItem="Employee" Property="EmployeeID" Filterable="false" Title="ID" Width="40px" TextAlign="TextAlign.Right" />
<RadzenDataGridColumn TItem="Employee" Property="FirstName" Title="First Name" Width="30px" TextAlign="TextAlign.Center"/>
<RadzenDataGridColumn TItem="Employee" Property="LastName" Title="Last Name" Width="30px" TextAlign="TextAlign.Center"/>
<RadzenDataGridColumn TItem="Employee" Property="Title" Title="Job Title" Width="40px" TextAlign="TextAlign.Right" />
<RadzenDataGridColumn TItem="Employee" Property="TitleOfCourtesy" Title="Title" />
</Columns>
</RadzenDataGrid>
@code {
IEnumerable<Employee> employees;
IList<Employee> selectedEmployees;
protected override async Task OnInitializedAsync()
{
await base.OnInitializedAsync();
employees = dbContext.Employees;
selectedEmployees = new List<Employee>(){ employees.FirstOrDefault() };
}
}
I included your code into RadzenBlazorDemos as a new page and I have the same look of this new datagrid as it shown in your attachment. Well I do not know where I go wrong with code or whatever. That was an ordinary datagrid as I have many in my application.
You can inspect the CSS settings that apply to the problematic column. Right click it in your browser and pick "Inspect" or "Inspect element". This should display all CSS attributes that apply to that column. Check the value of the text-align attribute. I suspect some other CSS file or setting changes the text alignment or applies some padding/margin.
Alternatively you could provide us a live URL of your app (you can send it over email) where we can see the issue and check where it comes from.
I already inspect html and css but now I found some time to document this. That column does not receive any css like others do. Well here are the facts. First source.
<RadzenDataGrid @ref="grid0" AllowFiltering="false" FilterMode="FilterMode.Advanced" AllowPaging="false" AllowColumnResize="true" AllowSorting="true" ShowPagingSummary="false" PageSize=10
Data="@bRRDR" TItem="Bezra.Models.BEZRA.BRRDR" RowSelect="@SelRow" RowDoubleClick="@EditRow" Density="@Density.Compact" AllowVirtualization="true" Style="min-width: 1000px; max-width: 100%; height: 200px" Responsive="true"
SelectionMode="DataGridSelectionMode.Single" @bind-Value=@selectedRdr>
<Columns>
<RadzenDataGridColumn TItem="Bezra.Models.BEZRA.BRRDR" Property="RDRID" Title="Radno mesto" Width="150px" TextAlign="TextAlign.Right">
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="Bezra.Models.BEZRA.BRRDR" Property="DATPOC" Title="Početak" FormatString="{0:d}" Width="90px" TextAlign="TextAlign.Center">
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="Bezra.Models.BEZRA.BRRDR" Property="DATEND" Title="Kraj" FormatString="{0:d}" Width="90px" TextAlign="TextAlign.Center">
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="Bezra.Models.BEZRA.BRRDR" Property="RADID" Title="Rad. ID" Width="100px" TextAlign="TextAlign.Right">
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="Bezra.Models.BEZRA.BRRDR" Property="BRRAD.IMEPREZIME" Title="Zaposleni" TextAlign="TextAlign.Left">
</RadzenDataGridColumn>
</Columns>
</RadzenDataGrid>
Then picture of inspect and last browse presentation.
That's expected. The default text-align is left so we don't render it explicitly. Is there a chance you have a global CSS rule which sets text-align: center for all <td> elements? It looks like this.
Yes, you are right. This table is inside RadzenTab and this RadzenTab was defined with text-align: center;. When I remove these settings everything works as it is expected.
Thank you for your patience.