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

Grid not able to display data

2 Answers 168 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Jerry
Top achievements
Rank 1
Jerry asked on 19 Sep 2012, 11:37 AM
I have tried my hands at the Kendo Grid example with both static array data and json data from a web service. The console shows the data returned from the web server but my grid does not display the data, although I the column headers and everything else displayed.
Please see code below:
========================================

<!DOCTYPE html>

<html>

<head>

    <title></title>

 <link href="styles/kendo.common.min.css" rel="stylesheet" type="text/css" />

<link href="styles/kendo.default.min.css" rel="stylesheet" type="text/css" />

 

<script src="js/jquery.min.js" type="text/javascript"></script>

<script src="js/kendo.web.min.js" type="text/javascript"></script>

 <script src="js/kendo.all.min.js" type="text/javascript"></script>

   <script src="js/kendo.all.min.js"></script>

    <script src="js/kendo.grid.min.js"></script>

   <script src="js/jquery-ui-1.7.3.custom.min.js"></script>

</head>

<body>

   

        <div id="example" class="k-content">

            <div id="grid"></div>

            <script>

                $(document).ready(function() {

                    $("#grid").kendoGrid({

                        dataSource: {

                                                                         

                            type: "jsonp",

                            transport: {

                                read: "http://localhost:3481/api/employees"

                                                                                              

                            },

                            schema: {

                                model: {

                                    fields: {

                                        Code: { type: "String" },

                                        Name: { type: "String" },

                                        ContactName: { type: "string" },

                                      

                                    }

                                }

                            },

                                                                                  

                         

                            serverPaging: true,

                            serverFiltering: true,

                            serverSorting: true

                        },

                        height: 250,

                      

                        sortable: true,

                        pageable: true,

                        columns: [

                               

                            {

                                field: "Code",

                                title: "ID",

                                width: 100,

                               

                            }, {

                                field: "Name",

                                title: "Name",

                                width: 200

                            }, {

                                field: "ContactName",

                                title: "Contact Name"

                            }

                        ]

                    });

                                                          

                });

            </script>

        </div>

 

 

</body>

</html>



2 Answers, 1 is accepted

Sort by
0
Kai
Top achievements
Rank 1
answered on 03 Oct 2012, 03:15 PM
I don't know if your using MVC but in your method param list you might 
and in your return call you'd need
([DataSourceRequest] DataSourceRequest request)
return Json(results.ToDataSourceResult(request));
0
Mahaveer
Top achievements
Rank 1
answered on 04 Oct 2012, 09:41 AM
HI,

May be you are using wrong datatype(jsonp). Please check your datatype i used "odata" and it worked fine.
Please include the js which are required because sometime multiple js also creates the problem.
kendo.all.min.js contains a minified version of all scripts (Web, DataViz and Mobile).


Regards
Mahaveer
Tags
Grid
Asked by
Jerry
Top achievements
Rank 1
Answers by
Kai
Top achievements
Rank 1
Mahaveer
Top achievements
Rank 1
Share this question
or