CODEWITHSUNDEEP
angularjskendo-uikendo-grid
Rani Radcliff
Rani Radcliff

Reputation: 5084

Loop through Checkboxes in Kendo ui-Menu on Toolbar in Kendo Grid

I am trying to implement a Kendo ui-Menu in the toolbar of a Kendo Grid in Angular. I am manually creating the column list on the menu. I am able to show/hide the columns when clicking the checkboxes. I need to iterate through the checkboxes when the menu opens so that I can set checked/unchecked based on the options set on each column in the grid. The problem is that I don't know how to access the check/unchecked of the child nodes.

The code below gets all of the child nodes, but I don't know how to access their checked/unchecked values:

var columns = $(e.item).find(".k-item:not(:has(.k-group))");

I have a Dojo setup where the check/uncheck works, but I don't know how to access them from 'onOpen'. Any assistance is grealy appreciated.

Upvotes: 0

Views: 933

Answers (2)

Rani Radcliff
Rani Radcliff

Reputation: 5084

Thanks to Jarosław Kończak who put me on the right path, here is how I eventually was able to use the "hidden attribute" on my columns to set the checkboxes as checked or !checked by altering his suggestion just a little:

  $scope.onOpen = function(e) {
  var checkboxes = $(e.item).find(".k-item:not(:has(.k-group))").find("input[type='checkbox']");
  for (var i = 0; i < checkboxes.length; i++) {
      var checkbox = $(checkboxes[i]);
      if (checkbox.prop("checked")) {
          var fieldData = checkbox.data("field");
          var columns = $scope.SearchGrid.columns;
          for (var x = 0; x < columns.length; x++) {
              if (columns[x].field == fieldData) {
                  if (columns[x].hidden == true) {
                      checkbox.prop("checked", false);
                  }
              }
          }
      }
  }

}

Here is a working Dojo with dynamically created columns instead of the "manual" column list.

Upvotes: 0

Jarosław Kończak
Jarosław Kończak

Reputation: 3407

First you have to find checkbox element and then you can get checkbox checked value by using .prop("checked") method.

So if you eg. want to switch checkboxes values on menu open you can use:

$scope.onOpen = function(e) {
    var checkboxes = $(e.item).find(".k-item:not(:has(.k-group))").find("input[type='checkbox']");
    for(var i = 0; i < checkboxes.length; i++){
        var checkbox = $(checkboxes[i]);
        checkbox.prop("checked", !checkbox.prop("checked"));
    }
}

Updated dojo: http://dojo.telerik.com/OnAXI

Upvotes: 1

Related Questions