Kendo Grid resizable在IE中不起作用

时间:2016-07-15 05:25:00

标签: html asp.net-mvc kendo-grid

我正在使用Kendo Grid来显示记录。下面是我的示例Html页面,我想在IE中实现重新调整大小的结果。我仅在Html中修改了示例目的代码。 Chrome中的可调整大小正在运行。

<!DOCTYPE html>
<html>
<head>
    <base href="http://demos.telerik.com/kendo-ui/grid/column-resizing">
    <title></title>

    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.mobile.all.min.css" />
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.material.min.css" />
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.default.mobile.min.css" />


    <script src="//kendo.cdn.telerik.com/2016.2.607/js/jquery.min.js"></script>
    <script src="//kendo.cdn.telerik.com/2016.2.607/js/kendo.all.min.js"></script>


    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
    <link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
    <script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>

    <style>
        .wrap {
            width: 95%;
            margin: 0 auto;
        }

        .PageContentHeading {
            padding: 3% 0;
        }

            .PageContentHeading h3 {
                margin: 0;
            }

        .AddUser {
            margin-left: 10px;
        }

            .AddUser a {
                border-radius: 0;
                padding: 4px 12px;
            }

        .btn-group-sm > .btn, .btn-sm {
            border-radius: 0;
        }

        .SupplierCompanyName {
            color: red;
        }

        .k-grid td {
            border-left: none;
        }
    </style>

</head>
<body>    

    <script type="text/x-kendo-template" id="toolBarTemplate">
        <div class="toolbar">
            <div class="row">
                <div class="col-md-4" style="float:right;">
                    <div class="input-group">
                        <span class="input-group-addon"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></span>
                        <input type="search" class="form-control" id='txtSearchString' placeholder="Search by User Details">
                    </div>
                </div>
            </div>
        </div>
    </script>
    <div class="wrap">

        <div class="main">

            <div class="PageContentHeading">

                <h3 class="pull-left">
                    Manage Users -
                    <span id="supplierPanel">
                        <span id="supplerCompany" class="SupplierCompanyName">
                            ABC Aerospace Inc.
                        </span> <span class="SupplierCompanyID">
                            [ ID_0001 ]
                        </span>
                    </span>
                </h3>

                <div class="pull-right AddUser">
                    <a href="@Url.Action(" AddUser", "user" )" class="btn btn-success" style="color:#FFF;">Add User</a>
                </div>
                <div class="pull-right ShowUsers">
                    <span class="labelname">Include Inactive Users:</span>
                    <input type="checkbox" checked data-toggle="toggle" data-on="True" data-off="False" data-onstyle="success" data-offstyle="danger" data-size="small">
                </div>
                <div class="clearfix"></div>    
            </div>    
        </div>
    </div>
    <div id="grid"></div>
    <script>
        var apiUrl = "http://localhost:55020/";
        var dynamicTemplate;
        var col = [];

        function switchChange(e) {
            //alert('E');
        }

        function GetColumnsDetails() {

            var rowsTempldateStyle = "<tr>   <td style='word-wrap: break-word'>  <span class='UserDesignation'> #:FullName  #</span><span class='UserName'>#:title #</span> </td>  ";
            $.ajax({
                url: apiUrl + "api/user/GetColumns/1",
                type: 'GET',
                async: false,
                success: function (result) {
                    if (result.length > 0) {
                        for (var i = 0; i < result.length; i++) {
                            col.push({
                                field: result[i].colnameName,
                                title: result[i].titleName,

                            });
                        }                        
                        col.push({
                            title: "Active",
                            template: "<input type='checkbox' disabled='disabled' />",
                            width: "70px"
                        })
                        col.push({
                            title: "Action",
                            name: 'edit',                           
                            width: "70px"
                        });
                    }
                }
            });
        } 
        $(document).ready(function () {

            //
            GetColumnsDetails();
            $("#grid").kendoGrid({
                dataSource: {
                    pageSize: 5,
                    batch: false, // enable batch editing - changes will be saved when the user clicks the "Save changes" button
                    transport: {
                        read: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
                    },
                    pageSize: 20
                },

                height: 550,
                sortable: true,
                resizable: true,
                filterable: true,

                pageable: {
                    refresh: true,
                    pageSizes: true,
                    buttonCount: 2
                },
                //resizable: true,
                columns: [{
                    template: "<div class='customer-photo'" +
                                    "style='background-image: url(../content/web/Customers/#:data.CustomerID#.jpg);'></div>" +
                                "<div class='customer-name'>#: ContactName #</div>",
                    field: "ContactName",
                    title: "Contact Name",
                    width: 240
                }, {
                    field: "ContactTitle",
                    title: "Contact Title"
                }, {
                    field: "CompanyName",
                    title: "Company Name"
                }, {
                    field: "Country",
                    width: 150
                }]

            });
        });

    </script>
</body>
</html>

我正在使用最新版本的剑道,但它仍然没有给我预期的结果。我也尝试过给出每列的宽度,但在IE中却有同样的问题。有人可以帮我这个。

1 个答案:

答案 0 :(得分:0)

史蒂夫请尝试更新到新版本:

<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.714/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.714/styles/kendo.material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.714/styles/kendo.default.mobile.min.css" />

<script src="//kendo.cdn.telerik.com/2016.2.714/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js"></script>

以下是您现在使用IE的示例。

http://dojo.telerik.com/iKOKo/3

剑道刚刚在7月14日解决了这个问题:

  

网格过滤器菜单中的自动完成小部件未扩展到全宽

     

无法创建多页文档

     

列调整大小在IE中不起作用

     

网格列没有标题集时未定义的拖动提示文本

     

有效过滤器图标不够明显

在此处查看有关此更新的更多详细信息: http://www.telerik.com/support/whats-new/kendo-ui/release-history/kendo-ui-r2-2016-sp2