我应该在哪里放置 Kendo UI 忙碌指示器？我确实将它放在调整大小事件中，但它不会触发
这是指标
kendo.ui.progress($("#container"), true);
kendo.ui.progress($("#container"), false);
let ds = [{
id: 1,
name: "Jane",
lastname: "Doe",
age: 25,
gender: "female",
city: "London",
country: "England"
},
{
id: 2,
name: "John",
lastname: "Doe",
age: 26,
gender: "male",
city: "London",
country: "Canada"
},
{
id: 3,
name: "James",
lastname: "Jones",
age: 30,
gender: "male",
city: "New York",
country: "US"
},
{
id: 4,
name: "Mary",
lastname: "Johnson",
age: 23,
gender: "female",
city: "Paris",
country: "France"
},
{
id: 5,
name: "Robert",
lastname: "Lee",
age: 44,
gender: "male",
city: "Berlin",
country: "Germany"
},
{
id: 6,
name: "Jane",
lastname: "Doe",
age: 25,
gender: "female",
city: "London",
country: "England"
},
{
id: 7,
name: "John",
lastname: "Doe",
age: 26,
gender: "male",
city: "London",
country: "Canada"
},
{
id: 8,
name: "James",
lastname: "Jones",
age: 30,
gender: "male",
city: "New York",
country: "US"
},
{
id: 9,
name: "Mary",
lastname: "Johnson",
age: 23,
gender: "female",
city: "Paris",
country: "France"
},
{
id: 10,
name: "Robert",
lastname: "Lee",
age: 44,
gender: "male",
city: "Berlin",
country: "Germany"
},
{
id: 11,
name: "Jane",
lastname: "Doe",
age: 25,
gender: "female",
city: "London",
country: "England"
},
{
id: 12,
name: "John",
lastname: "Doe",
age: 26,
gender: "male",
city: "London",
country: "Canada"
},
{
id: 13,
name: "James",
lastname: "Jones",
age: 30,
gender: "male",
city: "New York",
country: "US"
},
{
id: 14,
name: "Mary",
lastname: "Johnson",
age: 23,
gender: "female",
city: "Paris",
country: "France"
},
{
id: 15,
name: "Robert",
lastname: "Lee",
age: 44,
gender: "male",
city: "Berlin",
country: "Germany"
},
{
id: 16,
name: "Jane",
lastname: "Doe",
age: 25,
gender: "female",
city: "London",
country: "England"
},
{
id: 17,
name: "John",
lastname: "Doe",
age: 26,
gender: "male",
city: "London",
country: "Canada"
},
{
id: 18,
name: "James",
lastname: "Jones",
age: 30,
gender: "male",
city: "New York",
country: "US"
},
{
id: 19,
name: "Mary",
lastname: "Johnson",
age: 23,
gender: "female",
city: "Paris",
country: "France"
},
{
id: 20,
name: "Robert",
lastname: "Lee",
age: 44,
gender: "male",
city: "Berlin",
country: "Germany"
}
];
$(document).ready(function() {
//$.when(RunMySplitters()).then(LoadTopGrid(), LoadBottomGrid());
LoadTopGrid();
LoadBottomGrid();
RunMySplitters();
});
function RunMySplitters() {
let splitterPosition = "middle";
$("#vertical-n")
.kendoSplitter({
orientation: "vertical",
panes: [{
collapsible: false
}]
});
$("#horizontal")
.kendoSplitter({
panes: [{
collapsible: true,
size: "10%",
collapsed: false
},
{
collapsible: true,
size: "90%"
}
],
collapse: function(e) {},
resize: function(e) {
},
expand: function(e) {
}
});
let hSplitterBar = $('#horizontal').data("kendoSplitter");
hSplitterBar.max("#left-pane", "10%");
$("#innerVertical")
.kendoSplitter({
orientation: "vertical",
panes: [{
collapsible: true,
size: '50%'
},
{
collapsible: true,
size: '50%',
//collapsed: apiHome.IsImplementor //TAsk 11 Changes add collapsed:true
}
],
collapse: function(e) {
if (e.pane.id === "top-pane" && splitterPosition === "bottom") {
splitterPosition = "middle";
} else if (e.pane.id === "top-pane" && splitterPosition === "middle") {
splitterPosition = "top";
} else if (e.pane.id === "bottom-pane" && splitterPosition === "top") {
splitterPosition = "middle";
} else if (e.pane.id === "bottom-pane" && splitterPosition === "middle") {
splitterPosition = "bottom";
}
},
resize: function(e) {
console.log("Resizing");
let tGrid = $('#TopGrid').getKendoGrid();
let bGrid = $('#BottomGrid').getKendoGrid();
tGrid.setOptions({
height: $('#innerVertical #top-pane').height()
});
bGrid.setOptions({
height: $('#innerVertical #bottom-pane').height()
});
},
expand: function(e) {
if (e.pane.id === "top-pane" && splitterPosition === "top") {
splitterPosition = "middle";
} else if (e.pane.id === "top-pane" && splitterPosition === "middle") {
splitterPosition = "bottom";
} else if (e.pane.id === "bottom-pane" && splitterPosition === "bottom") {
splitterPosition = "middle";
} else if (e.pane.id === "bottom-pane" && splitterPosition === "middle") {
splitterPosition = "top";
}
}
});
let topBar = $('#innerVertical').data("kendoSplitter");
topBar.max("#top-pane", "75%");
topBar.max("#bottom-pane", "75%");
}
function LoadTopGrid() {
$('#TopGrid').kendoGrid({
dataSource: {
data: ds,
schema: {
model: {
id: "id",
fields: {
id: {
editable: false,
type: "number"
},
name: {
editable: true,
type: "string"
},
lastname: {
editable: true,
type: "string"
},
age: {
editable: false,
type: "number"
},
gender: {
editable: false,
type: "string"
},
city: {
editable: true,
type: "string"
},
country: {
editable: true,
type: "string"
}
}
}
}
},
columns: [{
field: "id",
title: "ID",
width: "50px",
locked: true
},
{
field: "name",
title: "First",
width: "150px",
attributes: {
class: "editable-cell"
},
locked: true
},
{
field: "lastname",
title: "Last",
width: "150px",
attributes: {
class: "editable-cell"
},
locked: true
},
{
field: "age",
title: "Age",
width: "50px"
},
{
field: "gender",
title: "Gender",
width: "100px"
},
{
field: "city",
title: "City",
width: "100px"
},
{
field: "country",
title: "Country",
width: "100px"
}
],
navigatable: true,
editable: {
mode: "incell",
confirmation: false
},
selectable: "row",
change: function(e) {
console.log("I changed!");
},
resizable: true,
height: $('#innerVertical #top-pane').height()
});
}
function LoadBottomGrid() {
$('#BottomGrid').kendoGrid({
dataSource: {
data: ds,
schema: {
model: {
id: "id",
fields: {
id: {
editable: false,
type: "number"
},
name: {
editable: true,
type: "string"
},
lastname: {
editable: true,
type: "string"
},
age: {
editable: false,
type: "number"
},
gender: {
editable: false,
type: "string"
},
city: {
editable: true,
type: "string"
},
country: {
editable: true,
type: "string"
}
}
}
}
},
columns: [{
field: "id",
title: "ID",
width: "50px",
locked: true
},
{
field: "name",
title: "First",
width: "150px",
attributes: {
class: "editable-cell"
},
locked: true
},
{
field: "lastname",
title: "Last",
width: "150px",
attributes: {
class: "editable-cell"
},
locked: true
},
{
field: "age",
title: "Age",
width: "50px"
},
{
field: "gender",
title: "Gender",
width: "100px"
},
{
field: "city",
title: "City",
width: "100px"
},
{
field: "country",
title: "Country",
width: "100px"
}
],
resizable: true,
navigatable: true,
editable: {
mode: "incell",
confirmation: false
},
selectable: "row",
change: function(e) {
console.log("I changed!");
},
height: $('#innerVertical #bottom-pane').height()
});
}body {
height: 100%;
overflow: hidden;
}
html,
#horizontal,
#innerVertical,
#vertical
/*#TopGrid,
#BottomGrid*/
{
height: 100%;
overflow: hidden;
}
#top-pane {
overflow: hidden;
}
#bottom-pane {
overflow: hidden;
}
#container {
height: 600px;
margin-top: 60px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.3.1023/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.common-bootstrap.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.bootstrap.min.css" />
<div id="container">
<div id="vertical-n" style="height:100%;">
<div id="top-pane">
<div id="horizontal">
<div id="left-pane" style="border: 1px solid yellow;background-color: yellow;">
<div class="pane-content"></div>
</div>
<div id="right-pane">
<div id="innerVertical">
<div id="top-pane" style="width: 100%;border: 1px solid blue;background-color: blue;">
<div class="pane-content">
<div id="TopGrid"></div>
</div>
</div>
<div id="bottom-pane" style="width: 100%;border: 1px solid green;background-color: green;">
<div class="pane-content">
<div id="BottomGrid"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>