locked
kendo-grid k-options inside text/ng-template not working RRS feed

  • Question

  • User-2108369543 posted

    hi

    i am new in angular js.My keno-angular grid show nothing.my code is same as http://kendo-labs.github.io/angular-kendo/#/Grid by with one diiference & that is my kendo grid div is inside ng-template that is

    <div class="row" ng-app="ngAccounting">
    
      <script type="text/ng-template" id="fiscalYearList">
         <div kendo-grid k-options="GirdFiscalYear" ></div>  
       </script>
     <ng-view></ng-view>
    </div>
    ngAccounting.controller("FiscalYearController", function ($scope, $http, $routeParams,
    FiscalYearService) {
    
     $scope.GirdFiscalYear = {
        dataSource: {
            type: "json",
            transport: {
                read: "../Accounting/Accounting/FiscalYear/Read"
            },
            pageSize: 5,
            serverPaging: true,
            serverSorting: true
        },
        sortable: true,
        pageable: true,
        columns: [{
            field: "Code",
            title: "Code",
            width: "120px"
        }, {
            field: "StartDate",
            title: "Start Date",
            width: "120px"
        }, {
            field: "EndDate",
            title: "End Date",
            width: "120px"
        }, {
            field: "Remarks",
            field: "Remarks",
            width: "120px"
        }]
        }; 
       });

    When i run ,i see no grid.when i try to see the source in firbug i found grid <div kendo-grid k-options="GirdFiscalYear" ></div> 
    rendered as <div k-options="GirdFiscalYear" kendo-grid="" ></div> Where is the problem? kendo-date-picker is working with text/ng-template
    crrectly.what is the problem with grid?Please help me.
    Sunday, August 10, 2014 10:52 PM

Answers

  • User-376018714 posted

    Hi

    Are you using Kendo UI Core ... if yes - kendo ui core does not contain Grid. Grid is part of Kendo UI Prof.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, August 11, 2014 1:57 PM
  • User-417640953 posted

    Hi sabbirspider,

    Thanks for your post.

    If your code provided right according to their document for using angular kendogrid.

    I think you should reference the right jquery files in your mvc view. As the document mentioned below.

    "You have to load (in this order) jQuery, AngularJS, Kendo and  Angular-Kendo bindings.  You can get the latest

    version of Angular-Kendo  from the Github  repository: github.com/kendo-labs/angular-kendo."

    <script src="js/jquery.min.js"></script>
    <script src="js/angular-1.2.14.min.js"></script>
    <script src="js/kendo.all.min.js"></script>
    <script src="js/angular-kendo.js"></script>

    Besides, I suggest you take a look at below article "AngularJS & Kendo UI using Angular Kendo with ASP.NET MVC"

    http://blog.longle.net/2014/05/01/angularjs-kendo-ui-using-angular-kendo-with-asp-net-mvc-5-web-api-odata/

    Hope this helps, thanks.

    Best Regards!

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, August 12, 2014 11:35 PM

