Отображение только двух записей в сетке пользовательского интерфейса Kendo

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

В настоящее время я нахожусь в том, что нагрузка связывает только две записи с сеткой и при нажатии на кнопку «Показать все» уничтожает сетку и создает ее снова со всеми записями.

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

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

Возможно ли это?

Я также использую angularjs и назначу угловой объект $ scope в качестве источника данных в сетку.

источник

2015-10-28 RandomUser

Пожалуйста, попробуйте приведенный ниже фрагмент кода.

<!DOCTYPE html> 
<html> 
<head> 
    <base href="http://demos.telerik.com/kendo-ui/treelist/local-data-binding"> 
    <title>Jayesh Goyani</title> 
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.2.902/styles/kendo.common-bootstrap.min.css" /> 
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.2.902/styles/kendo.bootstrap.min.css" /> 
    <script src="//kendo.cdn.telerik.com/2015.2.902/js/jquery.min.js"></script> 
    <script src="//kendo.cdn.telerik.com/2015.2.902/js/kendo.all.min.js"></script> 
</head> 
<body> 
    <button value="show all" onclick="ShowAll()">Show All</button> 
    <div id="grid"></div> 
    <script> 
     $(document).ready(function() { 
      $("#grid").kendoGrid({ 
       dataSource: { 
        type: "odata", 
        transport: { 
         read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers" 
        } 
       }, 
       height: 550, 
       groupable: true, 
       dataBound: onDataBinding, 
       sortable: true, 
       columns: [{ 
        field: "ContactTitle", 
        title: "Contact Title" 
       }, { 
        field: "CompanyName", 
        title: "Company Name" 
       }, { 
        field: "Country", 
        width: 150 
       }] 
      }); 
     }); 
     function onDataBinding(arg) { 
      var grid = $("#grid").data("kendoGrid"); 
      $(grid.tbody).find("tr").hide(); 
      $(grid.tbody).find("tr:eq(0)").show(); 
      $(grid.tbody).find("tr:eq(1)").show(); 
     } 
     function ShowAll() { 
      var grid = $("#grid").data("kendoGrid"); 
      $(grid.tbody).find("tr").show(); 
     } 
    </script> 
</body> 
</html>

Дайте мне знать, если есть вопросы.

источник

2015-10-28 12:21:56

Отображение только двух записей в сетке пользовательского интерфейса Kendo

ответ

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