Хобрук: Ваш путь к мастерству в программировании

Kendo Grid производительность

У нас есть элемент управления Kendo Grid, который отображает данные, полученные с сервера базы данных. Пейджинга нет. Все данные извлекаются один раз и отображаются с полосой прокрутки (в зависимости от количества строк).

Однако есть некоторые пользовательские операции, включающие столбец числового текстового поля (номер типа ввода) и столбец управления датой (дата типа ввода). Пользователь может изменить значения в этих элементах управления, которые запускают функции обработчика событий onchange, написанные с помощью javascript. В этих функциях javascript нет обращений к серверу, и это чисто клиентский код.

Проблема, с которой мы сталкиваемся, заключается в небольшой блокировке пользовательского интерфейса, как только изменение запускается в любом из элементов управления вводом. При трассировке кода javascript с помощью операторов console.log было обнаружено, что на эти операции было затрачено значительное время: kendoGrid.dataSource.sort(), $("#dataGrid").data("kendoGrid").dataSource.data(sortedDataObject) и $('#dataGrid').data('kendoGrid').refresh().

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

Я не могу вставить какой-либо исходный код, так как я не совсем уверен, сколько кода и какой код действительно может представлять проблему. Вот почему я попытался представить проблему более словесно, надеясь, что смогу найти какие-то решения или подходы.

javascript kendo-grid razor asp.net-mvc-4 kendo-ui
06.10.2016

  • Сколько строк отображается одновременно без подкачки? Кроме того, я верю (но не на 100%), что .sort(). data() и .refresh() приведут к повторной привязке/перерисовке сетки, поскольку сетка и источник данных привязаны друг к другу MVVM. Итак, я думаю, вы перевязываете все свои строки 3 раза. 06.10.2016
  • Это может помочь: demos.telerik.com/kendo-ui/grid/ виртуализация-локальные-данные 07.10.2016
  • не могли бы вы показать сетку, и вы сделали, что элементы управления вводом? 07.10.2016

Ответы:


1

Как вы заметили, сетка автоматически обновляется при большинстве типов взаимодействия с пользователем. Это может быть дорого, не всегда желательно и может быть остановлено следующим образом:

var gridNeedsRefresh = false;

function onGridDataBinding(e) {
    if (!gridNeedsRefresh && isGridPopulated()) {
        e.preventDefault();  // cancel data binding to prevent refresh
    }
}

Вам нужно будет реализовать метод isGridPopulated на основе ваших конкретных сведений о сетке. Идея заключается в том, что если в сетке нет данных или она все еще загружается, вы не хотите вмешиваться в это, вызывая preventDefault. Как только сетка была привязана, обновление должно быть отключено:

function onGridDataBound() {
    gridNeedsRefresh = false;
}

Далее нужно определить все случаи, когда сетка действительно нуждается в обновлении, и установить флаг обновления. Например, если ваша сетка поддерживает сортировку или фильтрацию, они требуют обновления для правильной работы, поэтому вам нужно будет обработать эти события и установить флаг:

function onGridSort(e) {
    gridNeedsRefresh = true;
}

После завершения сортировки будет вызвано событие onGridDataBound, в результате чего флаг будет сброшен, а сетка снова станет работоспособной.

10.01.2021
Новые материалы
То, как вы шаг за шагом написали эту статью, и уровни, которые вы в нее включили, так поразительно…
то, как вы написали эту статью шаг за шагом, и уровни, которые вы в нее включили, так удивительно объяснены, а также то, как вы объясняете каждый пункт, действительно хорошо, и вы поддерживаете..
Еженедельный гидроксид № 01 — Введение
Здравствуйте и добро пожаловать в первый выпуск Weekly Hydroxide , еженедельной серии статей о ядре Hydroxide. Мы будем писать о процессе написания ядра операционной системы на Rust, наших..
Пять вещей, о которых вы должны ДЕЙСТВИТЕЛЬНО побеспокоиться в связи с ИИ
Несмотря на то, что циркулирует много неточной информации об ИИ, важно исправить частые заблуждения. Многие могут быть обеспокоены тем, что их в конечном итоге заменят роботом, или..
Тестирование ответов на вопросы на основе BERT по статьям о коронавирусе
Введение В настоящее время большая часть мира затронута пандемией COVID-19 . Для многих из нас это означало домашний карантин, социальное дистанцирование, перебои в рабочей среде. Я..
Библиотеки PyTorch и Python для машинного обучения: приложения в здравоохранении с обнимающим лицом…
В сфере машинного обучения Python выделяется благодаря своей универсальности и набору предлагаемых библиотек. Развитие машинного обучения в здравоохранении можно частично объяснить простотой и..
«Что за…» очень хорошо представляет мое выражение лица после того, как я увидел это!
«Что за…» очень хорошо представляет мое выражение лица после того, как я увидел это!
5 вещей, которые я сделал, чтобы стать профессиональным разработчиком JavaScript
Чтобы стать профессиональным JS-разработчиком: 1. Практикуйтесь в рутине, 2. Работайте над проектами, 3. Придерживайтесь одного языка, 4. Наблюдайте за чужим кодом, 5. Будьте последовательны..