jeudi 23 juin 2016

Checkboxes using Kendogrid using Angular Js

Im stuck in implementing checkboxes using kendogrid in angularJs , Since Im new to AngularJs and Kendo , can't understand the documentations about Kendo well .


All my codes till now .

angular.module("myMod")
       .controller("myController", ['$scope',myService,
         function($scope,myService){
          $scope.myData=new kendo.data.ObservableArray([]);;
            $scope.myKendoGridOptions = {};

            ($scope.init = function(){
              $scope.myKendoGridOptions = {
                sortable:true,
                pageable:true,
                dataSource:{
                  data: $scope.myData,
                  pageSize:10
               }
                columns: [ {
                field:"Id",
                title:"Id"
            },{
                title:"Check here",
                template:"<input type='checkbox' class='checkbox'>"

              }
            ],
            dataBound: function () {
               $(".checkbox").bind("change", function (e) {
                  $(e.target).closest("tr").toggleClass("k-state-selected");
                  condole.log(e);
             });
           }
          };


                myService.getObjects().then(function(response)
                {
                    var myData = response.data;
                    $.each(myData, function(i,e){
                      $scope.myData.push(e);
                    });
                });
        })();

  }]);

Sample myData will be

[ 
  {
   Id:1,
   selected:false
  },
  {
   Id:2,
   selected:false
  },
  {
   Id:3,
   selected:true
  },
  {
   Id:4,
   selected:false
  },
  {
   Id:5,
   selected:true
  },
  {
   Id:6,
   selected:false
  }
] 

All the Datas are displaying as expected , nothing wrong with that , but how to bind the property of the object myData.selected with the checkboxes . Please help me guys.
What Iam trying to achieve is

  • Need to set the myData.selected property to true when checked
  • The checkbox should be already checked if the value of myData.selected is true. For above , the row corresponding to id 3 and id 5 should be checked if the value of myData.selected is true.

Since I am a newbie, a detailed explanation of the concept and solution will be awesome . Thanks.




Aucun commentaire:

Enregistrer un commentaire