Click here to Skip to main content
14,668,844 members
Rate this:
Please Sign up or sign in to vote.
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

Rate this:
Please Sign up or sign in to vote.

Solution 1

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, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100