DataGrid с details - время работы

Коллеги!
В проекте используем dataGrid:

	dataContainer="detachmentDynamicsSliceDc"
	settingsEnabled="false"
	width="100%" height="100%">
	<columns>
		<column id="countryNames" caption="msg://countryNames" property="countryNames" width="120px"/>
		<column id="headName" caption="msg://headName" property="headName" width="150px"/>
		<column id="depNames" caption="msg://depNames" property="depNames" width="150px"/>
		<column id="totalMembersCount" caption="msg://totalMembersCount" property="totalMembersCount" width="150px"/>
	</columns>
</dataGrid>

для грида устанавливаем область детализации данных строки:

@Install(to = "dynamicsDetailsDataGrid", subject = "detailsGenerator")
protected Component dynamicsDetailsDataGridDetailsGenerator(KeyValueEntity item) {
    VBoxLayout mainLayout = uiComponents.create(VBoxLayout.class);
    mainLayout.setWidth("100%");
    mainLayout.setMargin(false, false, true, true);
    Component content = getDetachmentContent(item);
    content.setWidth("100%");
    content.setStyleName(THIN_FONT_NAME);
    mainLayout.add(content);
    mainLayout.expand(content);
    return mainLayout;
}

сборка детализации для одной строки грида:

// собрать область DETAILS: содержание 
private Component getDetachmentContent(KeyValueEntity item) {
    Label<String> content = uiComponents.create(Label.TYPE_STRING);
    content.setHtmlEnabled(true);
    StringBuilder sb = new StringBuilder();
    SimpleDateFormat sdfr = new SimpleDateFormat("dd MMMM yyyy", myDateFormatSymbols);
    // Отображаемые данные
    int totalMembersCount = item.getValue("totalMembersCount");
    String headName = item.getValue("headName"); 
    String taskNumber = item.getValue("taskNumber"); 
    String taskContents = item.getValue("taskContents");
    String taskPartner = item.getValue("taskPartner"); 
    String countryNames = item.getValue("countryNames");
    String depNames = item.getValue("depNames"); 
    String d1 = sdfr.format(item.getValue("startDate"));
    String d2 = sdfr.format(item.getValue("endDate")); 
    String taskD = sdfr.format(item.getValue("taskDate")); 

    // формирование HTML для отображения области DETAILS
    sb.append("<div>");
    // сроки
    sb.append("Командировка ");
    // подразделения
    if (depNames.isEmpty() == false) {
        sb.append(" ");
        sb.append(depNames);
    }
    sb.append(" с ");
    sb.append(d1);
    sb.append(" по ");
    sb.append(d2);
    // содержание
    if (taskContents != "") {
        sb.append(", для ");
        sb.append(taskContents);
        sb.append(".");
    }
    // принимающая сторона
    if (taskPartner.isEmpty() == false) {
        sb.append("<br>");
        sb.append("Принимающая сторона: ");
        sb.append(taskPartner);
        if (countryNames.isEmpty() == false) {
            sb.append(" (");
            sb.append(countryNames);
            sb.append(").");
        }
    }
    // глава делегации
    sb.append("<br>");
    sb.append("Глава делегации: ");
    sb.append(headName);
    // кол-во командируемых работников
    if (totalMembersCount > 0) {
        sb.append(" ( всего: ");
        sb.append(totalMembersCount);
        sb.append(" работников");
        sb.append(")");
    }
    // номер и дата задания на командирование
    if (!taskNumber.isEmpty()) {
        sb.append(", задание на командирование № ");
        sb.append(taskNumber);
        sb.append(" от ");
        sb.append(taskD);
        sb.append(" г.");
    }
    sb.append(" </div>");
    content.setValue(sb.toString());
    return content;
}

Как только мы добавляем автоматическое раскрытие области детализации для всех строк грида, начинается страшное торможение (десятки секунд):

// показать область детализации для всех строк DataGrid
private static void ExpandAllDetails(DataGrid dataGrid) {
    DataGridItems dataGridItems = dataGrid.getItems();
    dataGridItems.getItems()
            .filter(o -> o != null)
            .forEach(o -> dataGrid.setDetailsVisible((Entity) o, true));
}

Причем время торможения напрямую зависит от количества строк в гриде.
Трасса системного времени по коду показала, что сами по себе методы и запросы отрабатывают почти мгновенно.
В чем проблема не понятно, но есть версия, что это связано со скриптом и рендерингом…
На гриде с количеством строк более 200 получили сокет таймаут…

%D1%84%D0%BE%D1%80%D1%83%D0%BC

Помогите, пожалуйста, разобраться.
Спасибо!

P.S. Не по теме :slight_smile: кто-нибудь может объяснить, почему одни вставки программного код отображаются красиво (как код с кнопкой “copy”), а другие не идентифицируются как программный код? (вроде копи-паст всегда по одной схеме происходит)…

Код нужно оборачивать тройным символом `, см. back quote.

1 симпатия

Основной вопрос темы очень актуален…

Добрый день.

К сожалению проблему воспроизвести не получилось даже с 1000 записями. Время открытия экране не более секунды.

Вообще механизм Details не задумывался так, чтобы быть всегда активным и для всех строк, т.к. details может содержать достаточно сложный UI, который будет постоянно перегенерироваться в связи с тем, что DataGrid не рендерит сразу все строки, а только видимую часть (плюс запас сверху и снизу). Из за чего при скролле, если details или генерируемые колонки выполняют тяжелые операции, будет притормаживание.

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

Глеб

Глеб, спасибо!
А какой компонент Вы бы посоветовали применить в этой ситуации? Нужен табличный компонент с многострочностью…

И какой компонент Вы бы посоветовали взамен VBoxLayout?

Я бы посоветовал показывать детали по требованию, как это сделано в этом примере.

Спасибо! Но это не то, чего бы нам хотелось…
А какой компонент Вы бы посоветовали взамен VBoxLayout?

Никакой, вся информаци у Вас хранится в label. Если нужны отступы, то можно добавить ему стиль с padding или margin.

1 симпатия

Короче, зависимости от VBoxLayout практически нет… Грид строится катастрофически долго :frowning: