Кендо UI Сетка JSON DataSource не загружая данные

Question

По некоторым причинам я, кажется, не в состоянии получить больше, чем следующее в Кендо UI сетки:

HTML:

<div id="grid"></div> 
<script> 
    var remoteDataSource = new kendo.data.DataSource(
    { 
     transport: 
     { 
      read: { 
       type: "POST", 
       dataType: "json", 
       url: "/home/getopportunities/" 
      } 
     }, 
     pageSize: 4 
    }) 
    $("#grid").kendoGrid(
     { 
      dataSource: remoteDataSource, 
      columns: [ 
       { 
        title: "Title", 
        headerAttributes: { 
         style: "text-align:center" 
        }, 
        attributes: { 
         "class": "table-cell" 
        }, 
        width: 600, 
        filterable: true 
       }, 
       { 
        title: "Activity Type", 
        headerAttributes: { 
        }, 
        attributes: { 
         "class": "table-cell", 
         style: "text-align:center" 
        }, 
        width: 100, 
        filterable: true 
       }, 
       { 
        title: "Specialty", 
        filterable: true, 
        headerAttributes: { 
         style: "text-align:center" 
        }, 
        attributes: { 
         "class": "table-cell", 
         style: "text-align:center" 
        } 
       }, 
      { 
       title: "Total Credits", 
       format: "{0}", 
       headerAttributes: { 
        style: "text-align:center" 
       }, 
       attributes: { 
        "class": "table-cell", 
        style: "text-align:center" 
       } 
      } 
     ], 
     height: 430, 
     scrollable: true, 
     sortable: true, 
     pageable: true, 
     filterable: { 
      extra: false, 
      operators: { 
       string: { 
        contains: "Contains", 
        startswith: "Starts with", 
        eq: "Is equal to", 
        neq: "Is not equal to" 
       }, 
       number: { 
        eq: "Is equal to", 
        neq: "Is not equal to", 
        gte: "Greater Than", 
        lte: "Less Than" 
       } 
      } 
     } 
    }); 
</script> 

Это JSON, который возвращается к нему:

[ 
{"ActivityID":367,"Title":"Non Webinar Test For Calendar","ActivityType":"Other","TotalCredits":2,"Specialty":"[AB] [AE]"}, 
{"ActivityID":370,"Title":"Stage - Test SI Changes Part II","ActivityType":"Other","TotalCredits":2,"Specialty":"[NE]"}, 
{"ActivityID":374,"Title":"Webinar Test Event For Calendar","ActivityType":"Webinar","TotalCredits":2,"Specialty":"[FE] [NE] "}, 
{"ActivityID":401,"Title":"Module #1 Webinar: Learn Stuff","ActivityType":"Webinar","TotalCredits":2,"Specialty":"[AB] ",}, 
{"ActivityID":403,"Title":"Module #3 Webinar: Learn Even More Stuff","ActivityType":"Webinar","TotalCredits":2,"Specialty":"[AB] [AE]",} 
] 

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

Answer 1

Это нечистый, и я обнаружил это случайно, но то, что сработало для меня, возвращало Json (Json (dataList)) от контроллера вместо Json (dataList).

Answer 2

Код выглядит хорошо. Интересно, измените ли вы источник данных, как показано ниже. Изменение типа от POST до GET и посмотреть, если он работает,

var remoteDataSource = new kendo.data.DataSource(
    { 
     transport: 
     { 
      read: { 
       type: "GET", 
       dataType: "json", 
       url: "/home/getopportunities/" 
      } 
     }, 
     pageSize: 4 
    }) 

Answer 3

Попробуйте это,

$(document).ready(function() { 
var remoteDataSource = new kendo.data.DataSource(
    { 
     transport: 
     { 
      read: { 
       type: "POST", 
       dataType: "json", 
       url: "/home/getopportunities/" 
      } 
     }, 
     pageSize: 4 
    }); 
}); 

Answer 4

Вы можете увидеть, какая часть кода вызывает исключение в некоторой отладки инструмента (я рекомендую вам в Chrome DevTools (просто нажмите клавишу F12 в Chrome).

Я уверен, проблема связана с отсутствием атрибута field в массиве столбцов сетки, поэтому Kendo не знает, какие данные из источника данных отображаться в каком столбце сетки.

columns: [ 
       { 
        field: "Title", // attr name in json data 
        title: "Title", // Your custom title for column (it may be anything you want) 
        headerAttributes: { 
         style: "text-align:center" 
        }, 
        attributes: { 
         "class": "table-cell" 
        }, 
        width: 600, 
        filterable: true 
       }, 

Не забудьте изменить тип запроса с "POST" на "GET".

Answer 5

Общие проблемы с отсутствующим атрибутом схемы! добавьте его в источник сетки - источник данных и проверьте, установлен ли он, когда вы делаете свой json.

(когда обычный массив сериализации/to_json, массив данных необходимо свойство, указывающее Шма)

вот пример, чтобы понять:

ЯШ: образец сетки инициализации/источник данных:

$("#grid").kendoGrid({ dataSource: { transport: { read: "/getdata/fromthisurl" }, schema: { data: "data" } } }); 

когда вы делаете/вывода ваш JSON, увидеть, если информация Шма в кодированном результат:

PHP:

$somedata= get_my_data(); 

header("Content-type: application/json"); 
echo "{\"data\":" .json_encode($somedata). "}"; 

или:

 $viewdata['data'] = get_my_data(); 

    header("Content-type: application/json"); 
    echo (json_encode($viewdata)); 

поэтому JSON, который отправляется в сеть будет выглядеть следующим образом:

{data: 
     [ 
     {item} 
     {item} 
     ] 
} 

вместо просто:

[ 
    {item} 
    {item} 
]