Composite columns issue

Hi,

I'm trying to create a DataGrid as in the example.

<RadzenDataGrid Data="@_details" TItem="Detail" Style="width: 1800px; margin: auto" ColumnWidth="300px">
	<Columns>
		<RadzenDataGridColumn TItem="Detail" Property="@nameof(Detail.Column1)" Title="Column1" TextAlign="TextAlign.Center" />
		<RadzenDataGridColumn TItem="Detail" Property="@nameof(Detail.Column2)" Title="Column2" TextAlign="TextAlign.Center" />
		<RadzenDataGridColumn TItem="Detail" Property="@nameof(Detail.Column3)" Title="Column3" TextAlign="TextAlign.Center" />
		<RadzenDataGridColumn TItem="Detail" Title="Column4" TextAlign="TextAlign.Center">
			<Columns>
				<RadzenDataGridColumn TItem="Detail" Property="@nameof(Detail.Column4a)" Title="Column4a" TextAlign="TextAlign.Center" />
				<RadzenDataGridColumn TItem="Detail" Property="@nameof(Detail.Column4b)" Title="Column4b" TextAlign="TextAlign.Center" />
			</Columns>
		</RadzenDataGridColumn>
		<RadzenDataGridColumn TItem="Detail" Title="Column5" TextAlign="TextAlign.Center">
			<Columns>
				<RadzenDataGridColumn TItem="Detail" Property="@nameof(Detail.Column5a)" Title="Column5a" TextAlign="TextAlign.Center" />
				<RadzenDataGridColumn TItem="Detail" Property="@nameof(Detail.Column5b)" Title="Column5b" TextAlign="TextAlign.Center" />
				<RadzenDataGridColumn TItem="Detail" Property="@nameof(Detail.Column5c)" Title="Column5c" TextAlign="TextAlign.Center" />
			</Columns>
		</RadzenDataGridColumn>
		<RadzenDataGridColumn TItem="Detail" Title="Column6" TextAlign="TextAlign.Center">
			<Columns>
				<RadzenDataGridColumn TItem="Detail" Title="Column6a" TextAlign="TextAlign.Center">
					<Columns>
						<RadzenDataGridColumn TItem="Detail" Property="@nameof(Detail.Column6a1)" Title="Column6a1" TextAlign="TextAlign.Center" />
						<RadzenDataGridColumn TItem="Detail" Property="@nameof(Detail.Column6a2)" Title="Column6a2" TextAlign="TextAlign.Center" />
						<RadzenDataGridColumn TItem="Detail" Property="@nameof(Detail.Column6a3)" Title="Column6a3" TextAlign="TextAlign.Center" />
					</Columns>
				</RadzenDataGridColumn>
				<RadzenDataGridColumn TItem="Detail" Title="Column6b" TextAlign="TextAlign.Center">
					<Columns>
						<RadzenDataGridColumn TItem="Detail" Property="@nameof(Detail.Column6b1)" Title="Column6b1" TextAlign="TextAlign.Center" />
					</Columns>
				</RadzenDataGridColumn>
				<RadzenDataGridColumn TItem="Detail" Property="@nameof(Detail.Column6c)" Title="Column6c" TextAlign="TextAlign.Center" />
			</Columns>
		</RadzenDataGridColumn>
	</Columns>
</RadzenDataGrid>

@code {
	IEnumerable<Detail> _details;

	protected override void OnInitialized()
	{
		_details = new[]
				{
			new Detail
			{
				Column1 = RandomString.GenerateAlphanumeric(),
				Column2 = RandomString.GenerateAlphanumeric(),
				Column3 = RandomString.GenerateAlphanumeric(),
				Column4a = RandomString.GenerateAlphanumeric(),
				Column4b = RandomString.GenerateAlphanumeric(),
				Column5a = RandomString.GenerateAlphanumeric(),
				Column5b = RandomString.GenerateAlphanumeric(),
				Column5c = RandomString.GenerateAlphanumeric(),
				Column6a1 = RandomString.GenerateAlphanumeric(),
				Column6a2 = RandomString.GenerateAlphanumeric(),
				Column6a3 = RandomString.GenerateAlphanumeric(),
				Column6b1 = RandomString.GenerateAlphanumeric(),
				Column6c = RandomString.GenerateAlphanumeric()
			}
		};
	}

	internal class Detail
	{
		public string Column1 { get; set; }
		public string Column2 { get; set; }
		public string Column3 { get; set; }
		public string Column4a { get; set; }
		public string Column4b { get; set; }
		public string Column5a { get; set; }
		public string Column5b { get; set; }
		public string Column5c { get; set; }
		public string Column6a1 { get; set; }
		public string Column6a2 { get; set; }
		public string Column6a3 { get; set; }
		public string Column6b1 { get; set; }
		public string Column6c { get; set; }
	}
}

It ends up like this:

Even though I set the width per column, it's not rendered properly.

