Inserting a new row on a grouped data grid doesn't show up in the grid

Radzen.Blazor Components
1

Hello,

We have many occurrences when loading our datagrid component we add a grouped column by default. when the user clicks a new row, the row doesn't show up because it's hidden behind the grouped column.
The user will need to delete the grouped column in order to see it active and that is not user friendly.

The workaround we have is OnNewRowClicked, we save the group descriptors, clear the datagrid groups in order to show the new row, then upon Save/Update action, we put back the saved group descriptors in the grid's groups collection as follows:
if (JudgeCalendarSettingGrid.Groups.Any())
{
SelectedGroupDesriptors = new
List<GroupDescriptor(JudgeCalendarSettingGrid.Groups);
JudgeCalendarSettingGrid.Groups.Clear();
}

It will be appreciated if a built-in solution was provided by Radzen to do something similar to what we have.

2

Here is an example how to do that in grouped DataGrid using this demo:
https://blazor.radzen.com/datagrid-inline-edit

image
image1920×1080 262 KB

insert-with-groups

1 Like
3

Thanks for the example, it looks like adding the item initially does the trick.
I was adding the new item on the OnCreate handler where we check for web service add success, then proceed to add it to memory !

4

based on the inline editing link you provided, it did it the same way I did initially, which is add the new item to the data grid only and then add it to the list later,

image
image1022×493 15.6 KB

5

I am still having the issue where the add inline row is still not displaying while grouped. I added the Reload() but does nothing.


		async Task InsertRow()
		{
			Reset();

			var model = new PermissionsModel();
			permissionsToInsert.Add(model);
			await grid.Reload();
			await grid.InsertRow(model);
		}

		async void OnCreateRow(PermissionsModel model)
		{
			model.UpdatedBy = storedUserValues.Value.cssamaccountname;
			model.Updated = DateTime.Now;
			model.CreatedBy = storedUserValues.Value.cssamaccountname;
			model.Created = DateTime.Now;
			permissionsService.CreatePermission(model);
			permissionsToInsert.Remove(model);
			await LoadGrid();
		}
6

@enchev - I noticed on your line #188 you have EditRow instead of InsertRow.

Is that a requirement to get this to work? I switched to EditRow, but its still not working

7

Yes, that’s the requirement. You can compare your code to our demo to check the differences.

8

Thanks, I'll try that route.I tried going to the demo for inline editing that you linked and added the allowgrouping=true

Then to the insertrow method, added the reload and changed to editrow

But I must be missing something else because it still doesn't work. What else am I missing?

9

Is there anything else I need to add to the grid? As mentioned, I added allowgrouping... Not sure if anything else is needed

10

Maybe it will be easier to debug your case to see why it’s not working.

11

When I change the line from await grid.InsertRow(model); to await grid.EditRow(model);, the new row does not appear even if I have no grouping.

Here is my GRID

