AngularJS Binding을 사용한 검도 격자

angularjs를 사용하여 검도 격자에 자동 완성 검도 상자를 추가하고 싶습니다.AngularJS Binding을 사용한 검도 격자

샘플 here은 제품 이름 필드의 JQUERY 검도 그리드에 있습니다. 필드를 클릭하고 새 행을 편집하거나 추가하십시오. , AngularJS와 검도 그리드를 사용하여 같은 구현을 도와주세요 http://demos.telerik.com/kendo-ui/grid/angular에서

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" 
     }); 
    }

출처

2014-12-04 Ajay Parsana

자동 완성 검도 상자가 AngularJS와 검도 그리드 빙입니다. 플 런커에서 코드를 실행하십시오.

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

출처

2014-12-08 10:07:16

코드,

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

출처

2014-12-04 11:11:34

AngularJS Binding을 사용한 검도 격자

답변

관련 문제