Я создал проект C#, используя компоненты Blazor и Dev express DxDataGrid для создания основного подробного вида. Все отлично работает, используя стандартные кнопки команд (New, Edit). Когда я заменяю кнопки по умолчанию для основной команды значками, у меня не возникает проблем с функциями редактирования:
Когда я заменяю элементы управления по умолчанию для подробностей, редактор сведений для добавления или замены строки не работают:
Когда я оставляю стандартные кнопки команд, только для деталей, мастера (с иконками) и деталей (с кнопками по умолчанию), все Главный и подробный редакторы работают отлично:
Чтобы воспроизвести проблему, пожалуйста, скачайте и скомпилируйте проект dev express, который вы можете найти по адресу: Как заменить команду по умолчанию кнопка со значками на DXDataGrid В примере показано, как заменить кнопки по умолчанию в одной сетке. В моем тестовом проекте я добавил детали, как показано в следующем фрагменте кода (просто замените весь код в файле .razor):
@page "/"
@using CommandButtonsWithIcons.Data
@inject WeatherForecastService ForecastService
@if (forecasts == null) {
<h1>Loading...</h1>
}
else {
<DxDataGrid Data=@forecasts ShowFilterRow=false CssClass="MainGrid" @ref="MyGrid" ShowDetailRow="true"
RowUpdating=@((updatingDataItem, newValues) => OnRowUpdating(updatingDataItem, newValues))
RowInserting=@((newValues) => OnRowInserting(newValues))>
<Columns>
<DxDataGridCommandColumn>
<HeaderCellTemplate>
<a class="oi oi-plus" @onclick="@(() => MyGrid.StartRowEdit(null))" href="javascript:void(0);"></a>
</HeaderCellTemplate>
<CellTemplate>
<a class="oi oi-pencil" @onclick="@(() => MyGrid.StartRowEdit(context))" href="javascript:void(0);"></a>
<a class="oi oi-x" @onclick="@(() => Delete(context as WeatherForecast))" href="javascript:void(0);"></a>
</CellTemplate>
</DxDataGridCommandColumn>
<DxDataGridColumn Field=@nameof(WeatherForecast.TemperatureC) Caption="Temp. (C)"></DxDataGridColumn>
<DxDataGridColumn Field=@nameof(WeatherForecast.TemperatureF) Caption="Temp. (F)"></DxDataGridColumn>
<DxDataGridComboBoxColumn Field=@nameof(WeatherForecast.Summary) Caption="Summary" Data=@summaries></DxDataGridComboBoxColumn>
<DxDataGridDateEditColumn Field=@nameof(WeatherForecast.Date) DisplayFormatString="dd/MM/yyyy"
EditFormatString="dd/MM/yyyy"></DxDataGridDateEditColumn>
</Columns>
<DetailRowTemplate Context="dataItem">
<DxDataGrid Data=@forecasts.Where(x=>x.TemperatureC==dataItem.TemperatureC) ShowFilterRow=false CssClass="MainGrid" @ref="MyGridDetail"
RowUpdating=@((updatingDataItem, newValues) => OnRowUpdating(updatingDataItem, newValues))
RowInserting=@((newValues) => OnRowInserting(newValues))>
<DxDataGridCommandColumn>
<HeaderCellTemplate>
<a class="oi oi-plus" @onclick="@(() => MyGridDetail.StartRowEdit(null))" href="javascript:void(0);"></a>
</HeaderCellTemplate>
<CellTemplate>
<a class="oi oi-pencil" @onclick="@(() => MyGridDetail.StartRowEdit(context))" href="javascript:void(0);"></a>
<a class="oi oi-x" @onclick="@(() => Delete(context as WeatherForecast))" href="javascript:void(0);"></a>
</CellTemplate>
</DxDataGridCommandColumn>
<DxDataGridColumn Field=@nameof(WeatherForecast.TemperatureC) Caption="Temp. (C)"></DxDataGridColumn>
<DxDataGridColumn Field=@nameof(WeatherForecast.TemperatureF) Caption="Temp. (F)"></DxDataGridColumn>
<DxDataGridComboBoxColumn Field=@nameof(WeatherForecast.Summary) Caption="Summary" Data=@summaries></DxDataGridComboBoxColumn>
<DxDataGridDateEditColumn Field=@nameof(WeatherForecast.Date) DisplayFormatString="dd/MM/yyyy"
EditFormatString="dd/MM/yyyy"></DxDataGridDateEditColumn>
</DxDataGrid>
</DetailRowTemplate>
</DxDataGrid>
}
@functions {
WeatherForecast[] forecasts;
string[] summaries;
DevExpress.Blazor.DxDataGrid<WeatherForecast> MyGrid;
DevExpress.Blazor.DxDataGrid<WeatherForecast> MyGridDetail;
protected override async Task OnInitializedAsync() {
forecasts = await ForecastService.GetForecastAsync();
summaries = await ForecastService.GetSummariesAsync();
}
async void OnRowUpdating(WeatherForecast dataItem, Dictionary<string, object> newValue) {
forecasts = await ForecastService.Update(dataItem, newValue);
}
async void OnRowInserting(Dictionary<string, object> newValue) {
forecasts = await ForecastService.Insert(newValue);
}
async void Delete(WeatherForecast item) {
if (item != null) {
forecasts = await ForecastService.Remove(item);
}
}
}
ОБНОВЛЕНИЕ Как Павел V из dev express предполагает, что нам нужно создать новый компонент бритвы, который реализует новый экземпляр компонента DXDatagrid, поскольку он не подходит для ссылки на компонент 2 или более раз на один и тот же компонент бритвы. Итак, чтобы решить проблему, создайте другой компонент (ie. DetaiGrid) и создайте ссылку на него внутри DetailRowTemplate и отправьте параметр, основную запись и источник сведений:
<DetailRowTemplate Context="dataItem">
<DetailGrid MasterRecord="@dataItem" ForecastService="@ForecastService" Forecasts="@forecasts" ></DetailGrid>
</DetailRowTemplate>
Детальный пример:
<h3>DetailGrid2</h3>
@using CommandButtonsWithIcons.Data
<DxDataGrid Data=@Forecasts.Where(x=>x.TemperatureC==MasterRecord.TemperatureC) ShowFilterRow=false CssClass="MainGrid" @ref="MyGridDetail"
RowUpdatingAsync=@(OnRowUpdating)
RowInsertingAsync=@(OnRowInserting)>
<DxDataGridCommandColumn>
<HeaderCellTemplate>
<a class="oi oi-plus" @onclick="@(() => MyGridDetail.StartRowEdit(null))" href="javascript:void(0);"></a>
</HeaderCellTemplate>
<CellTemplate>
<a class="oi oi-pencil" @onclick="@(() => MyGridDetail.StartRowEdit(context))" href="javascript:void(0);"></a>
</CellTemplate>
</DxDataGridCommandColumn>
<DxDataGridColumn Field=@nameof(WeatherForecast.TemperatureC) Caption="Temp. (C)"></DxDataGridColumn>
<DxDataGridColumn Field=@nameof(WeatherForecast.TemperatureF) Caption="Temp. (F)"></DxDataGridColumn>
<DxDataGridDateEditColumn Field=@nameof(WeatherForecast.Date) DisplayFormatString="dd/MM/yyyy"
EditFormatString="dd/MM/yyyy"></DxDataGridDateEditColumn>
</DxDataGrid>
@code {
[Parameter]
public WeatherForecast[] Forecasts { get; set; }
[Parameter]
public WeatherForecast MasterRecord{ get; set; }
[Parameter]
public WeatherForecastService ForecastService { get; set; }
DevExpress.Blazor.DxDataGrid<WeatherForecast> MyGridDetail = null;
async Task OnRowUpdating(WeatherForecast dataItem, IDictionary<string, object> newValue)
{
Forecasts = await ForecastService.Update(dataItem, newValue);
}
async Task OnRowInserting(IDictionary<string, object> newValue)
{
//forecasts = await ForecastService.Insert(newValue);
}
}