<RadzenButton ButtonStyle="ButtonStyle.Success" Icon="add_circle_outline" Text="Add Permission" Click="@InsertRow" />

					<RadzenDataGrid @ref="grid" Count="@count" Data="@data" TItem="PermissionsModel" RowUpdate="@OnUpdateRow" RowCreate="@OnCreateRow" AllowFiltering="true" FilterPopupRenderMode="PopupRenderMode.OnDemand" FilterMode="FilterMode.Advanced" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" AllowPaging="true" AllowSorting="true" ShowPagingSummary="true" PageSize=100 PageSizeOptions=@(new int[]{20, 50, 100, 250, 500}) SelectionMode="DataGridSelectionMode.Single" AllowColumnResize="true" AllowGrouping="true">
						<EmptyTemplate>No Records</EmptyTemplate>
						<Columns>
							<RadzenDataGridColumn TItem="PermissionsModel" Property="Id" Title="Id" Visible="false" />
							<RadzenDataGridColumn TItem="PermissionsModel" Property="WebApplicationId" Title="WebApplication Id" Visible="false" />
							<RadzenDataGridColumn TItem="PermissionsModel" Property="Path" Title="Path" Visible="true">
								<EditTemplate Context="data">
									<RadzenTextBox @bind-Value="@data.Path" Style="width:100%" />
								</EditTemplate>
							</RadzenDataGridColumn>
							<RadzenDataGridColumn TItem="PermissionsModel" Property="SecurityGroupName" Title="Group" Visible="true">
								<Template Context="data">
									<p style="white-space:pre-wrap">@data.SecurityGroupName</p>
								</Template>
								<EditTemplate Context="data">
									<RadzenDropDown Name="Group" TextProperty="SecurityGroupName" ValueProperty="WebApplicationSecurityGroupId" @bind-Value="@data.SecurityGroup" Data="@securityGroups" Role="combobox" aria-controls="popup-executionToolList" aria-expanded="false" />
								</EditTemplate>
							</RadzenDataGridColumn>
							<RadzenDataGridColumn TItem="PermissionsModel" Property="AccessDescription" Title="Access" Visible="true">
								<EditTemplate Context="data">
									<RadzenDropDown Name="Access" TextProperty="Value" ValueProperty="Id" @bind-Value="@data.Access" Data="@accessTypes" Role="combobox" aria-controls="popup-executionToolList" aria-expanded="false" />
								</EditTemplate>
							</RadzenDataGridColumn>
							<RadzenDataGridColumn TItem="PermissionsModel" Property="Description" Title="Description" Visible="true">
								<Template Context="data">
									<p style="white-space:pre-wrap">@data.Description</p>
								</Template>
								<EditTemplate Context="data">
									<RadzenTextArea Name="Description" @bind-Value="@data.Description" Style="width:100%" aria-label="TextArea" />
								</EditTemplate>
							</RadzenDataGridColumn>
							<RadzenDataGridColumn TItem="PermissionsModel" Property="Updated" Title="Updated" Visible="true" />
							<RadzenDataGridColumn TItem="PermissionsModel" Property="UpdatedBy" Title="Updated By" Visible="true" />
							<RadzenDataGridColumn TItem="PermissionsModel" Property="Created" Title="Created" Visible="false" />
							<RadzenDataGridColumn TItem="PermissionsModel" Property="CreatedBy" Title="Created By" Visible="false" />

							<RadzenDataGridColumn TItem="PermissionsModel" Context="data" Filterable="false" Sortable="false" TextAlign="TextAlign.Right" Width="220px">
								<Template Context="data">
									<RadzenButton title="Inline Edit" Icon="edit" ButtonStyle="ButtonStyle.Light" Variant="Variant.Flat" class="small-text my-1 ms-1" Click="@(args => EditRow(data))" @onclick:stopPropagation="true" />
									<RadzenButton title="Delete Asset" ButtonStyle="ButtonStyle.Danger" Icon="delete" Variant="Variant.Flat" Shade="Shade.Lighter" class="small-text my-1 ms-1" Click="@(args => DeleteRow(data))" @onclick:stopPropagation="true" />
								</Template>
								<EditTemplate Context="data">
									<RadzenButton title="Save Changes" Icon="check" Text="Save" ButtonStyle="ButtonStyle.Success" Variant="Variant.Flat" class="small-text my-1 ms-1" Click="@((args) => SaveRow(data))" />
									<RadzenButton title="Cancel Edit" Icon="close" Text="Cancel" ButtonStyle="ButtonStyle.Light" Variant="Variant.Flat" class="small-text my-1 ms-1" Click="@((args) => CancelEdit(data))" />
									<RadzenButton title="Delete" ButtonStyle="ButtonStyle.Danger" Icon="delete" Variant="Variant.Flat" Shade="Shade.Lighter" class="small-text my-1 ms-1" Click="@(args => DeleteRow(data))" />
								</EditTemplate>
							</RadzenDataGridColumn>
						</Columns>
					</RadzenDataGrid>

and the code behind

public async Task LoadGrid()
{
	_spinnerService.Show();
	_logger.LogEvent(LogLevel.Debug, EventType.PageView, "Site Permissions - Grid Data Load - Start", LogCategory.Other);
	data = await permissionsService.GetPermissions();
	count = data.Count();
	await InvokeAsync(() => StateHasChanged());
	await grid.Reload();
	_logger.LogEvent(LogLevel.Debug, EventType.PageView, "Site Permissions - Grid Data Load - Stop", LogCategory.Other, count);
	_spinnerService.Hide();
}

public async Task EditRow(PermissionsModel model)
{
	if (permissionsToInsert.Any())
	{
		Reset();
	}

	permissionsToUpdate.Add(model);
	await grid.Reload();
	await grid.EditRow(model);
}

public async void OnUpdateRow(PermissionsModel model)
{
	Reset(model);

	model.UpdatedBy = storedUserValues.Value.cssamaccountname;
	model.Updated = DateTime.Now;
	permissionsService.UpdatePermission(model);
	await LoadGrid();
}

public async Task SaveRow(PermissionsModel model)
{
	await grid.UpdateRow(model);
}

public void CancelEdit(PermissionsModel model)
{
	Reset(model);

	grid.CancelEditRow(model);
}

public async Task DeleteRow(PermissionsModel model)
{
	Reset(model);

	permissionsService.DeletePermission(model.Id);
	await LoadGrid();
}

public async Task InsertRow()
{
	Reset();

	string accountName = "OMMR_ID";
	try {
        accountName = storedUserValues.Value.cssamaccountname;
    } catch (Exception ex) {
        accountName = "OMMR_ID";
    }

	var model = new PermissionsModel();
	model.UpdatedBy = accountName;
	model.Updated = DateTime.Now;
	model.CreatedBy = accountName;
	model.Created = DateTime.Now;

	permissionsToInsert.Add(model);
	await grid.Reload();
	await grid.EditRow(model);
}

public async void OnCreateRow(PermissionsModel model)
{
	permissionsService.CreatePermission(model);
	permissionsToInsert.Remove(model);
	await LoadGrid();
}

void Reset()
{
	permissionsToInsert.Clear();
	permissionsToUpdate.Clear();
}

void Reset(PermissionsModel model)
{
	permissionsToInsert.Remove(model);
	permissionsToUpdate.Remove(model);
}