dhtmlx grid (colspan/rowspan) to look like Outlook preview..

Suite and Optimus Suite 5
#1

Visually, I have put together a nice looking proof of concept for my potential customer (see attached image)… however, I would like

ROW1: Index, String, Date, String Date
ROW2:   conspan=4 WORD WRAPPING PARAGRAPH

and both of those rows look and work like one. I have tried rowspan=2 on cell 1 w/o success. I have ColSpan=4 working perfecting (except for the wrapping and controlling it’s height).

then lastly, I want them to both be the same background, and ROW3 actually be the next background. I am doing this in my xml:

<?xml version="1.0" encoding="ISO-8859-1"?> <rows total_count='99' pos='0'> <row id='12294'> <cell>1</cell><cell>Ozz Nixon</cell><cell>2015-10-16 22:06</cell><cell/><cell/> </row> <row id='12294b'><cell/><cell colspan="4" rowspan="2">This is an example note that could exist. I am still researching how I can make this visually look more like it is part of the row above. The web browser does support hover over the note to display a tooltip hint of the rest of the paragraph - not exactly perfect.</cell> </row> etc.

#2

I found - adding: enableMultiline(true); to my grid definition gets me MUCH closer!!

Now if I could find how to make those two rows look white, and the next row be the light blue - I think I could finally demo this to the customer and buy a license for Pro (this framework is AWESOME - just sometimes it is a lot of hunting g).

O

#3

In case of using the pro version of dhtmlxGrid you may use the subrow column type.
dhtmlx.com/docs/products/dhtmlxG … brows.html

#4

Thank you for the sub_row suggestion. However, I need that functionality w/o the user having to click the [+] to expand - e.g. the sub_row needs to automatically show if it exists. Is this possible? That is why I started looking at just using another ROW - but that requires me changing the class/css per row (which may be the only solution - but, I am unsure how to do that).

Thanks!
Ozz

#5

Sleeping on this last night … possible to use a TreeGrid for this, however, not sure if the Tree grid supports Multiline, Colspan, etc, and auto-expanding [+]… never used TreeGrids before - so this will be fun. :wink:

Ozz

#6

** Never could get Tree Grid mode working…

So, I came up with this design:

tmp3 = new dhtmlXGridObject(window1.forms[3].getContainer(name)); tmp3.setImagePath("codebase/imgs/"); tmp3.setHeader("#,# of Techs,Employee,Done,Date Done,Inv Code"); tmp3.setInitWidths("50,110,160,60,110,80"); tmp3.setColAlign("right,left,left,center,left,center"); tmp3.setColTypes("ed,ed,ed,ch,ed,ed"); tmp3.setColSorting("int,str,str,str,str,str"); tmp3.enableCollSpan(true); tmp3.enableMultiline(true); tmp3.init(); tmp3.enableSmartRendering(true); tmp3.enableAlterCss("",""); tmp3.load("/common/1requests.xml"); tmp3.attachEvent("onXLE", function(grid) { bgcolor=true; colors=[]; colors[false]="#FFFFFF"; colors[true]="#EBF3FF"; for (loop=0;loop<grid.getRowsNum();loop++) { if (loop%3==0) { bgcolor=!bgcolor; } grid.setRowColor(grid.getRowId(loop),colors[bgcolor]); } });

This way it is multi-line, and in this case every 3 ROWS look the same color. I still have to override the select and double click logic - but, gets the look as close as I could.