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

Yes you can there is a plugin for the datagrid that you can add textbox and other input stuff within the layout. example of a layout

var layout = [
    {name: 'Index', field: 'id'},
    {name: 'Date', field: 'date', width: 10,
        formatter: formatDate,                // Custom format, change the format in store.
        editable: true,                       // Editable cell
        type: dojox.grid.cells.DateTextBox,   // Use DateTextBox in editing mode
        getValue: getDateValue,               // Translate the value of DateTextBox to something the store can understand.
        constraint: {formatLength: 'long'}    // Format the date value shown in DateTextBox
    }
];

or this is more complete example

require(["dojox/grid/DataGrid", "dojox/grid/cells", "dojox/grid/cells/dijit",
"dojo/date/locale", "dojo/currency", "dijit/form/DateTextBox", "dijit/form/CurrencyTextBox",
"dijit/form/HorizontalSlider", "dojo/domReady!"
], function(DataGrid, cells, cellsDijit, locale, currency, DateTextBox, CurrencyTextBox, HorizontalSlider){
function formatCurrency(inDatum){
    return isNaN(inDatum) ? '...' : currency.format(inDatum, this.constraint);
}
function formatDate(inDatum){
    return locale.format(new Date(inDatum), this.constraint);
}
gridLayout = [{
    defaultCell: { width: 8, editable: true, type: cells._Widget, styles: 'text-align: right;'  },
    cells: [
        { name: 'Id', field: 'id', editable: false, width: 2 /* Can't edit ID's of dojo/store items */ },
        { name: 'Date', field: 'col8', width: 10, editable: true,
            widgetClass: DateTextBox,
            formatter: formatDate,
            constraint: {formatLength: 'long', selector: "date"}},
        { name: 'Priority', styles: 'text-align: center;', field: 'col1', width: 10,
            type: cells.ComboBox,
            options: ["normal","note","important"]},
        { name: 'Mark', field: 'col2', width: 5, styles: 'text-align: center;',
            type: cells.CheckBox},
        { name: 'Status', field: 'col3',
            styles: 'text-align: center;',
            type: cells.Select,
            options: ["new", "read", "replied"] },
        { name: 'Message', field: 'col4', styles: '', width: 10 },
        { name: 'Amount', field: 'col5', formatter: formatCurrency, constraint: {currency: 'EUR'},
            widgetClass: CurrencyTextBox, width: "auto" },
        { name: 'Amount', field: 'col5', formatter: formatCurrency, constraint: {currency: 'EUR'},
            widgetClass: HorizontalSlider, width: 10}
    ]
}];

remember you need to add dojo.require("dojox.grid.cells.dijit");

you can read about it here

UPDATE here is the gridx example

var grid = new Grid({
  cacheClass: 'gridx/core/model/cache/Async',
  store: someStore,
  structure: [
    { id: 'progress', field: 'progress', name: 'Install Progress',
      widgetsInCell: true,
      decorator: function(){
          return "<input type="text" name='firstname' value='testing testing'  data-dojo-type='dijit/form/TextBox' data-dojo-props="trim:true, propercase:true" id='firstname' />";
      }
    }
  ],
  modules: [
    "gridx/modules/CellWidget"
  ]
});

for more details have a read here

UPDATE2 Okay if I understand you correctly now when you create a gridx each layout name field will have the field name in it associated with grid- prefix so if the header you want to change is the name header you need use grid-prefix to replace the value or inject it with html

   //Clear the value inside the grid
     domConstruct.empty("grid-name")
//place a textbox in the header
    require(["dijit/form/TextBox", "dojo/domReady!"], function(TextBox){
        var myTextBox = new dijit.form.TextBox({
            name: "firstname",
            value: "" /* no or empty value! */,
            placeHolder: "type in your name"
        }, "grid-name");
    });

Answer 2

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();
});