<style>
.k-loading-mask .k-loading-image {
background-image: url('loadingtest2.png') !important;
position: fixed !important;
top: 50% !important;
left: 50% !important;
/* bring your own prefixes */
transform: translate(-50%, -50%) !important;
}
</style>
This method can of course be apply to anything you want to display on the center of the screen.
Full source code based on the Grid\Api example from their sample codes is as below
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>API</title>
<meta charset="utf-8">
<link href="../content/shared/styles/examples-offline.css" rel="stylesheet">
<link href="../../styles/kendo.common.min.css" rel="stylesheet">
<link href="../../styles/kendo.rtl.min.css" rel="stylesheet">
<link href="../../styles/kendo.default.min.css" rel="stylesheet">
<link href="../../styles/kendo.default.mobile.min.css" rel="stylesheet">
<script src="../../js/jquery.min.js"></script>
<script src="../../js/jszip.min.js"></script>
<script src="../../js/kendo.all.min.js"></script>
<script src="../content/shared/js/console.js"></script>
<script>
</script>
</head>
<style>
.k-loading-mask .k-loading-image {
background-image: url('loadingtest2.png') !important;
position: fixed !important;
top: 50% !important;
left: 50% !important;
/* bring your own prefixes */
transform: translate(-50%, -50%) !important;
}
</style>
<body>
<a class="offline-button" href="../index.html">Back</a>
<div id="example">
<div class="box wide">
<div class="box-col">
<h4>Selection</h4>
<ul class="options">
<li>
<input type="text" value="0" id="selectRow" class="k-textbox" />
<button class="selectRow k-button">Select row</button>
</li>
<li>
<button class="clearSelection k-button">Clear selected rows</button>
</li>
</ul>
</div>
<div class="box-col">
<h4>Expand/Collapse</h4>
<ul class="options">
<li>
<input type="text" value="0" id="groupRow" class="k-textbox"/>
<button class="toggleGroup k-button">Collapse/Expand group</button>
</li>
</ul>
</div>
</div>
<div id="grid"></div>
<script>
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: {
transport: {
read: {
url: "https://demos.telerik.com/kendo-ui/service/Products",
dataType: "jsonp"
}
},
pageSize: 5,
group: {
field: "UnitsInStock",
dir: "asc"
}
},
selectable: "multiple row",
pageable: {
buttonCount: 5
},
scrollable: false,
groupable: true,
columns: [
{
field: "ProductName",
title: "Product Name"
},
{
field: "UnitPrice",
title: "Unit Price",
format: "{0:c}"
},
{
field: "UnitsInStock",
title: "Units In Stock"
}
]
});
$(".clearSelection").click(function () {
$("#grid").data("kendoGrid").clearSelection();
});
var selectRow = function (e) {
if (e.type != "keypress" || kendo.keys.ENTER == e.keyCode) {
var grid = $("#grid").data("kendoGrid"),
rowIndex = $("#selectRow").val(),
row = grid.tbody.find(">tr:not(.k-grouping-row)").eq(rowIndex);
grid.select(row);
}
},
toggleGroup = function (e) {
if (e.type != "keypress" || kendo.keys.ENTER == e.keyCode) {
var grid = $("#grid").data("kendoGrid"),
rowIndex = $("#groupRow").val(),
row = grid.tbody.find(">tr.k-grouping-row").eq(rowIndex);
if (row.has(".k-i-collapse").length) {
grid.collapseGroup(row);
} else {
grid.expandGroup(row);
}
}
};
$(".selectRow").click(selectRow);
$("#selectRow").keypress(selectRow);
$(".toggleGroup").click(toggleGroup);
$("#groupRow").keypress(toggleGroup);
});
</script>
</div>
</body>
</html>
No comments:
Post a Comment