Click here to Skip to main content
14,694,172 members
Please Sign up or sign in to vote.
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


<!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
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

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

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

  Print Answers RSS
Top Experts
Last 24hrsThis month



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900