Blazor (c#) DXDatagrid (dev express): проблема с редактором Master Detail при замене кнопок по умолчанию на значки - PullRequest
2 голосов
/ 18 января 2020

Я создал проект C#, используя компоненты Blazor и Dev express DxDataGrid для создания основного подробного вида. Все отлично работает, используя стандартные кнопки команд (New, Edit). Когда я заменяю кнопки по умолчанию для основной команды значками, у меня не возникает проблем с функциями редактирования: enter image description here

Когда я заменяю элементы управления по умолчанию для подробностей, редактор сведений для добавления или замены строки не работают: enter image description here

Когда я оставляю стандартные кнопки команд, только для деталей, мастера (с иконками) и деталей (с кнопками по умолчанию), все Главный и подробный редакторы работают отлично: enter image description here

Чтобы воспроизвести проблему, пожалуйста, скачайте и скомпилируйте проект 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);
                }

            }

1 Ответ

3 голосов
/ 20 января 2020

Я не рекомендую использовать одну переменную ref для нескольких экземпляров. Это может вызвать такие столкновения. Чтобы решить эту проблему, изолируйте свою сетку сведений в отдельном компоненте.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...