The multiselect button repeats every time use dc.renderAll

Question

I used the idea developed by Jeno and Gordon at dc.js multiple select menu with checkboxes , Specifically dc.js multiple select menu with checkboxes.

selectField.on('postRender', function() {
 $('#menuselect select').change(function(){
  console.log($(this).val())
  if ($(this).val() && $(this).val() != "") {
   selectField.replaceFilter([$(this).val()]);
  } else {
   selectField.filterAll();
  }
   dc.events.trigger(function () {
   dc.redrawAll();
  });
 }).multipleSelect({ placeholder: "Select Country"})
});

The problem I have is that every time I use dc.renderAll() (in a reset All button and when the page size changes) the same multiselect button is copied, cloned next to the button and so on depending on how many times Enable renderAll (). Additionally, the menu is not updated if a filter is applied to a chart.

Can you think of a solution?

Thank

score 0 · Accepted Answer · answered Apr 21 '17 at 20:01

Using jQuery to replace display elements is always kind of tricky. It looks like this one may attach itself to the specific select element, and if that's replaced (during the render), it will go ahead and create a new menu.

Easily enough dealt with, just remove any old menus when doing a render, and also refresh the control when doing a redraw:

function re_jmulti(clear) {
  return function() {
    if(clear)
      selectField.selectAll('.ms-parent.dc-select-menu').remove();
    $('#menuselect select')
    .change(function() {
      console.log($(this).val());
      //selectField.replaceFilter($(this).val()); // why?
    })
    .multipleSelect({
      placeholder: "Select Country"
    });
  };
}

selectField.on('postRender', re_jmulti(true));
selectField.on('postRedraw', re_jmulti(false));

However, I am working with an older version of the code than you pasted above, since I was running into infinite recursion with the replace filter and redraw all logic. So it's not a complete solution, since it does not duplicate and it does update, but it regresses on a couple of the issues in the earlier question.

Fiddle: https://jsfiddle.net/gordonwoodhull/Lghj8ztj/32/

sure thing! if you work out a combined solution that doesn't have the regressions, maybe you could post the code somewhere. i'm sure it will help others. — Gordon, Apr 26 '17 at 18:34

The multiselect button repeats every time use dc.renderAll

1 Answers1