cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
Showing results for 
Search instead for 
Did you mean: 

Community Tip - If community subscription notifications are filling up your inbox you can set up a daily digest and get all your notifications in a single email. X

Changing the Grid Widget

jrodrigues1
1-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;

                 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.

1 ACCEPTED SOLUTION

Accepted Solutions

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

         

View solution in original post

2 REPLIES 2

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

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

         

Top Tags