Kado Grid pagination button показывает в вертикальном формате

Question

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

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

Вариант второй страницы отображается при изменении элементов на странице. Например, если я меняю вариант с 50 до 100. Я могу видеть другой номер страницы.

Это вторая проблема. Номер страницы отображается вертикально, а не горизонтально.

мне нужна помощь в решении вопросов ниже:

1. Когда варианты разбиения на страницы Page нагрузки должны отображаться, как они предполагают, чтобы быть.
2. Номера разбиения на страницы должны отображаться горизонтально не вертикально.

Ниже мой фрагмент кода:

$scope.mainGridOptions = { 
     editable: true, 
     pageable: { 
      pageSizes: [15,25,50,100] 
     }, 
     navigatable: true, 
     sortable: true, 
     filterable: true, 
     dataSource: { 
      type: "odata", 
      pageSize: 50, 
      batch: false, 
      requestEnd: function(e) { 
       if (e.type != 'read') 
       { 
        $('#grdItemizations').data('kendoGrid').dataSource.read(); 
       } 
      }, 
      schema: { 
       model: { 
        id: "Id", 
        fields: { 
         Id: { type: "number", editable: false }, 
             Title: { type: "string",editable: false } 
        } 
       }, 
       data: function (data) { 
        return data.d && data.d.results ? data.d.results : []; 
       } 
      }, 
      transport: { 
       parameterMap: function (data, type) { 
        if (type != "read") { 
         var strIfy = kendo.stringify({ 
          "__metadata": type != "create" ? { "type": }, 
          "Title": data.Title, 
          "Id": type != "create" ? data.ID : undefined 
         }); 
         return strIfy; 
        } 
        return kendo.data.transports["odata"].parameterMap.apply(this, arguments); 
       }, 
       read: { 
       }, 
       update: { 

       }, 
       create: { 
       }, 
    error: function (e) { 
     alert("Status: " + e.status + "; Error message: " + e.errorThrown); 
    }   
      },  
     }, 
     columns: [ 
      { field: "Id", title: "ID" , width: "60px"}, 
      { field: "Title", title: "Analytic Inventory Description" , width: "220px"} 
     ] 
    } 

Любой намек, помощь очень ценится.

Answer 1

Могут возникнуть другие проблемы, так как вы не опубликовали полный код.

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

Тогда я придвинул demo и удалить эти файлы CSS

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.118/styles/kendo.common-bootstrap.min.css" /> 
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.118/styles/kendo.bootstrap.min.css" /> 
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.118/styles/kendo.bootstrap.mobile.min.css" /> 

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

Пожалуйста, проверьте что-то выключен на стороне CSS (проверьте ссылку на кендо сетки CSS, глядя на ViewSource странице), если это не решит проблему, убедитесь, что вы разместить полный код