I noticed that when I specify a height and the scrollbar appears that the header columns are now no longer alighned with the columns. Is there something I specifically need to set now the the scrollbar appears ? I am currently not using any headertemplates just simply RadzenGridColumns.
Thanks,
The main difference with mine is im using server side so I have to specify the totalcount and not use pagesize. Also mine is a page within the default blazor application template when a new project is created in visual studio so maybe there is a styling conflict with the out of the box css ?
In my opinion this is not related.
Is that demo project something I could download and run.I tried commenting out the css so its the grid only and I stil have problems with alignment.
The source code of our demos is here:
Thanks for providing the link and assistance. The example in the Radzen project works as expected so it must be something where Im either missing a style that is inherited elsewhere or a css conflict.
I am using a Web Assembly Client/Server project with service worker and when I remove all of my css references inside the index.html and simply try to use default.css or default-base.css the grid still becomes unaligned when the data renders.
I inspected the html elements and compared the rendering to the the Radzen project and it looks identical.
Could there be something with the async override task I use to capture the data as opposed to the standard override in the radzen project ?
I use the protected override async Task OnInitializedAsync task to retrieve the data that is bound to the grid. Where as the sample in the Radzen project is using: protected override void OnInitialized
Thanks,
Actually I just tried to make mock data so I could have my results come back instantly where it would normally take 3-4 seconds due to the complexity of my query and the grid now renders without any alignment problems.
But if I put the code to do the query back while still using the mocked data then the grid alignment problems return.
So something in the delay seems to be affecting the DOM or styling for the grid. Any thoughts on that ?
Thanks
I had the same Problem, but only if one of the columns has auto-width (in this example the first one) and there is a scrollbar:
The reason is, that the header and body are two different table elements, and the former does not know if the later has a scrollbar, as a result the auto widths differ.
In another thread someone proposed setting the table body's div width to 101% (probably something like calc(100% + 16px) would by better), but this only works if you always have a scrollbar - so no filtering for you!
Better adjust the last column in the table body to fit the scrollbar in js code:
function adjustHeaderForScrollbar(gridName) {
let tableHeader = $("#" + gridName + " .ui-datatable-scrollable-header-box>table");
let tableData = $("#" + gridName + " .ui-datatable-scrollable-table-wrapper>table");
let scrollbarWidth = tableHeader.width() - tableData.width();
let lastColumnHeader = tableHeader.children().last().children().first().children().last();
let lastColumnData = $("td:not(.ui-datatable-emptymessage):last-child", tableData);
if (lastColumnData.length > 0)
$("col:last-child", tableData).width(lastColumnHeader.prop("offsetWidth") - scrollbarWidth);
}
and call it the OnRender event of the grid:
private async void OnRender(GridRenderEventArgs<Checklist> args)
{
await js.InvokeVoidAsync("adjustHeaderForScrollbar", args.Grid.UniqueID);
}
Regards
Peter
Hi Radzen Team,
Was wondering if you have a tweak for the header misalignment. This usually happens when you have a horizontal bar and vertical bar and you've scrolled to the last column.
Thanks.
This screenshot is from an Angular demo which uses a third party grid component. If you reproduce this problem in our Blazor demos please let us know.
Hi korchev,
Here's a screenshot from a blazor project I'm working on.
Was also able to replicate it from Blazor Samples, https://blazor.radzen.com/datagrid-odata. I had to filter the data first and make sure that no records are displayed, clear the filter, then scroll the horizontal bar to the last column.
Thanks.
Will be fixed in the next update later today.
