Inline stylesheet not applied in IE

[Ellipsis]

I'm using multiple datagrids on a single page that use json files with some identical fieldnames (identifier for example).

My datagrid columns differ from the header, they fit the content they hold and do not apply the recommended style.
(tried fitColumns true and false)

so the two generated inline stylesheets : :

Datagrid 1

Code:

<style type="text/css">
div.datagrid-cell-c4-id {width:undefinedpx;}
div.datagrid-cell-c4-groupIdentifier {width:undefinedpx;}
div.datagrid-cell-c4-groupName {width:undefinedpx;}
div.datagrid-cell-c4-subjectIdentifier {width:undefinedpx;}
div.datagrid-cell-c4-subjectName {width:57px;}
div.datagrid-cell-c4-memberType {width:22px;}
div.datagrid-cell-c4-text {width:122px;}
</style>

Datagrid 2

Code:

<style type="text/css">
div.datagrid-cell-c1-identifier {width:72px;}
div.datagrid-cell-c1-subjectName {width:72px;}
div.datagrid-cell-c1-description {width:72px;}
div.datagrid-cell-c1-status {width:72px;}
div.datagrid-cell-c1-Studieadviseur {width:72px;}
</style>

 I generate the datagrid only one time, and the html is only <table id="dg"/>.

Edit: It could be the IE 31 stylesheets limit.... I'll test this, the inline <style> tags are also counted

[stworthy]

A simple example to demonstrate this issue may be more appropriate.

[Ellipsis]

Ok I'll use jsFiddle, this week ...

[Ellipsis]

A bit late, but here is the example:

http://jsfiddle.net/reno1979/g3sVm/

Open the subgrids, when you reach >31 stylesheets the styles will not be applied anymore .....

(Known IE bug)

Possible solutions:

• I think a solution would be to be able to select if inline styles should be applied when fitcolumns: true is defined
  It will generate a lot more code, but it solves this bug.
  
• A more advanced and cleaner solution would be to extend the generated inline stylesheet.
  
• Or even better, be able to add a custom class to a column in a datagrid, so the developer can use a custom external stylesheet. (when this option is chosen the autofit:true does how ever generate a 'conflicting' style ..? )
  The possibility to add a custom column class would be much appreciated !!
  

[stworthy]

This bug has been fixed. Please download the fixed datagrid plugin from http://www.jeasyui.com/easyui/plugins/jquery.datagrid.js.

[Ellipsis]

Thank you !!

What is the chosen solution in the fix?

[stworthy]

The solution to solve this issue is reducing the stylesheet count. For the nested datagrid such as subgrid, only one stylesheet is used.

[Ellipsis]

It seems the inline stylesheet is not always applied to the cells.
Only when I reload the grid the styles are 'detected', this occurs randomly.
I'll test some more te be sure.

I would prefer that the generated header would indeed be a <thead> section, this way the header column width will at least match the underlying content when something failes. Does this make any sense ?

[Ellipsis]

fix seems broken, the inline stylesheet is not always applied.

When reviewing the generated source I noticed that the 'counter' used in the class name was off by a random number.

so a generated example

Code:

<style type="text/css">.xxx-c13-xxxx{width:200px;}</style>

should actually point to .xxx-c11-xxxx

The header columns contain an inline style width, but this is different than the width given in the generated stylesheet.

Update: tested the original datagrid plugin send to us by mail, and this one works. (1.3.2)

[stworthy]

Some updates have been applied to datagrid. Please download it from http://www.jeasyui.com/easyui/plugins/jquery.datagrid.js.

[Ellipsis]

Ok thank you, the fix seems to work.

[Ellipsis]

Does the 1.3.2 zip file hold all the new files?

It seems that my combogrids cause recursive calls, causing the browser to hang. (Jquery.remove.delete keeps being called). I use a jquery .each loop to initialize the combogrids, sadly this suddenly causes some kind of loop somewhere. I'll jsfiddle a bit to see if I can reproduce the problem.

EDIT: Found cause, see http://www.jeasyui.com/forum/index.php?topic=1369.0

[Ellipsis]

Bug is back...

when using the loadData method, the columns are not the correct width.
Again the identifiiers in the generated stylesheet are off.

Calling fitColumns, resize etc etc does not work, a sort however does.
I'll try to simulate with a fiddle, it could also be the extension of the afterRender event I use.

[Ellipsis]

To be more exact: When using multipe combogrids on a page only the first generated stylesheet has corresponding class identifiers.

[stworthy]

Although using multiple combogrid components on one page but can not found the issue you describe. Could you provide a simple example to shows how to make your issue appears?