2013-04-10 3 views
7

У меня есть сетка интерфейса пользователя Kendo, заполненная информацией из удаленного источника, и я хочу принудительно обновить информацию, отображаемую после того, как окно пользовательского интерфейса Kendo на моем веб-сайте будет закрыто.Как принудительно обновить сетку пользовательского интерфейса Kendo, заполненную удаленными данными?

Я попытался это:

var grid = $("#usuariosGrid").data("kendoGrid"); 
grid.refresh(); 

Но это не сработало, это то, как я создаю Кендо UI Сетка:

var ds = new kendo.data.DataSource({ 
    transport: { 
     read: { 
      url: root_url + "/usuario/index", 
      dataType: "json" 
     } 
    }, 
    schema: { 
     data: "Response", 
     total: "Count" 
    }, 
    serverPaging: false, 
    pageSize: 2 
}); 
$("#usuariosGrid").kendoGrid({ 
    pageable: { 
     refresh: true 
    }, 
    columns: [ 
     { field: "UsuarioId", title: "ID", width: "100px" }, 
     { field: "Nombre", title: "Nombre", width: "100px" }, 
     { field: "ApellidoP", title: "Apellido Paterno", width: "100px" }, 
     { field: "ApellidoM", title: "Apellido Materno", width: "100px" }, 
     { command: [{ text: "Editar", click: editFunction }, { text: "Eliminar", click: deleteFunction }], title: " ", width: "200px" } 
    ], 
    dataSource: ds 
}); 

Я посмотрел на документацию, но не попадались метод для этого.

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

+4

Попробуйте 'ds.read()' –

ответ

7

Как @NicholasButtler предлагает использовать ds.read() для принудительного считывания. В зависимости от вашего определения DataSource результат может быть кэширован. Проверьте this на включение/выключение transport.read.cache.

Для замены загружаемого изображения переопределите класс .k-loading-image. Пример:

.k-loading-image { 
    background-image:url('http://24.media.tumblr.com/cfa55f70bbc5ce545eed804fa61a9d26/tumblr_mfpmmdCdWA1s1r5leo1_500.gif') 
} 

EDIT Для того, чтобы гарантировать, что у вас есть достаточно места для отображения изображения добавить следующее определение стиля:

#grid .k-grid-content { 
    min-height: 100px; 
} 

скрипку пример здесь: http://jsfiddle.net/OnaBai/nYYHk/1/

+0

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

+0

Как установить минимальную высоту сетки? Это должно оставить место для того, чтобы позволить gif показать! – OnaBai

+0

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

1

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

Оказывается, если вы сконфигурируете сетку с помощью опции: scrollable: false, загрузочное изображение будет отображаться как ожидалось. Не нужно иметь min-height в CSS, и нет необходимости иметь прокручиваемую сетку, если вы также подкачки.

+0

спасибо, какая смешная ошибка !!! – setlio

Смежные вопросы