Блог

Я хотел бы создать табличный компонент, который будет работать как библиотека DevExpress, где мы можем сделать что-то вроде этого кода ниже. Я размышляю о том, как дочерние компоненты в этом коде отправляют значение параметров в ParentComponent (DxDataGrid)? Я пытался отправить ссылку на родительский элемент через cascadingvalue, но это не работает. Я думал об обратном вызове событий, но в приведенном ниже коде мы не назначаем никаких функций, и я тоже не хочу этого делать… Вы хоть представляете, как это работает?

Спасибо за любую помощь!

 <DxDataGrid DataAsync="@ForecastService.GetForecastAsync"
            PageSize="5"
            RowRemovingAsync="@OnRowRemoving"
            RowUpdatingAsync="@OnRowUpdating"
            RowInsertingAsync="@OnRowInserting"
            InitNewRow="@OnInitNewRow"
            CssClass="mw-1100">
    <DxDataGridCommandColumn Width="150px" />
    <DxDataGridDateEditColumn Field="@nameof(WeatherForecast.Date)" DisplayFormat="D" EditorFormat="d" EditorDisplayFormat="D" />
    <DxDataGridColumn Field="@nameof(WeatherForecast.Forecast)" Caption="Forecast" Width="150px" />
    <DxDataGridSpinEditColumn Field="@nameof(WeatherForecast.TemperatureC)" Caption="@("Temp. (x2103)")" TextAlignment="DataGridTextAlign.Left"
                              Width="150px" />
    <DxDataGridComboBoxColumn Field="@nameof(WeatherForecast.CloudCover)" Caption="Cloud Cover" DataAsync="@ForecastService.GetCloudCoverAsync"
                              TextAlignment="DataGridTextAlign.Left" Width="150px" />
    <DxDataGridCheckBoxColumn Field="@nameof(WeatherForecast.Precipitation)" Caption="Precipitation" Width="100px" />
</DxDataGrid>
  

Я думал об обратном вызове событий, но в приведенном ниже коде мы не назначаем никаких функций, и я тоже не хочу этого делать.

Вам не нужно устанавливать EventCallBack себя в DxDataGrid . Вероятно, это делается внутренне.

Ниже приведены только догадки, основанные на моих знаниях в Blazor, и две минуты, которые я потратил на изучение библиотеки DevExpress.

Давайте попробуем понять, что такое <DxDataGridComboBoxColumn/>

Я предполагаю, что это компонент, представляющий столбец DataGrid, в ячейках которого размещены элементы управления ComboBox.

 `<DxComboBox/>` (not appearing in your code) is I believe a component 
representing a ComboBox control. Thus, I guess that `<DxDataGridComboBoxColumn/>` is the parent component of `<DxComboBox/>`. Sound reasonable, no? 
  

Теперь я провел некоторый поиск и нашел этот код:

 <DxComboBox Data="@(new List<string>() { "In stock", "Sold out" })"
                        Value="@(((bool)((CellEditContext)context).CellValue) ? "In stock" : "Sold out" )"
                        ValueChanged="@((string newCellValue) => ((CellEditContext)context).OnChanged(newCellValue == "In stock"))">
            </DxComboBox> 
  

Что я здесь вижу? Как DxComboBox получает свои данные (из списка, созданного в строке. Также есть два атрибута: Value и ValueChanged
Value Атрибут представляет переменную DxComboBox , к которой привязан, в то время
ValueChanged как атрибут представляет метод, который должен вызываться, когда пользователь выбирает значение из DxComboBox (Html select element). Этот метод вызывается для уведомления родительского компонента DxComboBox об изменении значения, и он должен повторно отображаться, чтобы отразить это изменение. Обратите внимание, что базовым типом этого метода является EventCallBack .

Я советую вам перейти к документам и / или веб-сайтам, таким как chrissainty.com или blazoruniversity, и узнать там больше о компонентах, о том, как они взаимодействуют друг с другом, шаблонных компонентах и т. Д. Изучите основы Blazor, и однажды вы сможете создавать такие компоненты самостоятельно. В документации есть пример кода, как создавать шаблонные компоненты в виде таблицы. Начните с этого и продолжайте…

Проверьте DataGrid из Blazorise. Вы можете посмотреть исходный код на GitHub, если хотите создать свой собственный