如何从kendo网格模板文本框获取值到角度数组

时间:2015-07-09 07:05:11

标签: angularjs kendo-ui kendo-grid

我在kendo网格中添加了两个额外的列,这些列在数据源中没有数据。我使用template在这两列中添加了两个文本框。现在我想将这两列的值推送到一个角度数组oncheckbox中。我在google和stackoverflow中搜索了很多这个。但没有找到我的问题的任何相关答案这是在剑道网格中添加模板的代码

pip install meliae==0.4.0

在这里我想获取这些列。但我不知道如何在selectedRow数组中获取子列表和级别字段值。请专家帮帮我

 $scope.qualifySubGridColumns = [
                { template: "<input type='checkbox' class='subCheck checkbox' ng-click='getSelectedRow(dataItem)' />" },

                { field: "subList", template: "<input type='number' ng-minlength='0' ng-init='prefferedUser.subList=0'>", title: "SubList" },
                { field: "level", template: '<input type="number" ng-model="prefferedUser.level" ng-minlength="0" ng-init="prefferedUser.level=0">', title: "Level" },
                { field: "lastName", title: "Last Name" },
                { field: "firstName", title: "First Name" },
                { field: "email", title: "Email" },
                { field: "address1", title: "Address 1" },
                { field: "address2", title: "Address 2" },
                { field: "phone", title: "Phone" }
              ];

2 个答案:

答案 0 :(得分:0)

我不太熟悉anuglar,但我过去只使用剑道做过这个。

这是我创建的一个简单网格,其中一列上有复选框,另一列上有文本输入。 dataSource模式只有id和name属性。但是,通过将数据绑定添加到模板输入字段,这些属性将添加到dataSource数据项中。

<div id="grid" 
   data-role="grid" 
   data-columns="[{ field: 'id', title: 'Select', template: '<input type=\'checkbox\' data-bind=\'checked: selected\' />' },
                  { field: 'name', title: 'Name' },
                  { title: 'Age', template: '<input type=\'number\' data-bind=\'value: age\' />' }]" 
   data-bind="source: itemsDataSource">
</div>

然后,如果您转储dataSource,网格被绑定到(我的实例中为itemsDataSource),那么您更改了复选框或文本框的项目将具有这些属性。

查看在JSBin

运行的示例

从那里,如果所选字段为真等,您应该能够提取所需的字段。

答案 1 :(得分:0)

我不确定,但它对我有用......

HTML:

 <body>
    <div kendo-grid k-options="gridOptions" k-ng-delay="gridOptions" k-on-change="selected=data"></div>
    </body>   

    <script id="RowId" type="text/x-kendo-template">
      <tr>
        <td><input ng-model="dataItem.Name"></td>
      </tr>
    </script>

JS:

$scope.Array= new kendo.data.ObservableArray([Object,Object]);

$scope.gridOptions = {
                    dataSource: new kendo.data.DataSource({
                        pageSize: 20,
                        data: $scope.Array,
                        autoSync: true,
                        schema: {
                            model: {
                                id: "Id",
                            }
                        }
                    }),
                    sortable: true,
                    resizable: true,
                    autoSync: true,
                    scrollable: true,
                    columns: [
                      {
                          field: "Name",
                          title: "Name",
                          editable: True,
                      },                      
                    ],
                    rowTemplate: kendo.template($("#RowId").html()),
                };