Kendo UI Grid JSON DataSource не загружает данные

По какой-то причине мне кажется, что я не могу получить в сетке Kendo UI Grid больше, чем следующее:

сетка-изображение

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]",}
]

Я чувствую, что я действительно близок, но упускаю последнюю часть. Любая помощь будет ОЧЕНЬ оценена по мере того как я на крайний срок.


json kendo-grid
person John Swaringen    schedule 14.08.2013    source источник
comment
Я имею ту же самую проблему. Любая помощь по этому вопросу будет принята с благодарностью.   -  person Baxter    schedule 16.08.2013

Ответы (6)


arrow_upward
0
arrow_downward

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

person Graham Laight    schedule 13.04.2015
comment
Вот немного почище: return Json(new { Data = dataList }); - person Bill; 10.06.2015
comment
@BillPearmain, «Json (new { Data = dataList })» нужно изменить код на стороне сервера, чтобы он соответствовал кендо, я не думаю, что это хорошая идея. - person sendreams; 25.01.2016

arrow_upward
4
arrow_downward

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

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

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

js: пример инициализации сетки/источник данных:

$("#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). "}";

or:

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

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

поэтому json, отправленный в сетку, будет выглядеть так:

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

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

[
  {item}
  {item}
]
person womd    schedule 14.11.2013

arrow_upward
1
arrow_downward

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

var remoteDataSource = new kendo.data.DataSource(
    {
        transport:
        {
            read: {
                type: "GET",
                dataType: "json",
                url: "/home/getopportunities/"
            }
        },
        pageSize: 4
    })
person Dhananjay Kumar    schedule 14.08.2013
comment
Не повезло, в любом случае не должно иметь значения, GET это или POST. Он не отправляет никаких данных. - person John Swaringen; 14.08.2013

arrow_upward
1
arrow_downward

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

  $(document).ready(function () {
var remoteDataSource = new kendo.data.DataSource(
    {
        transport:
        {
            read: {
                type: "POST",
                dataType: "json",
                url: "/home/getopportunities/"
            }
        },
        pageSize: 4
    });
});
person Jaimin    schedule 14.08.2013
comment
Это уже пробовал. В любом случае, это не междоменный пост. Это локально для сервера. - person John Swaringen; 14.08.2013
comment
@Джон Сваринген, я просто обновляю свой код. Поместите свой код в Document.ready, я думаю, что это проблема. - person Jaimin; 14.08.2013
comment
Это немного плохая практика. Было бы лучше, если бы этот код выполнялся как можно скорее (к тому же запросы в источнике данных по умолчанию асинхронны). - person Nikolay Baluk; 02.09.2013

arrow_upward
1
arrow_downward

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

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

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».

person Nikolay Baluk    schedule 02.09.2013

arrow_upward
0
arrow_downward

При проверке JSON, возвращающегося из json-запроса источника данных сетки, я обнаружил, что имена полей были обработаны JavaScript - то, что было ActivityID в C#, стало activityID на проводе...

person D.B. Fred    schedule 16.04.2019