带有 AngularJS 绑定的剑道网格答案

【问题标题】：Kendo Grid with AngularJS Binding带有 AngularJS 绑定的剑道网格
【发布时间】：2014-12-04 10:31:43
【问题描述】：

我想使用 angularjs 在剑道网格中添加自动完成剑道框。

示例here 位于产品名称字段的 JQUERY Kendo 网格中。单击字段并编辑或添加新行。请帮助使用 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"
      });
  }

【问题讨论】：

标签： angularjs kendo-ui kendo-grid

【解决方案1】：

AutoComplete Kendo 框正在绑定到 AngularJS 剑道网格。请在 plunker 中运行以下代码

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

【讨论】：

【解决方案2】：

来自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>

【讨论】：