javascript - 具有自定义调整大小事件的 Kendo UI 网格不会在 Internet Explorer 中显示详细信息模板

Question

我有一个显示 n 子记录的 Kendo UI 网格，我还有一个自定义调整大小功能，可以根据浏览器窗口高度保持网格大小。如果我删除该 resizeListener，子记录将根据需要显示。如果我绑定(bind)了 resizeListener，则子记录不会显示。

此问题特定于 Internet Explorer 8(抱歉，这是公司政策限制)。网格在 Firefox 中正常运行。

当我激活子模板时，在数据绑定(bind)中以及在我认为可能有效的各种随机位置中，我尝试使用 $(window).off("resize") - 但到目前为止还没有任何进展。

我正在寻找 IE 的解决方案或解决方法。

这是函数:

function resizeGrid() {
    var gridElement = $("#boxesgrid");
    var dataArea = gridElement.find(".k-grid-content");
    var newGridHeight = $(document).height() > 850 ? 850 : $(document).height() * .75;
    var newDataAreaHeight = newGridHeight * .7;

    dataArea.height(newDataAreaHeight);
    gridElement.height(newGridHeight);
    gridElement.data("kendoGrid").refresh();
}

var resizeListener = function () {
    $(window).one("resize", function () {
        resizeGrid();
        setTimeout(resizeListener, 500);
    });
};

这是 html:

<div class="col-md-2">
<div class="panel panel-default">
    <div class="panel-heading">Line of Business</div>
    <div class="panel-body" id="lobnav"></div>
</div>
<div class="panel panel-default">
    <div class="panel-heading">Application</div>
    <div class="panel-body" id="lobapp"></div>
</div>
<div class="panel panel-default">
    <div class="panel-heading">Filter</div>
    <div class="panel-body" id="jobfilter">
    </div>
</div>
</div>
<div class="col-md-10">
    <div id="boxesgrid"></div>
</div>

这是其余的 javascript/kendo 代码:

