CODEWITHSUNDEEP
javascriptslickgrid
prthrokz
prthrokz

Reputation: 1150

Checkboxes with hierarchical data

I am using CheckboxFormatter plugin with hierarchical data. The problem is that if I check a collapsed group and then expand it, the child rows are not selected by default (selectedCellCssClass is not applied). I am pretty new to using SlickGrid. But this is how I assume the control should be flowing:

  1. There must be a 'hidden' attribute associated with each row when a checkbox formatter is used. Clicking the checkbox would simply toggle this attribute to true/false.
  2. Clicking checkbox should raise an onClick/onChecked event which can be overridden.
  3. In the event, one can check to see if the checked row has children, if yes, then set the 'hidden' attribute on the children.
  4. Apply the css on checked rows.

If anyone can point me to the specific events, attributes used, that would act as a great starting point. Also the steps I have mentioned are just a guess :D Any help on actual process will be much appreciated.

Thanks!

Upvotes: 0

Views: 785

Answers (1)

prthrokz
prthrokz

Reputation: 1150

I ended up giving my own checkbox implementation without using CheckboxFormatter. I added a checked property to my data model and whenever a row would be checked, I recursively changed the state of all affected rows. 

var
     $target = $(event.target),
     isChecked = $target.is(":checked"),
     id = dataContext['id'],
     item = dataView.getItemById(id),
     children = getChildren(id), // helper method to get children for curr
     parent = getParent(id); // helper method to get parent for curr


 dataContext['checked'] = isChecked;
 dataView.updateItem(dataContext['id'], dataContext);

// loop through all children recursively
 while (children && children.length > 0) {
      var item = children.shift();
      item.checked = isChecked;
      dataView.updateItem(item.id, item);
      var _children = getChildren(item.id);
      if (_children && _children.length > 0)
           children = [].slice.call(_children).concat(children);
 }
 // traverse up the hierarchy
 while (parent && parent.id != config.currentUser) {
        if (!isChecked) {
             parent.checked = isChecked
             dataView.updateItem(parent.id, parent);
        } else {
             // if all siblings are checked, change state of parent.
              var siblingsChecked = true;
              $.each(getChildren(parent.id), function (index, item) {
              if (!item.checked)
                    siblingsChecked = false;
              }); 
              if (siblingsChecked) {
                   parent.checked = isChecked;
                   dataView.updateItem(parent.id, parent);
              }
         }
          parent = dataView.getItemById(parent.parentId);
  }

I then had to override the getItemMetaData method to return a specific css class for all checked rows.

dataView.getItemMetadata = function (index) {
     var item = dataView.getItem(index);
     if (item.checked === true) {
         return { cssClasses: 'slick-row-selected' };
      }
};

Upvotes: 1

Related Questions