kendo grid is not rendering.

Question

0.00/5 (No votes)

See more:

hello all,

i am using VS2013 and a newbie in kendo grid professional. i am trying to render a simple grid using kendo UI and angular JS. Following is is the code but it is not rendering for some reason. pls help. thanks in advance

HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    <link href="Scripts/kendoui.professional.2015.1.429/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="Scripts/kendoui.professional.2015.1.429/styles/kendo.default.min.css" rel="stylesheet" />
    <link href="Content/kendo/2015.1.429/kendo.common-bootstrap.min.css" rel="stylesheet" />
    <link href="Content/kendo/2015.1.429/kendo.metro.min.css" rel="stylesheet" />
   
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

    <script src="Scripts/kendoui.professional.2015.1.429/js/kendo.all.min.js"></script>
   
    <script src="Scripts/kendoui.professional.2015.1.429/js/kendo.angular.min.js"></script>

</head>

<body ng-app="KendoDemos">
    <h1>Customer list</h1>

    <div ng-controller="CustomerController" style="width: 100%">

        <!--<div kendo-grid k-options="gridOptions">hello </div>-->
        <div kendo-grid k-data-source="gridData" k-columns="gridColumns">hello </div>


        <h2>Customer list2 </h2>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
    <script type="text/javascript">
    
        
        angular.module("KendoDemos", []).controller("CustomerController", function ($scope) {

            $scope.gridData = new kendo.data.DataSource({
                data: [
                { customerId: '1', customerName: 'shikhar1' },
                { customerId: '2', customerName: 'shikhar2' },
                { customerId: '3', customerName: 'shikhar3' },
                { customerId: '4', customerName: 'shikhar4' }


                //{
                //dataSource: "http://localhost:58816/api/Values"
                //     }
                ]
            });

            $scope.gridColumns = [
            {
                field: "customerId",
                title: "customerId"
            },
            {
                field: "customerName",
                title: "customerName"
            }
            ];

        });
        
        

    </script>

</body>
</html>

Posted 18-May-15 21:09pm

shikhar gilhotra

Add a Solution

Comments

shikhar gilhotra 19-May-15 3:10am

the HTML output is not showing any error in console but not rendering the grid as well

Kornfeld Eliyahu Peter 19-May-15 3:29am

Telerik has a very good support system - you should ask them first...

shikhar gilhotra 19-May-15 3:36am

where ? how ?

1 solution

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

satheeshkanyakumari · Answer 1 · 2015-05-18T23:20:00

Solution 1

hi try the below URL http://demos.telerik.com/kendo-ui/grid/angular

Posted 18-May-15 23:20pm

satheeshkanyakumari

kendo grid is not rendering.

1 solution

Solution 1

Add your solution here

Preview 0

kendo grid is not rendering.

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us