I'm not sure if I'm using it wrong or it has a bug since it's a new feature. I came across Radzen yesterday so it's pretty new to me. :blush:

1 Like

This setting will be applied to all columns and since in this case some columns have child columns the width cannot be strictly 300px.

Thanks for quick response. I had tried it and it didn't work either. Let me show you how it's rendered in this case.

I added the width per column except parent header.

<RadzenDataGrid Data="@_details" TItem="Detail" Style="width: 1800px; margin: auto">
	<Columns>
		<RadzenDataGridColumn TItem="Detail" Property="@nameof(Detail.Column1)" Title="Column1" Width="200px" TextAlign="TextAlign.Center" />
		<RadzenDataGridColumn TItem="Detail" Property="@nameof(Detail.Column2)" Title="Column2" Width="200px" TextAlign="TextAlign.Center" />
		<RadzenDataGridColumn TItem="Detail" Property="@nameof(Detail.Column3)" Title="Column3" Width="200px" TextAlign="TextAlign.Center" />
		<RadzenDataGridColumn TItem="Detail" Title="Column4" TextAlign="TextAlign.Center">
			<Columns>
				<RadzenDataGridColumn TItem="Detail" Property="@nameof(Detail.Column4a)" Width="200px" Title="Column4a" TextAlign="TextAlign.Center" />
				<RadzenDataGridColumn TItem="Detail" Property="@nameof(Detail.Column4b)" Width="200px" Title="Column4b" TextAlign="TextAlign.Center" />
			</Columns>
		</RadzenDataGridColumn>
		<RadzenDataGridColumn TItem="Detail" Title="Column5" TextAlign="TextAlign.Center">
			<Columns>
				<RadzenDataGridColumn TItem="Detail" Property="@nameof(Detail.Column5a)" Width="200px" Title="Column5a" TextAlign="TextAlign.Center" />
				<RadzenDataGridColumn TItem="Detail" Property="@nameof(Detail.Column5b)" Width="200px" Title="Column5b" TextAlign="TextAlign.Center" />
				<RadzenDataGridColumn TItem="Detail" Property="@nameof(Detail.Column5c)" Width="200px" Title="Column5c" TextAlign="TextAlign.Center" />
			</Columns>
		</RadzenDataGridColumn>
		<RadzenDataGridColumn TItem="Detail" Title="Column6" TextAlign="TextAlign.Center">
			<Columns>
				<RadzenDataGridColumn TItem="Detail" Title="Column6a" TextAlign="TextAlign.Center">
					<Columns>
						<RadzenDataGridColumn TItem="Detail" Property="@nameof(Detail.Column6a1)" Width="200px" Title="Column6a1" TextAlign="TextAlign.Center" />
						<RadzenDataGridColumn TItem="Detail" Property="@nameof(Detail.Column6a2)" Width="200px" Title="Column6a2" TextAlign="TextAlign.Center" />
						<RadzenDataGridColumn TItem="Detail" Property="@nameof(Detail.Column6a3)" Width="200px" Title="Column6a3" TextAlign="TextAlign.Center" />
					</Columns>
				</RadzenDataGridColumn>
				<RadzenDataGridColumn TItem="Detail" Title="Column6b" TextAlign="TextAlign.Center">
					<Columns>
						<RadzenDataGridColumn TItem="Detail" Property="@nameof(Detail.Column6b1)" Width="200px" Title="Column6b1" TextAlign="TextAlign.Center" />
					</Columns>
				</RadzenDataGridColumn>
				<RadzenDataGridColumn TItem="Detail" Property="@nameof(Detail.Column6c)" Width="200px" Title="Column6c" TextAlign="TextAlign.Center" />
			</Columns>
		</RadzenDataGridColumn>
	</Columns>
</RadzenDataGrid>

The result is:

Even though I set the width 200px per column, not all of them have that width.

Maybe you need to remove the width set for the entire component. Radzen DataGrid is using table-layout: fixed and columns Width is rendered as style="width: XXX" for cells - how HTML table will distribute width across columns can be found here:
https://drafts.csswg.org/css2/#width-layout

I have removed 'width: 1800px' and nothing has changed unfortunately.

I suggest you to check my previous reply. Here is a illustration with plain HTML table, the header cell width is set to 200px however it is not rendered with such width:

I have removed all width sets from the entire component except for Style="width: 1800px". The screen width is equally distributed among the columns now, which is good. However I still need Style=width because when I resize the browser, the columns are re-rendered based on the new width. Therefore they are getting even smaller. I want a horizontal scroll to appear, which it does but it is of the browser, not of the DataGrid.
I don't think DataGrid's scrollbar will appear without widths. Am I wrong?

I have added more columns. This is how it's look like now:


Only the first column has a fixed width.

The problem solved! I have overridden some css classes and now the horizontal scroll bar also appears. I have added this;

.rz-grid-table {
    width: auto;
}

td {
    min-width: 70px;
}