2 Replies Latest reply on Jan 12, 2018 10:08 PM by jrodrigues RSS
    jrodrigues Newbie

    Changing the Grid Widget

    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 +=
         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[i];
                     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 +=
      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.

      • Re: Changing the Grid Widget
        aanjan Heavyweight Champ

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

          • Re: Changing the Grid Widget
            jrodrigues Newbie

            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._colModel = colModel;
                         if (gridColTypes.length > 0) {