EasyUI Forum
May 16, 2024, 04:04:10 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
EasyUI Forum > General Category > Bug Report > bug on creating over 29 datagrids (columns width) in Internet Explorer.
Pages: [1]
« previous next »
  Print  
Author Topic: bug on creating over 29 datagrids (columns width) in Internet Explorer.  (Read 18588 times)
ryupanqui
Newbie
*
Posts: 44


View Profile Email
« 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>
?>
Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #1 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
});
Logged
ryupanqui
Newbie
*
Posts: 44


View Profile Email
« Reply #2 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?
Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #3 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>
Logged
ryupanqui
Newbie
*
Posts: 44


View Profile Email
« Reply #4 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/
Logged
ryupanqui
Newbie
*
Posts: 44


View Profile Email
« Reply #5 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.
Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #6 on: March 24, 2014, 03:52:02 PM »
There are no problems with this code. Please try the attached example 'test.html'.
Logged
ryupanqui
Newbie
*
Posts: 44


View Profile Email
« Reply #7 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.
Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #8 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.
Logged
ryupanqui
Newbie
*
Posts: 44


View Profile Email
« Reply #9 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);
« Last Edit: March 24, 2014, 08:19:50 PM by ryupanqui » Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #10 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();
Logged
Pages: [1]
  Print  
« previous next »
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!