Пользовательские данные в Devexpress Grid Blazor

На чтение 3 мин Опубликовано 29.09.2024

Вопрос или проблема

У меня есть дочерний компонент, который содержит только DxGrid. В качестве параметра я получаю строку с именами полей и заголовками столбцов, например:

for(int i =0 ; i< captions.Length;i++){
<DxGridDataColumn Caption="@captions[i]" FieldName="@Fieldnames[i]" Visible="@bool.Parse(Visible[i])" ShowInColumnChooser="@bool.Parse(ColumnChosers[i])" CaptionAlignment=GridTextAlignment.Center TextAlignment="GridTextAlignment.Center" Width="auto" />
  }

Я получаю данные очень хорошо и динамически, но моя проблема заключается в редактировании или создании новых. Как я могу создать EditFormContext для этого? Я пробовал это, но возникает исключение OutOfRange для i:

 @for (int i =0;i<captions.Length;i++)
 {
 <DxFormLayoutItem Caption="@captions[i]" ColSpanMd="6">
     @EditFormContext.GetEditor(Fieldnames[i])
 </DxFormLayoutItem>
  }

Ответ или решение

Конечно, давайте рассмотрим вашу задачу по динамическому созданию форм редактирования в DevExpress Grid для Blazor.

Для начала вам нужно убедиться, что вы передаете правильные параметры в компонент, который содержит ваш DxGrid. Вы правильно организовали отображение столбцов с помощью динамического создания их в цикле for. Однако при попытке создать элементы редактора с использованием EditFormContext возникает проблема с OutOfRangeException. Это может быть связано с тем, что вы не обеспечиваете корректное соответствие между количеством caption (подписей) и FieldNames.

Вот как можно организовать решение вашей проблемы:

Генерация столбцов в DxGrid: Оставьте ваш код для генерации столбцов, как есть. Убедитесь, что массивы captions, Fieldnames, Visible, и ColumnChosers имеют одинаковую длину.

@for (int i = 0; i < captions.Length; i++)
{
    <DxGridDataColumn Caption="@captions[i]" FieldName="@Fieldnames[i]" Visible="@bool.Parse(Visible[i])" 
                      ShowInColumnChooser="@bool.Parse(ColumnChosers[i])" CaptionAlignment=GridTextAlignment.Center 
                      TextAlignment="GridTextAlignment.Center" Width="auto" />
}

Создание формы редактирования: Для динамического создания элементов редактора следует убедиться, что ваш EditFormContext содержит данные, соответствующие полям из вашего Fieldnames. Когда вы создаете форму, используйте Fieldnames[i] корректно и убедитесь, что экземпляр EditFormContext инициализирован с правильными данными.

Пример кода для создания формы редактирования:
```
@for (int i = 0; i < captions.Length; i++)
{
    <DxFormLayoutItem Caption="@captions[i]" ColSpanMd="6">
        @EditFormContext.GetEditor(Fieldnames[i])
    </DxFormLayoutItem>
}
```

Проверка на null: Важно также проверить, что EditFormContext и все значения в массиве Fieldnames не равны нулю, чтобы избежать исключений.

Пример:

@if (EditFormContext != null)
{
    @for (int i = 0; i < captions.Length; i++)
    {
        string fieldName = Fieldnames[i];
        if (!string.IsNullOrEmpty(fieldName))
        {
            <DxFormLayoutItem Caption="@captions[i]" ColSpanMd="6">
                @EditFormContext.GetEditor(fieldName)
            </DxFormLayoutItem>
        }
    }
}

Ошибка OutOfRangeException: Чтобы избежать исключения в случае, если массивы не совпадают по длине, вы можете использовать условие на основе captions.Length либо минимальную длину массивов.

int length = Math.Min(captions.Length, Math.Min(Fieldnames.Length, Math.Min(Visible.Length, ColumnChosers.Length)));

for (int i = 0; i < length; i++)
{
    <DxGridDataColumn Caption="@captions[i]" FieldName="@Fieldnames[i]" Visible="@bool.Parse(Visible[i])" 
                      ShowInColumnChooser="@bool.Parse(ColumnChosers[i])" CaptionAlignment=GridTextAlignment.Center 
                      TextAlignment="GridTextAlignment.Center" Width="auto" />
    <DxFormLayoutItem Caption="@captions[i]" ColSpanMd="6">
        @EditFormContext.GetEditor(Fieldnames[i])
    </DxFormLayoutItem>
}

С этими изменениями ваш компонент должен корректно обрабатывать создание и редактирование данных в динамически созданном сеточном интерфейсе. Убедитесь, что ваши данные правильно связываются с EditFormContext, и все поля имеют необходимые значения.