How to get the value from kendo grid template textboxes to angular array

0
votes

I added two extra columns in in kendo grid which have not data in datasource. I add two textboxes in these two columns using template.Now I want to push the values of these two columns into an angular array oncheckbox checked. I search alot about this in google and in stackoverflow. But did not find any relevant answer for my problem Here is the code for adding template in kendo grid 

 $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" }
              ];

and here I want to fetch these columns. But I have no Idea How can i fetch sublist and level field values in selectedRow Array. Please Experts Help me

$scope.selectedRow = [];

          $scope.getSelectedRow = function (data) {


              $scope.selectedRow.push({ userId: data.substituteId});
              //   $scope.selectedRow.push({ userId: data.substituteId, sublist: sublist, level: level });
              console.log("mydata", $scope.selectedRow);

          };
2
angularjskendo-uikendo-grid

2 Answers

0
votes

I'm not sure familiar with anuglar, but I've done this in the past using just kendo.

Here is a simple grid I created with a checkbox on one column, and a text input on another column. The dataSource schema only has an id and a name property. But by adding the data bindings to the template input fields, those properties will be added to the dataSource data item.

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

Then if you dump the dataSource the grid is bound to (itemsDataSource in my instance), the items that you have changed the checkbox, or textbox will have those properties.

See sample running at JSBin

From there, you should be able to pull out the fields you want if the selected field is true etc.

0
votes

I am not sure but it worked for me...

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()),
                };