2 Replies Latest reply on Mar 18, 2016 7:51 AM 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 +=
      '<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[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 +=
      '</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.

      • 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.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);