DataGrid show gridlines and resizing column width

Full code is at the bottom. I have two questions.

  1. how to show gridlines? All the examples show no gridlines, and the only example I could find that has gridlines was this one, but I don't know which part of it makes the gridlines. I tried Class="m-4", but that did not work.

    I.e., instead of like this


    I want this

  2. Column-resizing malfunctions if the columns have predefined width. If it were WinForms, I can set column width and can still let users adjust the width at runtime. But if I tried to do it in Radzen, the cursor jumps to a weird position and resizing is not done.

    Can't I get WinForm's ListView like behaviour? To see the behaviour difference see these screen captures (this forum does not allow mp4 attachments, so I had to use imgur).

    https://imgur.com/a/yVosBpn


full code

@page "/"

<PageTitle>Index</PageTitle>
<RadzenDataGrid AllowSorting="true" PageSize="5" AllowPaging="true"
                AllowColumnResize="true"
            ColumnWidth="200px"
             Class="m-4"
                PagerHorizontalAlign="HorizontalAlign.Left" ShowPagingSummary="true"
                Data="@dogs" TItem="Dog">
  <Columns>
    <RadzenDataGridColumn TItem="Dog" Property="Name" Title="Name"/>
    <RadzenDataGridColumn TItem="Dog" Property="Age" Title="Age" />

  </Columns>
</RadzenDataGrid>
@code {
  class Dog
  {
    public string Name{ get; set; }
    public int Age{ get; set; }
  }

  IEnumerable<Dog> dogs;

  protected override async Task OnInitializedAsync()
  {
    await base.OnInitializedAsync();

    var dogs = new List<Dog>();
    for(int i=0; i< 100; i++)
    {
      dogs.Add(new Dog() { Name = "Shiba" + i, Age = i });
    }
    this.dogs = dogs;
  }
}

Hi @freeloader,

Column resizing should work when the width of all columns is set. This is done in our resizing online demo. Does it work as expected for you?

Grid lines are currently theme specific. Some themes (Material, Fluent) have grid lines disabled as per specification of the design system they implement. In a few cases there is an exception though - frozen cells and composite cells always have a border. We may implement a new feature that would allow you to turn on grid lines in all themes. Until then you can use this CSS snippet to add borders:

.rz-grid-table .rz-data-row td:not(:last-child) {
    border-right: var(--rz-grid-frozen-cell-border);
    border-right-width: 1px;
    border-right-style: solid;
}

Add this to the CSS file of your application (usually app.css or styles.css).