[Joe WeinpertParticipant]

Issue resolved. A delay will do the cell rendering properly for the grid when the need to get the current row heights exists: setTimeout( function(){ $( "#managementGrid" ).jqxGrid( "refresh" ) }, 500 )

[Joe WeinpertParticipant]

Wait … my fault, the cells are being rendered except getting the row height within the cellsrenderer: function by using rowHeight = $( "#row" + row + "managementGrid" ).height() is being ignored until after a cell is edited. The purpose of obtaining the current row height is to vertically center the cell’s value. Is there anyway to force knowing each row’s height after the data is populated and prior to editing a cell?

[Joe WeinpertParticipant]

Thanks for the workaround example! I see the requirements are to use a margin attribute rather then a height attribute within any cellsrenderer function. The height attribute was basing itself on the overall grid height and not the current row division height … which is why the each row in the grid would expand on any click until the 100% value was achieved.

A cellbeginedit function has the ability to get the height of the current row we are doing something in because each row has its own ID generated by jQWidgets. (row0GridName, row1GridName, row2GridName, … ).

$( "#row0GridName" ).height() works fine within any cellbeginedit function, however, it does not work from within a cellsrenderer function. My guess is because all the cells in the row are being rendered and the height would not be fixed until rendering is done.

[Joe WeinpertParticipant]

This does work except for a major problem;

cellTextRenderer = function( row, dataField, value, defaultHTML, columnProperties, rowData ){
   return "<table style='width: 100%; height: 100%;'><tr><td style='padding: 0px 4px; vertical-align: middle;'>" + rowData.ActionDescribe + "</td></tr></table>"
}

The problem happens when, after the cell is rendered, and I click on a columntype: checkbox cell in the grid, all the row heights in the whole grid keep getting bigger on each click. This problem is being caused by the height: 100%;

Any ideas?

[Joe WeinpertParticipant]

Creating a class like:

   .verticalAlign{
      vertical-align: middle;
   }

and then using the cell attribute:

cellclassname: "verticalAlign"

does not work. The text is still rendered at the top of the cell rather than the middle. As mentioned before, I am using the cell attribute:

cellsrenderer: textRenderer

[Joe WeinpertParticipant]

Thank you Peter!

Your fix does indeed work. There is, however, a mistake in my post.

At first I thought that programmatically disabling and then re-enabling a knob was working, even though the re-colorization was not. I was wrong. Once it is re-enabled, certain features stop working correctly. Things like dragging the pointer around, or clicking on a label and expecting the progress bar to correctly change. The knob, and all of its attributes, acts really discombobulated.

[Joe WeinpertParticipant]

That is the grid attribute I was looking for. Thanks!

[Joe WeinpertParticipant]

Gorgeous!

[Joe WeinpertParticipant]

I had already looked at http://jqwidgets.com/themebuilder before posting, but could not find a way to import the ui-darkness theme, nor did I see Ribbon in the samples shown on the page.

Any other ideas?

[Author]

Posts