Javascript 剑道用户界面网格与自定义调整事件赢得'；t在Internet Explorer中显示详细信息模板
我有一个剑道UI网格，可以显示n个孩子的记录，我还有一个自定义的调整大小功能，可以根据浏览器窗口的高度调整网格的大小。如果删除该resizeListener，则子记录将根据需要显示。如果绑定了resizeListener，则不会显示子记录 此问题特定于Internet Explorer 8（抱歉，这是公司的政策限制）。网格在Firefox中正常工作 当我激活子模板时，在数据绑定中，在我认为可能有效的各种随机位置，我尝试过使用Javascript 剑道用户界面网格与自定义调整事件赢得'；t在Internet Explorer中显示详细信息模板,javascript,jquery,internet-explorer,kendo-grid,Javascript,Jquery,Internet Explorer,Kendo Grid,我有一个剑道UI网格，可以显示n个孩子的记录，我还有一个自定义的调整大小功能，可以根据浏览器窗口的高度调整网格的大小。如果删除该resizeListener，则子记录将根据需要显示。如果绑定了resizeListener，则不会显示子记录 此问题特定于Internet Explorer 8（抱歉，这是公司的政策限制）。网格在Firefox中正常工作 当我激活子模板时，在数据绑定中，在我认为可能有效的各种随机位置，我尝试过使用$（window）.off（“resize”），但到目前为止没有任何效果
$（window）.off（“resize”）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);
});
};
<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>
业务范围
应用
滤器
$(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);
};
});
$（文档）.ready（函数（）{
resizeListener（）；
变量isParent、appId、lobId、boxId；
var apiUrl='@ViewBag.apiUrl'；
var lobDataSource=new kendo.data.DataSource({
运输：{
阅读：{
url:APIRL+“Lob”
}
},
模式：{
型号：{
id:“大叶”，
hasChildren：“hasChildren”
}
}
});
var appsDataSource=new kendo.data.DataSource({
运输：{
阅读：{
url:apiUrl+“应用程序”
},
parameterMap：功能（数据、操作）{
如果（操作==“读取”）{
data.lobid=lobid；
data.parent=isParent；
返回数据；
}否则{
返回数据；
}
}
}
});
var filterDataSource=new kendo.data.DataSource({
运输：{
阅读：{
url:apiUrl+“主题”
}
},
模式：{
模型：{id:“FilterId”}
}
});
var boxesDataSource=new kendo.data.DataSource({
运输：{
阅读：{
url:apiUrl+“进程”
},
parameterMap:函数（数据）{
data.appid=appid；
data.parent=isParent；
data.lobid=lobid；
返回剑道字符串化（数据）；
}
},
模式：{
数据：“数据”，
总计：“总计”，
模型：{id:“JobId”}
},
对,，
是的，
服务器排序：true
});
var lobnav=$（“#lobnav”）.kendoTreeView({
选择：功能（e）{
var-tree=this；
var src=tree.dataItem（e.node）；
lobId=src.lobId；
isParent=src.HasChildren；
},
更改：功能（e）{
appsDataSource.read（）；
},
数据源：{
运输：{
阅读：{
url:APIRL+“Lob”
}
},
模式：{
型号：{
id:“大叶”，
hasChildren：“hasChildren”
}
}
},
loadOnDemand:false，
dataTextField:“LobName”
});
var appnav=$（“#lobapp”）.kendoListView({
可选：“单一”，
自动绑定：错误，
更改：函数（）{
var idx=this.select（）.index（）；
var itm=this.dataSource.view（）[idx]；
appId=itm.appId；
boxesDataSource.query({
页码：1，
页面大小：35
});
},
模板：“${AppName}”，
数据源：appsDataSource
});
var jobsfilter=$（“#jobfilter”）.kendoListView({
可选：“单一”，
loadOnDemand:false，
模板：“${FilterName}”，
数据源：filterDataSource，
数据绑定：函数（）{
var dsource=$（“#作业过滤器”）.data（“kendoListView”）.dataSource；
if（dsource.at（0.FilterName！=“全部”）{
insert（0，{FilterId:0，FilterName:“All”}）；
}
},
更改：函数（）{
var itm=this.select（）.index（），dataItem=this.dataSource.view（）[itm]；
var appDs=appsDataSource.view（），apps=$（“#lobapp”）.data（“kendoListView”），
选定=$.map（apps.select（），函数（项）{
返回appDs[$（item）.index（）].AppName；
});
如果（已选定。长度>0）{
如果（dataItem.FilterId！==0）{
var$filter=新数组（）；
$filter.push（{字段：“JobStatusId”，运算符：“eq”，值：dataItem.FilterId}）；
jgrid.dataSource.filter（$filter）；
}否则{
jgrid.dataSource.filter（{}）；
}
}
}
});
var jgrid=$（“#boxesgrid”）.kendoGrid({
栏目：[
{
字段：“AppName”，
标题：“应用程序”
},
{
字段：“JobId”，
标题：“职务Id”
},
{
字段：“作业名”，
标题：“职务名称”，
},
{
字段：“工作状态”，
标题：“地位”
},
{
字段：“JobStatusId”，
标题：“状态代码”
},
{
字段：“HasChildren”，
标题：“有孩子”
},
{
字段：“ChildrenCount”，
标题：“儿童工作”
}
],
可排序：{
模式：“单身”，
allowUnsort:对
},
可分页：{
页面大小：[35]，
数字
function resizeGrid() {
var gridElement = $("#boxesgrid");
var newGridHeight = $(window).height() > 800 ? 800 : $(document).height() * .75;
gridElement.height(newGridHeight);
gridElement.data("kendoGrid").resize();
}