All replies

  • User-376018714 posted

    Hi

    Are you using Kendo UI Core ... if yes - kendo ui core does not contain Grid. Grid is part of Kendo UI Prof.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, August 11, 2014 1:57 PM
  • User-2108369543 posted

    thanks kashyapa for your right ans,I am going to 'Mark you right Answer'

    can you please consider the following scenario and try where the problem is?

    part of my view

     <script type="text/ng-template" id="employee">
         <p>{{Welcome}}</p>
            <div kendo-grid k-options="mainGridOptions"></div>
        </script>
        <ng-view></ng-view>

    js controller

    MyApp.controller("EmployeeController", function ($scope, $http, $routeParams, EmployeeService) {
    
        $scope.Welcome = "Welcome employee";
        $scope.mainGridOptions = {
            dataSource: {
                type: "odata",
                transport: {
                    read: "/Home/GetEmployee"
                },
                pageSize: 5,
                serverPaging: true,
                serverSorting: true
            },
            sortable: true,
            pageable: true,
            schema: { data: "Data", total: "Total" },
            columns: [{
                field: "FirstName",
                title: "First Name",
                width: "120px"
            }, {
                field: "LastName",
                title: "Last Name",
                width: "120px"
            }, {
                field: "Country",
                width: "120px"
            }, {
                field: "City",
                width: "120px"
            }, {
                field: "Title"
            }]
        };
    });

    code for /Home/GetEmployee

      [HttpGet]
    				public JsonResult GetEmployee()
    				{
    					var list = new List<Employee>();
    
    					var employee = new Employee
    					{
    						FirstName="Sabbir",
    						LastName="Ahmed",
    						Title="dfsdfsda",
    						City="safsdf",
    						Country="sdfsd"
    					};
    					list.Add(employee);
    					 employee = new Employee
    					{
    						FirstName = "Sasdfbbir",
    						LastName = "Ahsdfsdmed",
    						Title = "dfsdfssdfda",
    						City = "safsdfsdf",
    						Country = "sdsdfsdffsd"
    					};
    
    					 list.Add(employee);
    					 var dasfdsa = new GridModel
    					 {
    						 Data = list,
    						 Total = list.Count()
    					 };
    
    					 return Json(dasfdsa, JsonRequestBehavior.AllowGet);
    				}

    it show empty grid.where is the problem?

    Tuesday, August 12, 2014 11:49 AM
  • User-417640953 posted

    Hi sabbirspider,

    Thanks for your post.

    If your code provided right according to their document for using angular kendogrid.

    I think you should reference the right jquery files in your mvc view. As the document mentioned below.

    "You have to load (in this order) jQuery, AngularJS, Kendo and  Angular-Kendo bindings.  You can get the latest

    version of Angular-Kendo  from the Github  repository: github.com/kendo-labs/angular-kendo."

    <script src="js/jquery.min.js"></script>
    <script src="js/angular-1.2.14.min.js"></script>
    <script src="js/kendo.all.min.js"></script>
    <script src="js/angular-kendo.js"></script>

    Besides, I suggest you take a look at below article "AngularJS & Kendo UI using Angular Kendo with ASP.NET MVC"

    http://blog.longle.net/2014/05/01/angularjs-kendo-ui-using-angular-kendo-with-asp-net-mvc-5-web-api-odata/

    Hope this helps, thanks.

    Best Regards!

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, August 12, 2014 11:35 PM
  • User-2108369543 posted

    thanks Fuxiang,

    you are right,it works.my js file are bellow

        <script src="//code.jquery.com/jquery-1.9.0.min.js"></script>
        <script src='@Url.Content("~/Scripts/bootstrap.min.js")'></script>
        <script src='@Url.Content("~/Scripts/metisMenu.min.js")'></script>
        <script src='@Url.Content("~/Scripts/sb-admin-2.js")'></script>
    
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.js"></script>
    
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular-route.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular-resource.js"></script>
        <script src="http://cdn.kendostatic.com/2014.2.716/js/kendo.ui.core.min.js"></script>
        <script src="//cdn.kendostatic.com/2014.1.416/js/kendo.all.min.js"></script>
        <script src="~/Scripts/angular-kendo.js"></script>
        <script src="~/Scripts/Test.js"></script>

    in my previous post in this forum ,if i alter 'odata' to 'json' (in grid dataSource) it works.for 'odata' it does not work.When i add 'json' and pageSize=1(where total data is 2),it show all(all 2 item) in the list and show page 1 &2.But it should show 1 data in first page & 1 data in second page.i just do automatic paging like http://kendo-labs.github.io/angular-kendo/#/Grid .In this link datasource type='odata',How can i make 'odata' type from controller and enable automatic paging like the above link?please let me know.it urgent.

    Wednesday, August 13, 2014 12:53 AM