Print Page - bug on creating over 29 datagrids (columns width) in Internet Explorer.

Title: bug on creating over 29 datagrids (columns width) in Internet Explorer.
Post by: ryupanqui on March 22, 2014, 04:13:44 PM

I created 35 datagrids but exists an error on datagrid 29 and next ones (the columns do not have the correct width). This error is present on Internet Explorer because has a restriction about css styles (http://blogs.telerik.com/aspnet-ajax/posts/10-05-03/internet-explorer-css-limits.aspx)

Test the next php code. How to solve it?

Code:

<?php    
    function buildDataGrids() {
        $style = '';
        for ($index = 1; $index <= 35; $index++) {
            $style .= "<h2>Basic DataGrid $index</h2>
                        <table class=\"easyui-datagrid\">
                            <thead>
                                <tr>
                                    <th data-options=\"field:'code', width: 200\">Code</th>
                                    <th data-options=\"field:'name', width: 300\">Name</th>
                                    <th data-options=\"field:'price', width: 400\">Price</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>001</td><td>name1</td><td>2323</td>
                                </tr>
                                <tr>
                                    <td>002</td><td>name2</td><td>4612</td>
                                </tr>
                            </tbody>
                        </table>";
        }
        
        
        return $style;
    }
    
    echo buildDataGrids();
?>
<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
    <title>Basic DataGrid - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="jeasyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="jeasyui/themes/icon.css">
    <script type="text/javascript" src="jeasyui/jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="jeasyui/jquery.easyui.min.js"></script>
    </head>
    <body>
    </body>
</html>
?>

Title: Re: bug on creating over 29 datagrids (columns width) in Internet Explorer.
Post by: stworthy on March 23, 2014, 08:40:50 AM

Please try to use the updated datagrid plugin from http://www.jeasyui.com/easyui/plugins/jquery.datagrid.js. Make sure to set 'sharedStyleSheet' property to true.

Code:

$('#dg').datagrid({
  sharedStyleSheet: true
});

Title: Re: bug on creating over 29 datagrids (columns width) in Internet Explorer.
Post by: ryupanqui on March 23, 2014, 03:00:01 PM

Thanks for your reply but in my page i only add the jquery.easyui.min.js file and not plugin by plugin as you said me, are you planning update the jquery.easyui.min.js file with this fixing?

Title: Re: bug on creating over 29 datagrids (columns width) in Internet Explorer.
Post by: stworthy on March 23, 2014, 05:04:22 PM

You only need to include the updated datagrid plugin after including the 'jquery.easyui.min.js' file.

Code:

<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/plugins/jquery.datagrid.js"></script>

You also can include the whole 'jquery.easyui.min.js' file from http://www.jeasyui.com/easyui/jquery.easyui.min.js. When doing this, please include the corresponding theme file from site.

Code:

<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>

Title: Re: bug on creating over 29 datagrids (columns width) in Internet Explorer.
Post by: ryupanqui on March 24, 2014, 08:51:43 AM

the error is not solved yet when exists more than 28 datagrids on Internet Explorer.
please check this example.

http://jsfiddle.net/eAxT7/

Title: Re: bug on creating over 29 datagrids (columns width) in Internet Explorer.
Post by: ryupanqui on March 24, 2014, 11:12:30 AM

i solved this issue changing this code:

Code:

$(ss.join("\n")).appendTo(cc);
setTimeout(function(){
   cc.children("style[easyui]:not(:last)").remove();
},0);

by this:

Code:

cc.children("style[easyui]").remove();
$(ss.join("\n")).appendTo(cc);

what do you think about this? or are you thinking about another solution for this? Please try update plugin.

Title: Re: bug on creating over 29 datagrids (columns width) in Internet Explorer.
Post by: stworthy on March 24, 2014, 03:52:02 PM

There are no problems with this code. Please try the attached example 'test.html'.

Title: Re: bug on creating over 29 datagrids (columns width) in Internet Explorer.
Post by: ryupanqui on March 24, 2014, 04:23:52 PM

i use the attached example 'test.html' but i get the same problem, i am using IE9 to test it, view the attached screenshot. if you see the drawing of columns and cells are irregular; widths don't match. Also, i suggest for the next version include the sharedStyleSheet = TRUE by default.

Title: Re: bug on creating over 29 datagrids (columns width) in Internet Explorer.
Post by: stworthy on March 24, 2014, 05:35:17 PM

Please remove the code below from the head section, which is un-available from your machine.

Code:

<link rel="stylesheet" type="text/css" href="../demo.css">

Now it works fine.

Title: Re: bug on creating over 29 datagrids (columns width) in Internet Explorer.
Post by: ryupanqui on March 24, 2014, 08:17:16 PM

it doesn't works fine really. Add 2 datagrids more to reproduce the error again. The internet explorer restriction not allow more than 31 stylesheets per file. I think that the problem in the datagrid plugin is that first all stylesheets are created, exceeding the limit of IE, and the end the last stylesheets are removed.

I refer to this code on datagrid plugin:

Code:


$(ss.join("\n")).appendTo(cc);
setTimeout(function(){
   cc.children("style[easyui]:not(:last)").remove();
},0);

Title: Re: bug on creating over 29 datagrids (columns width) in Internet Explorer.
Post by: stworthy on March 25, 2014, 12:22:31 AM

Yes, the code can be rewritten as:

Code:

$(ss.join('\n')).appendTo(cc);
cc.children('style[easyui]:not(:last)').remove();

EasyUI Forum

General Category => Bug Report => Topic started by: ryupanqui on March 22, 2014, 04:13:44 PM