This is a migrated thread and some comments may be shown as answers.

Multiple grids how to hide all of them until page loads

1 Answer 61 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Chad
Top achievements
Rank 1
Chad asked on 12 May 2015, 08:27 PM

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: "&nbsp;", 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

Sort by
0
Dimiter Madjarov
Telerik team
answered on 14 May 2015, 12:08 PM

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"));
}

Regards,
Dimiter Madjarov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
Chad
Top achievements
Rank 1
Answers by
Dimiter Madjarov
Telerik team
Share this question
or