Blazor Server 6, Radzen DataGrid widht failure, Bootstrap 5

Hi!

I have a project that are a Blazor Server Net 6.0 from scratch.
I tried to include Radzen Datagrid component but can't get width property/style to work.

I'm using net.core 6.0, bootstrap 5, original Blazor template/layout

_Layout.cshtml

<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
    <link rel="stylesheet" href="_content/Radzen.Blazor/css/default.css">
---
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
            integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
            crossorigin="anonymous"></script>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
    
    <script src="_content/Radzen.Blazor/Radzen.Blazor.js"></script>    

On my page

<div class="row">
  <div class="col-12">
    <RadzenPanel>
      <HeaderTeamplate>....</...>
      <ChildContent>
         <RadzenDataGrid AllowColumnRezise="true" ColumnWidth="200px" ...>

This RadzenDataGrid won't adapt the width to the parent RadzenPanel width.
I've tried to set a Class="col-12" and a Style="width: 100vh" and 100% and so on but it will not work.
If I set RadzenPanel Class="col-6" the Grid will be 50% of screenwith (not windowwidth)

I could set a locked pixelwidht but I want it to be responsive.

Is it something with standard Blazor 6.0 template or bootstrap css style that make the Grid component width failure?

Regards
Tobias

Hey Tobias,
I assume you want to make the DataGrid width 100%, right?

If RadzenPanel Class="col-6" resizes the Grid to be 50% of screenwith, that means that the RadzenDataGrid adapts its width to the parent RadzenPanel width (bootstrap's col-6 means 50%). And this is the proper behavior.

  1. Have you tried without setting ColumnWidth="200px"?
  2. Where is the <div class="row"> placed? Have you tried wrapping it in a <div class="container-fluid>". Containers are the most basic layout element in Bootstrap and are required when using bootstrap's layout system. Use .container-fluid for a full width container, spanning the entire width of the viewport. You can read more about containers in the bootstrap docs.

I've tried without "ColumnWidth", and I've tried container-fluid too. Same result.
My columnwidth does not work properly, columnwidth does not setup automatic.

I'm using Blazor server standard "MainLayout.razor" and site.css. Maybe there is something wrong there that make RadzenDataGrid won't behave as it should?

Because of alot of columns, I want the horisontal scrollbar to display but in current div, not at the bottom of the page.

<div class="page">
    <div class="sidebar">
        <NavMenu />
    </div>

    <main>
        <div class="top-row px-4 auth">
            <LoginDisplay />
            <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
        </div>

        <article class="content px-4">
            @Body
        </article>
    </main>
</div>

It is still not clear to me what are you trying to achieve? Perhaps a screenshot might help.

By default the DataGrid should always occupy the full width of its parent container. If there is a scrollbar at the bottom of the page in the browser, then there is something wrong with the layout - either the DataGrid (or one of its parent elements) has a specific width value applied, or there are any additional margins/paddings, or there are any unclosed html tags. What are the values in the [Style] tab in the property grid?

Again, make sure the <div class="row"> is wrapped in a <div class="container-fluid">, or alternatively remove the <div class="row"> <div class="col-12"> altogether.

I found problem in my Blazor template css stylesheet, if I take a clean setup the grid works.

Thanks anyway!

1 Like