I have multiple grids loading on a page. I want to hide the entire page until all grids are loaded. The grids are dynamically loaded based off of a table.
In a partial view I do this for each category:
<div id="@gridName" style="display:none;"></div>
<script type="text/javascript">
$(document).ready(function() {
$("#@gridName").kendoGrid({
dataSource: new kendo.data.DataSource({
schema: {
model: {
id: "CostSheetDetailId",
fields: {
CostSheetDetailId: { editable: false },
FriendlyName: { nullable: false, type: "string", defaultValue: "" },
EquipmentModelId: { editable: true, nullable: false},
Unit: { type: "number", editable: true, defaultValue: "0" },
Price: { type: "number", editable: true, defaultValue: "0" },
Budget: { type: "number", editable: true, defaultValue: "0" },
Actual: { type: "number" },
CostSheetCategoryId: {nullable: false, type: "number", defaultValue: @Model.Category.CostSheetCategoryId },
CostSheetId: { nullable: false, type: "number", defaultValue: @Model.CostSheetId },
Tooltip: { nullable: true, type: "string" }
}
},
errors: "errorMsg"
},
error: function (e) {
if(e.errors !== undefined ) {
toastr.options = {
"positionClass": "toast-bottom-full-width"
};
toastr.error('There is an error: ' + e.errors, 'Uh Oh!');
}
this.cancelChanges();
},
transport: {
read: {
url: "/CostSheet/CostSheetCategoryDetailGet",
dataType: "json",
data: {
Id: @Model.CostSheetId,
CostSheetCategoryId: "@Model.Category.CostSheetCategoryId",
IsFixed: "@Model.Category.IsFixed"
}
},
create: {
url: "/CostSheet/CostSheetCategoryDetailCreate",
dataType: "json",
type: "POST",
data: {
__RequestVerificationToken: getAntiForgeryToken()
}
},
update: {
url: "/CostSheet/CostSheetCategoryDetailEdit",
dataType: "json",
type: "POST",
data: {
__RequestVerificationToken: getAntiForgeryToken()
}
},
destroy: {
url: "/CostSheet/CostSheetCategoryDetailDelete",
dataType: "json",
type: "POST",
data: {
__RequestVerificationToken: getAntiForgeryToken()
}
},
parameterMap: function (data, operation) {
if (operation === "update") {
data.CreateDate = _dateToString(data.CreateDate);
data.LastModDate = _dateToString(data.LastModDate);
}
return data;
}
}
}),
toolbar: ["create"],
sortable: true,
columns: [
{ field: "EquipmentModelId", title: "Name", template: "# if (Tooltip != null) { #" +
"<span data-toggle=\"tooltip\" title=\"#=Tooltip#\">#=FriendlyName#</span>" +
"# } else { #" +
"<span data-toggle=\"tooltip\" title=\"#=Tooltip#\">#=FriendlyName#</span>" +
"# } #", editor: equipmentModelDropDownEditor },
{ field: "Unit", title: "Unit", width: "180px", editor: unitNumericEditor },
{ field: "Price", title: "Price", width: "180px", editor: priceNumericEditor, format: "{0:c}" },
{ field: "Budget", title: "Budget", width: "180px", editor: budgetStaticEditor, format: "{0:c}", },
{ field: "Actual", title: "Actual", widht: "180px" },
{ command: ["edit", "destroy"], title: " ", width: "211px" }
],
editable: "inline",
dataBound: function(e) {
$('#@gridName').slideDown("slow");
}
});
});
</script>
How do I keep the page blank until all of them have loaded?
1 Answer, 1 is accepted
Hello Chad,
In this case you could hide the wrapper container in which the Grid is placed initially.
E.g.
#wrapper { display: none;}and then show it and resize the widget in the dataBound event handler.
E.g.
function dataBound(e) { $("#wrapper").show(); kendo.resize($("#wrapper"));}Dimiter Madjarov
Telerik