javascript - Kendo Grid 的列在 IE 10 和 IE 11 中不可调整大小

标签 javascript jquery internet-explorer kendo-ui

我在我的网络应用程序中使用 Kendo Grid 并包含 kendo.all.min.js 文件。这个js文件的版本是2012.1.515。 在网格中,列在 IE 10 和 IE 11 中不可调整大小,但它在所有其他浏览器中工作正常。

我创建了一个网格示例并包含了相同的文件,但网格列在 IE 10 和 IE 11 中不可调整大小。 这是我的示例代码:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link href="http://cdn.kendostatic.com/2013.3.1324/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2013.3.1324/styles/kendo.rtl.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2013.3.1324/styles/kendo.silver.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2013.3.1324/styles/kendo.dataviz.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2013.3.1324/styles/kendo.dataviz.silver.min.css" rel="stylesheet" />
     <link href="/kendo-ui/content/shared/styles/examples.css" rel="stylesheet" />
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://cdn.kendostatic.com/2012.1.515/js/kendo.all.min.js"></script>


</head>
<body>

        <div id="main">
    <h1 id="exampleTitle">
            <span class="exampleIcon gridIcon"></span>
            <strong>Grid /</strong> Column resizing    </h1>

    <div id="theme-list-container"></div>

    <div id="exampleWrap">
        <script>preventFOUC()</script>


        <div id="example" class="k-content">
            <div id="grid"></div>

            <script>
                $(document).ready(function() {
                gridDataSource = new kendo.data.DataSource({
                transport: {
                                            read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
                                        },
                                    });
                    $("#grid").kendoGrid({
                        dataSource: gridDataSource,
                        scrollable: true,
                        resizable: true,

                        columns: [
                            {
                                field: "OrderDate",
                                title: "Order Date"


                            },
                            {
                                field: "ShipCountry",
                                title: "Ship Country"

                            },
                            {
                                field: "ShipCity",
                                title: "Ship City"

                            },
                            {
                                field: "ShipName",
                                title: "Ship Name"

                            },
                            {
                                field: "ShippedDate",
                                title: "Shipped Date"

                            },
                            {
                                field: "OrderID",
                                title: "ID"

                            }
                        ]
                    });
                });
            </script>
        </div>
    </div>
    </div>

</body>
</html>

谢谢

最佳答案

我认为,您需要为要调整大小的每一列指定宽度。就像是:

    columns: [
    {
        field: "OrderDate",
        title: "Order Date",
        width: 50px
    }
    
希望对您有所帮助。

关于javascript - Kendo Grid 的列在 IE 10 和 IE 11 中不可调整大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21482298/

相关文章:

javascript - Angular ngRepeat - 每个元素的独特风格

javascript - 如何在 jQuery 函数的回调中引用元素?

css ie6 Sprite 图像不显示使用内联 block

html - 具有转换属性的 CSS 动画不应用最终状态

javascript - 正则表达式查找大括号内的字符串Javascript

javascript - 如何使用 jquery 显示和隐藏两个独特的部分

javascript - 仅使用 Javascript 将 Canvas 图像保存到服务器

javascript - 使用 angular.element() 注入(inject)嵌套内联脚本标记不起作用

if 语句中的 JavaScript 错误 "Function expected"

html - 响应式网站上的 IE 渲染问题