This is a migrated thread and some comments may be shown as answers.

Grid Not Loading JSON Data Properly but renders grid

1 Answer 121 Views
Grid
This is a migrated thread and some comments may be shown as answers.
John
Top achievements
Rank 1
John asked on 21 Aug 2013, 07:08 PM
For some reason I seem to be unable to get any more than the following in the 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>
This is the JSON as the browser sees it:
[
{"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]",}
]


I think I'm really close but can't make the last step to getting it working.  All I get is a blank grid after the spinner runs.

1 Answer, 1 is accepted

Sort by
0
Kiril Nikolov
Telerik team
answered on 23 Aug 2013, 07:10 AM
Hello John,

I have used your data and settings to populate a Kendo UI Grid. You can see my example here:

http://jsbin.com/EJiYeWe/1/edit

I can see that you have marked your question as answered, but anyway this might be helpful.
 
Regards,
Kiril Nikolov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Grid
Asked by
John
Top achievements
Rank 1
Answers by
Kiril Nikolov
Telerik team
Share this question
or