ListGrid with 200 columns

[jayeshecs]

SmartClient version: 10.0p 2015-06-15 LGPL
Browsers: IE8,
Chrome: 43.0.2357.130 m
Firefox: 36.0.1

In our project we need to render grid with ...
... a) Ranging from 20 to 200 columns
... b) 200 records
... c) Client only grid
... d) In-line column level filtering
... e) Multi-columns sorting
... f) Multi-columns grouping
... g) User preferences

ListGrid is working fine for grid columns between 20 to 60 but beyond that when we scroll to right the alignment between header and filter/data column is disturbed. See attached screenshot - listGridIssueWith200Columns.png

All the columns are either text or link columns and a hidden ID column.

Need to know how many columns are supported by ListGrid for above mentioned configuration.

Thank you,
Jayesh

[jayeshecs]

After performing trial and error it was found that problem is related to CSS. As soon as I remove bootstrap.css from page the reported error is no longer observed.

Has anybody done the ListGrid integration on page where bootstrap CSS is used? Any help on this would be of great help.

Thanks,
Jayesh

[jayeshecs]

Isomorphic ListGrid integration with Bootstrap

After research & development of ListGrid + Bootstrap CSS able to fix all issues related to integration.

Alignment issues are fixed using below CSS -

----
/* isomorphic dialog/window must not use bootstrap CSS */
DIV.normal *, *:before, *:after {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
line-height: initial;
}

/* isomorphic dialog/window must not use bootstrap CSS */
TABLE.listTable {
border-collapse: separate;
border-spacing: initial;
}

/* isomorphic dialog/window must not use bootstrap CSS */
DIV.windowBackground *, *:before, *:after {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
line-height: initial;
}

/* isomorphic dialog/window must not use bootstrap CSS */
DIV.windowBackground table {
border-collapse: separate;
border-spacing: initial;
}
----

and below CSS for each DIV used as container for ListGrid -

----
DIV#container_div_id *, *:before, *:after {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
line-height: initial;
}

DIV#container_div_id table {
border-collapse: separated;
border-spacing: initial;
}
----

Trick is to override bootstrap style for Isomorphic elements.

Above is tested on IE8, FF 36.0.1 and Chrome 43.x

There are other issues related to z-index for which there is enough information available on SmartClient documentation.

Thanks,
Jayesh

[nitroamos]

Thank you for posting this! It worked for me. One change: you misspelled "separate" in the last border-collapse item.

I did have one remaining issue... items in my DynamicForm were squished together rather tightly. I was able to fix this with:

td, th {
padding: 2px;
}