Как показать/скрыть сетку?

Question

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

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

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

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

Answer 1

Согласно http://docs.kendoui.com/api/web/grid#methods-destroy, что следует удалить все обработчики событий и т.д. из сетки ,
После этого вам просто нужно, чтобы удалить его из DOM, т.е.

$("#grid").remove();http://jsfiddle.net/giltnerj0/JFy2C/

Answer 2

Вам не нужно уничтожить ни сетки, ни DataSource. Вместо этого поймайте любое изменение в дате и вызовите DataSource.read.

Шаги:

• определить DateTimePicker (или просто DatePicker или календарь), в зависимости от ваших потребностей.

HTML:

<input id="date"/> 

JavaScript:

var evDate = $("#date").kendoDateTimePicker({ 
    value : new Date(), 
    change: function() { 
     ds.read(); 
    } 
}).data("kendoDateTimePicker"); 

• Определение DataSource для получения событий с сервера. Предположим, что url для обработки запроса GetEvents, который получает в запросе аргумент date, который является датой событий. Пример GetEvents?date=Mon+Jul+15+2013+19%3A44%3A55+GMT%2B0200+(CEST)

JavaScript:

var ds = new kendo.data.DataSource({ 
    transport: { 
     read: { 
      url : "GetEvents.php", 
      data: function() { 
       return { "date": evDate.value() } 
      } 
     } 
    }, 
    schema : { 
     model: { 
      id : "id", 
      fields: { 
       event: { type: "string" }, 
       date : { type: "date" } 
      } 
     } 
    }, 
    pageSize : 10 
}); 

• Определить сетку, используя предыдущий DataSource:

JavaScript

var grid = $("#grid").kendoGrid({ 
    dataSource: ds, 
    editable : false, 
    pageable : true, 
    columns : [ 
     { field: "id", width: 60, title: "#" }, 
     { field: "date", width: 140, title: "Date", format: "{0:yyyy-MM-dd HH:mm}" }, 
     { field: "event", width: 400 } 
    ] 
}).data("kendoGrid"); 

Так трюк образующую change в DateTimePicker: каждый раз, когда вы меняете дату, она вызывает событие change, где вы вызываете grid.read().

Сетка transport.read определяет в качестве аргумента (transport.read.data) date плюс значения считанного из DateTimePicker.