Kendo Grid with AngularJS Binding

Question

I wanted to add autocomplete kendo box in kendo grid using angularjs.

Sample here is in JQUERY Kendo grid in Product Name field.Click on field and edit or add new row. Please help with such implementation using AngularJS Kendo Grid,

  function Editor2(container, options) {
    $('<input id="autocomplete" required data-text-field="ProductName" data-value-field="ProductID" data-bind="value:' + options.field + '"/>')
      .appendTo(container)
      .kendoAutoComplete({
        dataSource: dataSource,
        dataTextField: "ProductName"
      });
  }

Ajay Parsana · Accepted Answer · 2022-12-22 18:33:47Z

Please run below code in plunker to learn how to bind AngularJS Kendo Grid

    <!DOCTYPE html>
<html>
<head>
    <base href="http://demos.telerik.com/kendo-ui/grid/angular">
    <style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.default.min.css" />

    <script src="http://cdn.kendostatic.com/2014.3.1119/js/jquery.min.js"></script>
    <script src="http://cdn.kendostatic.com/2014.3.1119/js/angular.min.js"></script>
    <script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>
</head>
<body>
    <div id="example" ng-app="KendoDemos">
    <div ng-controller="MyCtrl">
        <kendo-grid options="mainGridOptions">
           
        </kendo-grid>


    </div>
</div>

<script>
    angular.module("KendoDemos", [ "kendo.directives" ])
        .controller("MyCtrl", function($scope){
          $scope.countryNames = [
              "Albania",
              "Andorra",
              "Armenia",
              "Austria",
              "Azerbaijan",
              "Belarus",
              "Belgium",
              "Bosnia & Herzegovina",
              "Bulgaria",
              "Croatia",
              "Cyprus",
              "Czech Republic",
              "Denmark",
              "Estonia",
              "Finland",
              "France",
              "Georgia",
              "Germany",
              "Greece",
              "Hungary",
              "Iceland",
              "Ireland",
              "Italy",
              "Kosovo",
              "Latvia",
              "Liechtenstein",
              "Lithuania",
              "Luxembourg",
              "Macedonia",
              "Malta",
              "Moldova",
              "Monaco",
              "Montenegro",
              "Netherlands",
              "Norway",
              "Poland",
              "Portugal",
              "Romania",
              "Russia",
              "San Marino",
              "Serbia",
              "Slovakia",
              "Slovenia",
              "Spain",
              "Sweden",
              "Switzerland",
              "Turkey",
              "Ukraine",
              "United Kingdom",
              "Vatican City"
                  ];
      
        var data = new kendo.data.DataSource({
    data: [
              {Name: "Albania"},
              {Name:"Andorra"},
              {Name:"Armenia"},
              {Name:"Austria"},
              {Name:"Azerbaijan"},
              {Name:"Belarus"},
              {Name:"Belgium"},
              {Name:"Bosnia & Herzegovina"},
              {Name:"Bulgaria"},
              {Name:"Croatia"},
              {Name:"Cyprus"},
              {Name:"Czech Republic"},
              {Name:"Denmark"},
              {Name:"Estonia"},
              {Name:"Finland"},
              {Name:"France"},
              {Name:"Georgia"},
              {Name:"Germany"},
              {Name:"Greece"},
              {Name:"Hungary"},
              {Name:"Iceland"},
              {Name:"Ireland"},
              {Name:"Italy"},
              {Name:"Kosovo"},
              {Name:"Latvia"},
              {Name:"Liechtenstein"},
              {Name:"Lithuania"},
              {Name:"Luxembourg"},
              {Name:"Macedonia"},
              {Name:"Malta"},
              {Name:"Moldova"},
              {Name:"Monaco"},
              {Name:"Montenegro"},
              {Name:"Netherlands"},
              {Name:"Norway"},
              {Name:"Poland"},
              {Name:"Portugal"},
              {Name:"Romania"},
              {Name:"Russia"},
              {Name:"San Marino"},
              {Name:"Serbia"},
              {Name:"Slovakia"},
              {Name:"Slovenia"},
              {Name:"Spain"},
              {Name:"Sweden"},
              {Name:"Switzerland"},
              {Name:"Turkey"},
              {Name:"Ukraine"},
             {Name: "United Kingdom"},
              {Name:"Vatican City"}
    ]});
      
                
                   Editor2 = function (container, options){
         $('<input  data-bind="value:' + options.field + '" style="width: 100px" />')
          .appendTo(container)
          .kendoAutoComplete({
dataSource: options.values
         });};
      
            $scope.mainGridOptions = {
                          dataSource: data,
                   
                
                sortable: true,
                pageable: true,
               
                columns: [{
                    field: "Name",
                    title: "Name",
                    width: "120px",
                    editor: Editor2,
                  values: $scope.countryNames
                    }],editable: true
            };
           
      
     
      
        })
</script>


</body>
</html>

Anil Singh · Accepted Answer · 2015-10-09 11:42:36Z

Code from http://demos.telerik.com/kendo-ui/grid/angular,

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="styles/kendo.common.min.css" />
    <link rel="stylesheet" href="styles/kendo.default.min.css" />
    <link rel="stylesheet" href="styles/kendo.dataviz.min.css" />
    <link rel="stylesheet" href="styles/kendo.dataviz.default.min.css" />

    <script src="js/jquery.min.js"></script>
    <script src="js/angular.min.js"></script>
    <script src="js/kendo.all.min.js"></script>
</head>
<body>
    <div id="example" ng-app="KendoDemos">
    <div ng-controller="MyCtrl">
        <kendo-grid options="mainGridOptions">
            <div k-detail-template>
                <kendo-tabstrip>
                <ul>
                    <li class="k-state-active">Orders</li>
                    <li>Contact information</li>
                </ul>
                <div>
                    <div kendo-grid k-options="detailGridOptions(dataItem)"></div>
                </div>
                <div>
                    <ul>
                        <li>Country: <input ng-model="dataItem.Country" /></li>
                        <li>City: <input ng-model="dataItem.City" /></li>
                        <li>Address: {{dataItem.Address}}</li>
                        <li>Home phone: {{dataItem.HomePhone}}</li>
                    </ul>
                </div>
                </kendo-tabstrip>
            </div>
        </kendo-grid>


    </div>
</div>

<script>
    angular.module("KendoDemos", [ "kendo.directives" ])
        .controller("MyCtrl", function($scope){
            $scope.mainGridOptions = {
                dataSource: {
                    type: "odata",
                    transport: {
                        read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Employees"
                    },
                    pageSize: 5,
                    serverPaging: true,
                    serverSorting: true
                },
                sortable: true,
                pageable: true,
                dataBound: function() {
                    this.expandRow(this.tbody.find("tr.k-master-row").first());
                },
                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"
                }]
            };

            $scope.detailGridOptions = function(dataItem) {
                return {
                    dataSource: {
                        type: "odata",
                        transport: {
                            read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
                        },
                        serverPaging: true,
                        serverSorting: true,
                        serverFiltering: true,
                        pageSize: 5,
                        filter: { field: "EmployeeID", operator: "eq", value: dataItem.EmployeeID }
                    },
                    scrollable: false,
                    sortable: true,
                    pageable: true,
                    columns: [
                    { field: "OrderID", title:"ID", width: "56px" },
                    { field: "ShipCountry", title:"Ship Country", width: "110px" },
                    { field: "ShipAddress", title:"Ship Address" },
                    { field: "ShipName", title: "Ship Name", width: "190px" }
                    ]
                };
            };
        })
</script>


</body>
</html>

Collectives™ on Stack Overflow

Kendo Grid with AngularJS Binding

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related