How to add widget to Dojo gridx/Grid header?

Question

I have gridx/Grid (http://oria.github.io/gridx/) and I want to add some widgets in header cells like textboxes, dropdowns etc. Is there a way to put widget in header cell?

Answer 1

It seems that what you need is a module called HeaderRegions. Here is it's API . Especially note the add and refresh methods.

For a simple example take a look here.

To affect only one column header, use a predicate on the argument (column) provided by the callback that is the first argument of add (easiest would be to use the column id).

To insert a widget, create it programatically, fire it's startup method and return it's domNode attribute.

(I am not sure but it may be that startup should be called after the grid is rendered. For this you may have to keep a reference to the widget outside the method)

For completeness, I include the some of the example linked above:

Deferred.when(parser.parse(), function() {
  var hr = grid1.headerRegions;
  hr.add(function(col) {
    return domConstruct.create('div', {
      style: 'height: 13px; width: 10px; background-color: red;'
    });
  }, 0, 0);
  hr.add(function(col) {
    return domConstruct.create('div', {
      style: 'height: 13px; width: 10px; background-color: green;'
    });
  }, 1, 0);
  hr.refresh();
});