Kendo Grid with AngularJS Binding

Я хотел добавить автозаполнение кендо в сетке кендо с помощью угловых символов.Kendo Grid with AngularJS Binding

Образец here находится в сетке JQuery Kendo в поле Product field. Нажмите на поле и отредактируйте или добавьте новую строку. Пожалуйста, помогите с такой реализацией, используя AngularJS Кендо 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" 
     }); 
    }

источник

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

код из 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>

источник

2014-12-04 11:11:34

Kendo Grid with AngularJS Binding

ответ

Смежные вопросы