How to block my grid when clicking the Save button?

StackOverflow https://stackoverflow.com/questions/21730073

Question

I found a nice example for blocking a part of my web page here.

But I have been trying for a couple of hours now to adapt my UserControl to this example but without any progress. Probably because I'm not so familiar with JQuery and ASP.Net yet. E.g. I do not understand what prm.add_beginRequest and prm.add_endRequest do and what this PageRequestManager is.

So I would like to ask the experts here, if you can solve my problem:

I have an ASP.Net UserControl with a grid (telerik RadGrid) on it. At the top I have a Save button ('btnSave'). When the button is clicked the server will save the data to files. So far so good. But meanwhile I would like to block this grid with the nice bar from the example.

Can anybody tell me how to adapt my UserControl so that the grid (and buttons) are blocked until the server is ready?

This is my ExcelGrid.ascx file so far:

<%@ Control Language="C#" AutoEventWireup="True" Codebehind="ExcelGrid.ascx.cs" className="ExcelGrid" Inherits="WebResourceEditor.UI.Main.RightContent.ExcelGrid" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<link href="/Styles/Styles.css" rel="Stylesheet" />
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript">
        var radGridId = "<%=mainDataGrid.ClientID %>";
    </script>
</telerik:RadCodeBlock>
<style type="text/css">
    html body span .rinSingle .riTextBox .RadInput .RadInput_Default
    {
        width: 100% !important;
    }
</style>
<telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" />
<script src="/Scripts/script.js" type="text/javascript"></script>
<script src = "/Scripts/jquery.blockUI.js" type = "text/javascript"></script>
<telerik:RadScriptBlock runat="server" ID="RadScriptBlock2">
    <script type="text/javascript">

        function RowContextMenu(sender, eventArgs) {
            var menu = window.$find("<%=RadMenu1.ClientID %>");
            var evt = eventArgs.get_domEvent();
            var index = eventArgs.get_gridDataItem().get_element().id.split("__")[1];
            document.getElementById("<%=radGridClickedRowIndex.ClientID %>").value = index;
            sender.get_masterTableView().selectItem(sender.get_masterTableView().get_dataItems()[index].get_element(), true);
            menu.show(evt);
            evt.cancelBubble = true;
            evt.returnValue = false;
            if (evt.stopPropagation) {
                evt.stopPropagation();
                evt.preventDefault();
            }
        }

        function GridCreated(sender, args) {
            var scrollArea = sender.GridDataDiv;
            var parent = window.$get("gridContainer");
            var gridLabel = window.$get("gridLabel");
            var gridMenuBar = window.$get("gridMenuBar");
            var gridHeader = sender.GridHeaderDiv;
            scrollArea.style.height = parent.clientHeight - gridHeader.scrollHeight
                - gridMenuBar.scrollHeight - gridLabel.scrollHeight - 1 + "px";
        }

        function BlockUI(elementID) {
            var prm = Sys.WebForms.PageRequestManager.getInstance();
            prm.add_beginRequest(function () {
                $("#" + elementID).block({ message: '<table align = "center"><tr><td>' +
                        '<img src="/Images/loadingAnim.gif"/></td></tr></table>',
                    css: {},
                    overlayCSS: { backgroundColor: '#000000', opacity: 0.6, border: '3px solid #63B2EB'
                    }
                });
            });
            prm.add_endRequest(function () {
                $("#" + elementID).unblock();
            });
        }
        $(document).ready(function () {

            BlockUI("gridContainer");
            $.blockUI.defaults.css = {};
        });
    </script>
</telerik:RadScriptBlock>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" EnableAJAX="true">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="mainDataGrid">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="mainDataGrid" LoadingPanelID="RadAjaxLoadingPanel1">
                </telerik:AjaxUpdatedControl>
                <telerik:AjaxUpdatedControl ControlID="RadMenu1"></telerik:AjaxUpdatedControl>
            </UpdatedControls>
        </telerik:AjaxSetting>
        <telerik:AjaxSetting AjaxControlID="RadMenu1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="mainDataGrid" LoadingPanelID="RadAjaxLoadingPanel1">
                </telerik:AjaxUpdatedControl>
                <telerik:AjaxUpdatedControl ControlID="RadMenu1"></telerik:AjaxUpdatedControl>
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>
<asp:HiddenField ID="radGridClickedRowIndex" runat="server" />
<div id="gridContainer" style="height:100%;">
    <asp:UpdatePanel ID="UpdatePanel2" runat="server">
    <ContentTemplate>
    <div id="gridLabel">
        <asp:Label ID="fileNameTextEdit" style="padding: 2px 5px;" 
            Text="No Project Folder or Resource File Group selected" runat="server" />
        <br/>
    </div>
    <telerik:RadGrid ID="mainDataGrid" OnNeedDataSource="mainDataGrid_NeedDataSource" OnPreRender="RadGrid1_PreRender" 
        Skin="Default" OnItemDataBound="RadGrid1_ItemDataBound" OnColumnCreated="mainDataGrid_ColumnCreated" 
        AllowMultiRowEdit="true" EnableLinqExpressions="false"
        OnItemCommand="RadGrid1_ItemCommand"
        runat="server">
        <MasterTableView EditMode="InPlace" CommandItemDisplay="Top" 
            DataKeyNames="FileGroup,Name">
            <CommandItemTemplate>
                <div id="gridMenuBar" style="padding: 5px 5px;">
                    <asp:LinkButton ID="btnSave" runat="server" CommandName="Save">
                        <img style="border:0px;vertical-align:middle;" alt="" src="/Images/RightContent/popupImages/image01.png" />Save in Database</asp:LinkButton>&nbsp;&nbsp;
                    <asp:LinkButton ID="btnCancel" runat="server" OnClientClick="DiscardChanges(this, event);"
                        CommandName="Discard Changes">
                        <img style="border:0px;vertical-align:middle;" alt="" src="/Images/icons/16/image25.png" />Discard Changes</asp:LinkButton>&nbsp;&nbsp;
                </div>
            </CommandItemTemplate>
            <Columns>
                <telerik:GridBoundColumn DataField="Name" HeaderText="Name" ReadOnly="true" />
            </Columns>
        </MasterTableView>
        <ClientSettings>
            <Scrolling AllowScroll="true" ScrollHeight="500px" UseStaticHeaders="true" />
            <ClientEvents OnRowContextMenu="RowContextMenu"/>
            <ClientEvents OnGridCreated="GridCreated" />
        </ClientSettings>
    </telerik:RadGrid>
    </ContentTemplate> 
    </asp:UpdatePanel> 
</div>
<telerik:RadContextMenu ID="RadMenu1" runat="server" OnItemClick="RadMenu1_ItemClick"
    OnClientItemClicking="RadMenu1_ItemClicking" EnableRoundedCorners="true" EnableShadows="true"
    OnClientLoad="MenuLoad">
    <Items>
        <telerik:RadMenuItem Text="Save" AccessKey="S">
        </telerik:RadMenuItem>
        <telerik:RadMenuItem Text="Discard Changes" AccessKey="C">
        </telerik:RadMenuItem>
    </Items>
</telerik:RadContextMenu>
Was it helpful?

Solution

As you could see, I am using Telerik controls. I managed to block my grid with the use of a RadAjaxLoadingPanel. For more information, see here.

OTHER TIPS

Yes, Telerik has such controls to display Loading Panel. Here

Also, if the time is too less for data to be refreshed, there are chances that you could see flickers.

To avoid this, you may add a minimum time Loading Panel should display using "MinDisplayTime", in milliseconds.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top