Default datagrid grouping on load - not working for me yet

Hello,

I love the datagrid and all the features you've put in. A couple things I haven't been able to get working yet:

  1. When a page with a datagrid loads up, I'd love it if the grouping was already set. I haven't been able to get that working, following the pattern from your guide here for the [OnRender] part (DataGrid component), by adding code in an 'OnRender' function in a razor.custom.cs, or through Radzen's IDE in the 'Render' event for the datagrid, like this:
    image
  2. I'm not sure how, in an inline datagrid, how to pre-populate a textfield with a given value once inline editing enabled. Suggestions?

Y'all are awesome, keep up the good work!

Katy

You need StateHasChanged(), check our demos for reference:
https://blazor.radzen.com/datagrid-group-header-template

The new object instance is created usually in Add XXX page Load method - you can set desired properties there:

Got the inline data pre-populating working, thank you @enchev .

The Grouping on load up is not working however. I'm using the IDE to generate the code, and this is what the generated Render function looks like, both options don't work and in fact freeze the page:

protected async void Datagrid0Render(DataGridRenderEventArgs<FinalNoticeBorrower> args)
        {
            if (args.FirstRender)
            {
                args.Grid.Groups.Add(new GroupDescriptor(){ Property = "BorrowerName", SortOrder = SortOrder.Descending });
                StateHasChanged();
            }
        }
protected async void Datagrid0Render(DataGridRenderEventArgs<FinalNoticeBorrower> args)
        {
            if (args.FirstRender)
            {
                args.Grid.Groups.Add(new GroupDescriptor(){ Title = "BorrowerName", Property = "BorrowerName", SortOrder = SortOrder.Descending });
                await InvokeAsync(() => { StateHasChanged(); });
            }
        }

My datagrid (first part) looks like this:

<RadzenDataGrid @ref="datagrid0" 
	  AllowColumnPicking="true" 
	  AllowColumnResize="true" 
	  AllowFiltering="true" 
	  AllowGrouping="true" 
	  AllowPaging="true" 
	  AllowSorting="true" 
	  Data="@getFinalNoticeBorrowersResult" TItem="FinalNoticeBorrower" PageSize="10" PageSizeOptions="@(new int[] { 10,50,100 })" PagerAlwaysVisible="true" Render="@Datagrid0Render" RowSelect="@Datagrid0RowSelect">
          <Columns>
            <RadzenDataGridColumn TItem="FinalNoticeBorrower" Property="RefNum" Title="Ref Num">
            </RadzenDataGridColumn>
            <RadzenDataGridColumn TItem="FinalNoticeBorrower" Property="Title" Title="Title">
            </RadzenDataGridColumn>
            <RadzenDataGridColumn TItem="FinalNoticeBorrower" Property="BorrowerName" Title="Borrower Name">
            </RadzenDataGridColumn>
....

Any suggestions?

Oh, I've found out that the reason why the default grouping isn't working is because the datagrid pulls from a database View that doesn't have a Key.

So, if I comment out this in my database context file

//builder.Entity<FinalNoticeBorrower>().HasNoKey();

and add [Key] data annotation to a property in my Model file for the View being displayed in the datagrid, the default datagrid grouping works no problem.

Problem is, every time I click the 'Run' button in Radzen it wipes out my changes in these 2 files. Any way to stop that from happening @enchev ? I looked at the json files in the meta\data folder an couldn't see anything there, not sure where else to look.

1 Like

I had the same issue. As a workaround I'm making a JavaScript click on the first <td> element of the first row of the grid inside the render function. I'm sure there is a better way to solve this but this was a "quick fix" for me.