Changing the Grid Widget

[jrodrigues1]

I am working on changing the grid widget from the Thingworx default code.

My goal its to display the grid but without the top black header(remove the header row), I only want to display the information below that row.

I found out that the HTML that generates the header in the runtime.js file appears like this:

this.buildHeaderRowHtml = function(infoTableDataShape) {
  var html = '';
  html +=
  '<thead>';
     if( thisWidget.getProperty('ShowAllColumns') === true ) {
         var renderer = TW.Renderer.DEFAULT;
                for (var fieldName in infoTableDataShape) {
  html += '<th><div class="print-header-cell">' + fieldName + '</div></th>'
                }
     } else {
         var colFormat = thisWidget.getProperty('ColumnFormat');
         if (colFormat !== undefined && colModel.length === 0) {
             // translate our internal 'ColumnFormat' to the dhtmlxgrid's idea of a column model
             for (var i = 0; i < colFormat.formatInfo.length; i++) {
                 var col = colFormat.formatInfo;
                 var thisWidth = 100;
                 if (col.Width === 'auto') {
                     thisWidth = undefined;
                 } else {
                     thisWidth = col.Width;
                 }
                 colModel.push({ name: col.FieldName, label: TW.Runtime.convertLocalizableString(col.Title), width: thisWidth, align: col.Align, formatoptions: col.FormatOptions, col: col });
             }
         }
  _.each(colModel,function(col) {
  html += '<th><div class="print-header-cell">' + col.label + '</div></th>'
  });
     }
  html +=
  '</thead>';
  return html;
  }

Anyone here that explored the default code of the Grid Widget and knows how to disable the header or just the way to change the code to do what I want?

Thank you.

[Aanjan]

João, you could possibly create this as your own custom extension and import that instead.

[jrodrigues1 · Accepted solution]

Thank you for your answer.

I manage to get my widget working by adding the setNoHeader(bool) method to the init function of the runtime.js file

 newgrid = new dhtmlXGridObject(domElementIdOfnewgrid);
                newgrid.fontWidth = headerFontWidth;
             newgrid.enableKeyboardSupport(true);
             newgrid._colModel = colModel;
             newgrid.setImagePath("/Thingworx/Common/dhtmlxgrid/codebase/imgs/");
             newgrid.setHeader(gridHeader);
             newgrid.setNoHeader(true);
             newgrid.setInitWidths(gridInitWidths);
             newgrid.setColAlign(gridColAlign);
             if (gridColTypes.length > 0) {
                 newgrid.setColTypes(gridColTypes);