$(document).ready(function () {
    resizeListener();
    var isParent, appId, lobId, boxId;
    var apiUrl = '@ViewBag.ApiUrl';

    var lobDataSource = new kendo.data.DataSource({
        transport: {
            read: {
                url: apiUrl + "Lob"
            }
        },
        schema: {
            model: {
                id: "LobId",
                hasChildren: "HasChildren"
            }
        }
    });

    var appsDataSource = new kendo.data.DataSource({
        transport: {
            read: {
                url: apiUrl + "App"
            },
            parameterMap: function (data, action) {
                if (action === "read") {
                    data.lobid = lobId;
                    data.parent = isParent;
                    return data;
                } else {
                    return data;
                }
            }
        }
    });

    var filterDataSource = new kendo.data.DataSource({
        transport: {
            read: {
                url: apiUrl + "Theme"
            }
        },
        schema: {
            model: { id: "FilterId" }
        }
    });

    var boxesDataSource = new kendo.data.DataSource({
        transport: {
            read: {
                url: apiUrl + "Process"
            },
            parameterMap: function (data) {
                data.appid = appId;
                data.parent = isParent;
                data.lobid = lobId;
                return kendo.stringify(data);
            }
        },
        schema: {
            data: "Data",
            total: "Total",
            model: { id: "JobId" }
        },
        serverPaging: true,
        serverFiltering: true,
        serverSorting: true
    });

    var lobnav = $("#lobnav").kendoTreeView({
        select: function (e) {
            var tree = this;
            var src = tree.dataItem(e.node);
            lobId = src.LobId;
            isParent = src.HasChildren;
        },
        change: function (e) {
            appsDataSource.read();
        },
        dataSource: {
            transport: {
                read: {
                    url: apiUrl + "Lob"
                }
            },
            schema: {
                model: {
                    id: "LobId",
                    hasChildren: "HasChildren"
                }
            }
        },
        loadOnDemand: false,
        dataTextField: "LobName"
    });

    var appnav = $("#lobapp").kendoListView({
        selectable: "single",
        autoBind: false,
        change: function () {
            var idx = this.select().index();
            var itm = this.dataSource.view()[idx];
            appId = itm.AppId;
            boxesDataSource.query({
                page: 1,
                pageSize: 35
            });
        },
        template: "<div class='pointercursor'>${AppName}</div>",
        dataSource: appsDataSource
    });

    var jobsfilter = $("#jobfilter").kendoListView({
        selectable: "single",
        loadOnDemand: false,
        template: "<div class='pointercursor' id=${FilterId}>${FilterName}</div>",
        dataSource: filterDataSource,
        dataBound: function () {
            var dsource = $("#jobfilter").data("kendoListView").dataSource;
            if (dsource.at(0).FilterName !== "All") {
                dsource.insert(0, { FilterId: 0, FilterName: "All" });
            }
        },
        change: function () {
            var itm = this.select().index(), dataItem = this.dataSource.view()[itm];
            var appDs = appsDataSource.view(), apps = $("#lobapp").data("kendoListView"),
                selected = $.map(apps.select(), function (item) {
                    return appDs[$(item).index()].AppName;
                });
            if (selected.length > 0) {
                if (dataItem.FilterId !== 0) {
                    var $filter = new Array();
                    $filter.push({ field: "JobStatusId", operator: "eq", value: dataItem.FilterId });
                    jgrid.dataSource.filter($filter);
                } else {
                    jgrid.dataSource.filter({});
                }
            }
        }
    });

    var jgrid = $("#boxesgrid").kendoGrid({
        columns: [
            {
                field: "AppName",
                title: "App"
            },
            {
                field: "JobId",
                title: "Job Id"
            },
            {
                field: "JobName",
                title: "Job Name",
            },
            {
                field: "JobStatus",
                title: "Status"
            },
            {
                field: "JobStatusId",
                title: "Status Code"
            },
            {
                field: "HasChildren",
                title: "Has Children"
            },
            {
                field: "ChildrenCount",
                title: "Child Jobs"
            }
        ],
        sortable: {
            mode: "single",
            allowUnsort: true
        },
        pageable: {
            pageSizes: [35],
            numeric: true,
            refresh: true,
            pageSize: 35
        },
        autoBind: false,
        scrollable: true,
        resizable: true,
        detailInit: detailInit,
        dataSource: boxesDataSource
    }).data("kendoGrid");

    function detailInit(e) {
        var eventData = e;
        $.ajax({
            url: apiUrl + "ProcessJobs",
            type: "POST",
            data: {BoxId: e.data.JobId, AppId: e.data.AppId}, 
            dataType: "json",
            success: function(data, status, xhr) {
                initializeDetailGrid(eventData, data);
            }
        });
    };

    function initializeDetailGrid(e, result) {
        var moreChildren = result[0].HasChildren;
        var gridBaseOptions = {
            dataSource: result,
            scrollable: false,
            sortable: true,
            columns: [
                {
                    field: "ParentJobId",
                    title: "Parent Job"
                },
                {
                    field: "JobId",
                    title: "Job Id"
                },
                {
                    field: "JobName",
                    title: "Job Name",
                },
                {
                    field: "JobStatus",
                    title: "Status"
                },
                {
                    field: "JobStatusId",
                    title: "Status Code"
                },
                {
                    field: "HasChildren",
                    title: "Has Children"
                },
                {
                    field: "ChildrenCount",
                    title: "Child Jobs"
                }
            ]
        };

        var gridOptions = {};
        if (moreChildren) {
            gridOptions = $.extend({}, gridBaseOptions, { detailInit: detailInit });
        } else {
            gridOptions = gridBaseOptions;
        };
        $("<div/>").appendTo(e.detailCell).kendoGrid(gridOptions);
    };
});

Answer 1

需要更改调整大小功能。错误是在网格上调用刷新，而不是调整大小。更正后的函数如下所示:

function resizeGrid() {
    var gridElement = $("#boxesgrid");
    var newGridHeight = $(window).height() > 800 ? 800 : $(document).height() * .75;

    gridElement.height(newGridHeight);
    gridElement.data("kendoGrid").resize();
}

单独设置数据区域也是不正确的。