RadAjaxPanel & RadAjaxLoadingPanel not working in IE browser

3 posts, 0 answers
  1. acb
    acb avatar
    2 posts
    Member since:
    Mar 2014

    Posted 05 Mar 2014 Link to this post

    Hi,

    I am using RadAjaxLoadingPanel for showing waiting image on my master page.

    In firefox loading image animate & loads until next page loads but it doesnot work in IE.

    Do I need to set different ajax setting for IE?

    Thanks in advance.
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 06 Mar 2014 in reply to acb Link to this post

    Hi,

    Please have a look into the sample code snippet which works fine at my end.

    Master Page ASPX:
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default">
    </telerik:RadAjaxLoadingPanel>
    <telerik:RadAjaxPanel LoadingPanelID="RadAjaxLoadingPanel1" runat="server" ID="RadAjaxPanel1">
        <asp:Panel ID="Panel1" runat="server" Height="100" Width="100" Style="border: 1px solid red;">
        </asp:Panel>
        <asp:Button ID="Button1" runat="server" Text="Update" OnClick="Button1_Click" />
    </telerik:RadAjaxPanel>

    Master Page C#:
    protected void Button1_Click(object sender, EventArgs e)
    {
        Response.Redirect("~/RadAjax/AjaxifyRadioButton.aspx");
    }

    Thanks,
    Shinu.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. acb
    acb avatar
    2 posts
    Member since:
    Mar 2014

    Posted 10 Mar 2014 in reply to Shinu Link to this post

    Hi Shinu,

    Thanks but its not working at my side.

    I am posting my code below.
    Please tell me if there is feasible solution for my problem.
    It works sometimes in firefox correctly but I want this to work on IE 8 onwards only.

    Master page html as

    <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="New.Master.cs" Inherits="LoadingPanel.New" %>
     
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head id="Head1" runat="server">
        <title></title>
        <meta http-equiv="X-UA-Compatible" content="IE=10; IE=9; IE=8; IE=7; IE=EDGE" />
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9" />
        <link href="~/Styles/style.css" rel="stylesheet" type="text/css" />
        <link href="Styles/TelrikStyleSheet.css" rel="stylesheet" type="text/css" />
        <style type="text/css">
            .modalPopup
            {
                background-color: #ffffdd;
                border-width: 3px;
                border-style: solid;
                border-color: Gray;
                padding: 3px;
                width: 350px;
            }
            .modalBackground
            {
                background-color: Gray;
            }
             
             
            .modalPopup
            {
                background-color: #ffffdd;
                border-width: 3px;
                border-style: solid;
                border-color: Gray;
                padding: 3px;
                width: 100%;
                height: 100%;
                z-index: 2147483647;
            }
            .modalBackground
            {
                background-color: Gray;
                left: 0px;
                top: 0px;
                width: 100%;
                height: 100%;
                z-index: 2147483647;
            }
        </style>
        <%-- Overriding Style Sheet Of Telrik (Panel Bar And Tool BAr And RadGrid ) --%>
        <style type="text/css">
            #RadAjaxLoadingPanel1ctl00_RadSplitter1
            {
                position: fixed !important;
                left: 0px !important;
                top: 0px !important;
                width: 100% !important;
                height: 100% !important;
            }
            #RadAjaxLoadingPanel1ctl00_main_grd_view
            {
                position: fixed !important;
                left: 0px !important;
                top: 0px !important;
                width: 100% !important;
                height: 100% !important;
            }
            .settingdiv
            {
                left: 50%;
                top: 50%;
            }
             
            .settingdivlefttop
            {
                left: 35%;
                top: 50%;
            }
            .notification
            {
                text-align: center;
                position: fixed;
                height: 40px;
                z-index: 99999999;
                opacity: 0.8;
                padding: 5px 4px 12px 5px;
                display: block;
                height: 30px;
                opacity: 1;
            }
            .RadPanelBar_Vista .rpGroup a.rpLink
            {
                /* background-image: none !important;*/
            }
            .RadPanelBar_Vista .rpGroup .rpOut
            {
                background-image: none !important;
            }
             
            div.RadToolBar .rtbUL
            {
                width: 100%;
                white-space: normal;
            }
            div.RadToolBar .rightButton
            {
                float: right !important;
                margin-right: 0px;
            }
            .RadToolBar_Office2007 .rtbOuter
            {
                border: 1px solid #CDDAEA !important;
            }
            .RadToolBar_Office2007 .rtbWrap
            {
                color: #1E395B !important;
            }
            .RadComboBoxDropDown
            {
                text-align: left !important;
                word-wrap: break-word !important;
            }
            .MainHeading
            {
                background-image: none !important;
                background-color: #68ADE8 !important;
                color: White !important;
                font-size: 14px !important;
                font-weight: bold !important;
                line-height: 30px !important;
            }
             
            .rfdButton.RadForm_Default A.rfdSkinnedButton
            {
                background-image: none !important;
            }
            .RadSplitter .rspSlideContent
            {
                background-color: #C1DBF4 !important;
            }
             
            #ctl00_main_ctl00_main_RadToolBar1Panel
            {
                width: 100.1% !important;
                border-right-color: #CDDAEA !important;
                border-right-width: 1px !important;
                border-right-style: solid !important;
            }
            #ctl00_main_ctl00_main_RadToolBar1Panel1
            {
                width: 100.1% !important;
                border-right-color: #CDDAEA !important;
                border-right-width: 1px !important;
                border-right-style: solid !important;
            }
             
            /* for RadGrid */
             
            .RadGrid_Office2007
            {
                background: none repeat scroll 0 0 #D9D9D9 !important;
                border: 1px solid #D9D9D9 !important;
                color: #333333 !important;
            }
             
            .RadGrid .rgHeader
            {
                background: url('/images/WebResource_head.axd.png') repeat-x scroll 0 0 #D6E6F4 !important;
            }
             
             
             
            .RadGrid_Office2007 .rgHeader, .RadGrid_Office2007 th.rgResizeCol, .RadGrid_Office2007 .rgMultiHeaderRow th.rgHeader, .RadGrid_Office2007 .rgMultiHeaderRow th.rgResizeCol
            {
                -moz-border-bottom-colors: none;
                -moz-border-left-colors: none;
                -moz-border-right-colors: none;
                -moz-border-top-colors: none;
                border-color: #5D8CC9;
                border-style: solid;
                border-width: 0 0 1px 1px;
            }
             
            .RadGrid_Office2007 .rgHeader, .RadGrid_Office2007 th.rgResizeCol
            {
                -moz-border-bottom-colors: none;
                -moz-border-image: none;
                -moz-border-left-colors: none;
                -moz-border-right-colors: none;
                -moz-border-top-colors: none;
                border-color: #D9D9D9 !important;
                border-style: solid;
                border-width: 0 0 1pt 1pt; /*border: 1pt thin #D9D9D9 !important;*/
            }
            .RadGrid_Office2007 .rgSelectedRow td
            {
                border-bottom-color: #FFCB60 !important;
                background: none repeat scroll 0 0 #FFCB60 !important;
            }
            * + html .RadGrid_Office2007 .rgEditRow .rgSorted
            {
                background-color: #8cc63e !important;
            }
            * html .RadGrid_Office2007 .rgEditRow .rgSorted
            {
                background-color: #8cc63e !important;
            }
            .RadGrid_Office2007 .rgSelectedRow td, .RadGrid_Office2007 .rgActiveRow td, .RadGrid_Office2007 .rgHoveredRow td, .RadGrid_Office2007 .rgEditRow td
            {
                border-left-width: 1px !important;
                padding-left: 8px;
            }
            .RadGrid_Office2007 .rgEditRow
            {
                background: none repeat scroll 0 0 #8cc63e !important;
            }
            .RadGrid_Office2007 .rgGroupPanel
            {
                -moz-border-bottom-colors: none;
                -moz-border-image: none;
                -moz-border-left-colors: none;
                -moz-border-right-colors: none;
                -moz-border-top-colors: none;
                background: none repeat scroll 0 0 #D9D9D9 !important;
                border-color: -moz-use-text-color -moz-use-text-color #A9A7A8 !important;
                border: 0px solid #A9A7A8 !important;
                border-width: 0 0 1px;
            }
             
            .RadGrid_Office2007 .rgGroupPanel td
            {
                border: 0 none;
                padding: 3px 4px;
                vertical-align: middle;
            }
             
            .RadGrid_Office2007 td.rgGroupCol, .RadGrid_Office2007 td.rgExpandCol
            {
                background: none repeat scroll 0 0 #D9D9D9 !important;
                border-color: #D9D9D9 !important;
            }
            .RadGrid_Office2007 .rgGroupHeader
            {
                background: none repeat scroll 0 0 #D9D9D9 !important;
                color: #D9D9D9 !important;
                font-size: 1.1em !important;
                line-height: 21px !important;
            }
            .RadGrid_Office2007 .rgGroupHeader td
            {
                border: 1px #A9A7A8 !important;
                padding-left: 8px;
            }
             
            .RadGrid .rgGroupItem
            {
                font-weight: normal;
                color: #000000 !important;
                line-height: 20px;
                padding: 0 2px 1px 3px;
                vertical-align: middle;
                background: none repeat scroll 0 0 #D9D9D9 !important;
                border: 0px solid #A9A7A8 !important;
            }
             
            .RadGrid .rgPager td
            {
                padding: 0;
                background: white;
                border: 0px solid #A9A7A8 !important;
            }
            .RadGrid_Office2007 .rgInfoPart
            {
                color: Black !important;
            }
            .RadGrid .rgInfoPart
            {
                float: right;
            }
            .RadGrid .rgNumPart
            {
                padding: 0;
                color: Black !important;
            }
            .RadGrid .NumericPages .rgNumPart
            {
                padding: 0 10px;
            }
            .RadGrid_Office2007 .rgPager .rgPagerButton
            {
                background: none !important;
                border-color: #A9A7A8 !important;
            }
            .RadGrid .rgClipCells .rgHeader, .RadGrid .rgClipCells .rgFilterRow > td, .RadGrid .rgClipCells .rgRow > td, .RadGrid .rgClipCells .rgAltRow > td, .RadGrid .rgClipCells .rgEditRow > td, .RadGrid .rgClipCells .rgFooter > td
            {
                overflow: hidden !important;
                white-space: nowrap !important; /*border: 1pt thin #A9A7A8 !important;*/
            }
        </style>
        <%-- Menu Styling --%>
        <style type="text/css">
            #ctl00_SkinChooser
            {
                display: none !important;
            }
            #ctl00_Main_Facility_DropDown
            {
                position: relative !important;
            }
            #div_width
            {
                overflow: none !important;
            }
            #main_Image1
            {
                height: 50px !important;
                width: 50px !important;
                z-index: 999999 !important;
            }
            .MiddPan
            {
                height: auto !important;
                width: auto !important;
            }
            #RAD_SPLITTER_PANE_CONTENT_ctl00_MiddlePane
            {
                height: auto !important;
                width: auto !important;
            }
            #RAD_SPLITTER_ctl00_RadSplitter1
            {
                height: auto !important;
                width: auto !important;
            }
            #ctl00_RadSplitter1
            {
                height: auto !important;
                width: auto !important;
            }
            #ctl00_MiddlePane
            {
                border-width: 0px;
            }
            #ctl00_LeftPane
            {
                border-width: 0px;
            }
            #RAD_SLIDING_PANE_TAB_ctl00_Pane1
            {
                height: 700px;
                width: 22px;
                padding-top: 250px;
            }
            .rspPaneTabContainer
            {
                border-width: 0px !important;
                background-color: #0070C0 !important;
                background-image: none !important;
            }
            .RadPanelBar .rpLevel1 .rpLast
            {
                border-bottom-width: 0px !important;
            }
             
            .RadGrid .rgMasterTable, .RadGrid .rgDetailTable
            {
                border-collapse: collapse !important;
                border-spacing: 0.9em !important;
            }
        </style>
        <asp:ContentPlaceHolder ID="head" runat="server">
        </asp:ContentPlaceHolder>
        <style type="text/css">
            .content_resize
            {
                padding-left: 0px !important;
            }
             
            /*RadAjaxLoadingPanel MySkin Skin*/
             
            /*loading image - do not specify background-position or background-repeat*/
            .RadAjax_MySkin .raDiv
            {
                background-image: url(images/loading-icon1.gif);
            }
             
            /*loading panel background color*/
            .RadAjax_MySkin .raColor
            {
                background-color: gray;
            }
             
            /*skin transparency level - the smaller the number, the more the transparency*/
            .RadAjax_MySkin .raTransp
            {
                opacity: 0.3; /*non-IE browsers, 0-1*/
                -moz-opacity: 0.3; /*old Mozilla browsers, 0-1*/
                filter: alpha(opacity=70); /*IE, 0-100*/
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:HiddenField ID="HiddenField1" runat="server" Value="0" />
        <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
        <telerik:RadSkinManager ID="QsfSkinManager" runat="server" ShowChooser="true" />
        <telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server">
        </telerik:RadStyleSheetManager>
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadSplitter1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadSplitter1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" HorizontalAlign="Center"
            EnableEmbeddedSkins="false" Skin="MySkin" ZIndex="2147483647">
            <%--<div class="modalBackground" style="position: fixed; left: 0px; top: 0px; width: 100%;
                        height: 100%;">
                        <div style="z-index: 2147483647 !important" class="notification settingdiv">
                            <span style="z-index: 2147483647 !important">
                                <asp:Image ID="Image2" runat="server" AlternateText="Loading..." Width="50" Height="50"
                                    ImageUrl="~/images/loading-icon1.gif" Visible="true"></asp:Image>
                            </span>
                        </div>
                    </div>--%>
        </telerik:RadAjaxLoadingPanel>
        <div id="MainContent" class="main">
            <div class="content">
                <div class="content_resize">
                    <table cellpadding="0" cellspacing="0" style="width: auto; table-layout: fixed;">
                        <tr>
                            <td>
                                <div class="page_content">
                                    <table style="width: auto !important; table-layout: fixed;">
                                        <tr>
                                            <td valign="top">
                                                <telerik:RadSplitter ID="RadSplitter1" runat="server" Style="width: auto !important;
                                                    height: auto !important;">
                                                    <telerik:RadPane ID="LeftPane" runat="server" Width="22" Scrolling="none" BorderColor="Transparent"
                                                        BorderWidth="0px" BorderStyle="None" Style="width: auto !important; height: auto !important;">
                                                        <telerik:RadSlidingZone ID="SlidingZone1" ToolTip="" DockedPaneId="Pane1" runat="server"
                                                            Style="width: 100% !important; height: auto !important;">
                                                            <telerik:RadSlidingPane ID="Pane1" ToolTip="" EnableResize="false" Width="270px"
                                                                Title=" " Scrolling="None" runat="server" Style="width: auto !important; height: auto !important;">
                                                                <table width="100%" cellpadding="0" cellspacing="0" style="">
                                                                    <tr>
                                                                        <td>
                                                                            <telerik:RadTabStrip ID="main_tabs" runat="server" MultiPageID="main_page" Skin="Default"
                                                                                BorderStyle="Solid" BorderWidth="1px" BorderColor="#B6B6B8">
                                                                                <Tabs>
                                                                                    <telerik:RadTab runat="server" Text="Menu" Style="width: 90px;" PageViewID="PageView_menu"
                                                                                        Selected="True" Value="Menu">
                                                                                    </telerik:RadTab>
                                                                                </Tabs>
                                                                            </telerik:RadTabStrip>
                                                                        </td>
                                                                    </tr>
                                                                </table>
                                                                <div class="qsf-demo-canvas">
                                                                    <telerik:RadMultiPage ID="main_page" Style="position: static;" runat="server" SelectedIndex="0"
                                                                        Height="100%">
                                                                        <telerik:RadPageView ID="PageView_menu" Visible="true" runat="server" Style="margin: 0 auto;
                                                                            padding: 0 auto; height: 100%;">
                                                                            <div id="effect" style="padding-left: 0px; height: 100%;">
                                                                                <telerik:RadPanelBar ID="main_menu" Width="100%" Skin="Vista" OnItemClick="SlidingSaveItemClick"
                                                                                    runat="server" PersistStateInCookie="true" CookieName="pnlBarMainMenu">
                                                                                    <Items>
                                                                                        <telerik:RadPanelItem runat="server" PostBack="true" Text="Setup" BorderColor="Transparent"
                                                                                            BorderStyle="None" BorderWidth="0px" Value="main_setup" SkinID="MainMenu">
                                                                                            <Items>
                                                                                                <telerik:RadPanelItem runat="server" PostBack="true" Style="background-image: none !important;"
                                                                                                    BorderStyle="None" BorderWidth="0px" SkinID="SubMenuNew" ImageUrl="~/images/icon.png"
                                                                                                    Text="Page" Value="Page">
                                                                                                    <Items>
                                                                                                        <telerik:RadPanelItem runat="server" SkinID="SubMenu2" Style="background-image: none !important;"
                                                                                                            ImageUrl="~/images/sub_menu_list_img.png" BorderStyle="None" BorderWidth="0px"
                                                                                                            Text="Page 1" Value="1">
                                                                                                        </telerik:RadPanelItem>
                                                                                                        <telerik:RadPanelItem runat="server" SkinID="SubMenu2" Style="background-image: none !important;"
                                                                                                            ImageUrl="~/images/sub_menu_list_img.png" BorderColor="Transparent" BorderStyle="None"
                                                                                                            BorderWidth="0px" Text="Page 2" Value="2">
                                                                                                        </telerik:RadPanelItem>
                                                                                                    </Items>
                                                                                                </telerik:RadPanelItem>
                                                                                            </Items>
                                                                                        </telerik:RadPanelItem>
                                                                                    </Items>
                                                                                </telerik:RadPanelBar>
                                                                            </div>
                                                                            <div class="clr">
                                                                            </div>
                                                                        </telerik:RadPageView>
                                                                    </telerik:RadMultiPage>
                                                                </div>
                                                            </telerik:RadSlidingPane>
                                                        </telerik:RadSlidingZone>
                                                    </telerik:RadPane>
                                                    <telerik:RadPane ID="MiddlePane" BorderColor="Transparent" BorderWidth="0px" BorderStyle="None"
                                                        runat="server" CssClass="MiddPan" Style="width: auto !important; height: auto !important;">
                                                        <div id="main_content" class="main_content" runat="server" style="width: 100% !important;
                                                            height: auto !important; padding-left: 15px;">
                                                            <asp:ContentPlaceHolder ID="main" runat="server">
                                                            </asp:ContentPlaceHolder>
                                                        </div>
                                                    </telerik:RadPane>
                                                </telerik:RadSplitter>
                                            </td>
                                        </tr>
                                    </table>
                                    <div class="clr">
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </table>
                    <div class="clr">
                    </div>
                </div>
                <div class="clr">
                </div>
            </div>
        </div>
        <div style="visibility: hidden; height: 15px;" id="inprogress" class="notification settingdiv">
            <span style="vertical-align: top; font-size: 12px;">
                <asp:Image ID="Image1" runat="server" AlternateText="Loading..." Width="50" Height="50"
                    ImageUrl="~/images/loading-icon1.gif"></asp:Image>
            </span>
        </div>
        <div id="MainContent_ModalPopupExtender1_backgroundElement" class="modalBackground"
            style="position: fixed; left: 0px; top: 0px; z-index: 10000; width: 100%; height: 100%;
            display: none;">
        </div>
        </form>
    </body>
    </html>

    and code behind for master page as

    protected void Page_Load(object sender, EventArgs e)
           {
               try
               {
     
               }
               catch (Exception ex)
               {
               }
           }
                   
           protected void SlidingSaveItemClick(object sender, RadPanelBarEventArgs e)
           {
               try
               {
                   string ModuleName = "";
                   ModuleName = e.Item.Value;
     
                   switch (ModuleName)
                   {
     
                       // Maintenance Business Planning
                       case "1":
                           Response.Redirect("~/Page1.aspx", false);
                           break;
                       case "2":
                           Response.Redirect("~/Page2.aspx", false);
                           break;
                   }
               }
               catch (Exception ex)
               {
                   throw ex;
               }
           }

     Page1.aspx looks like this

    <%@ Page Language="C#" AutoEventWireup="true" MasterPageFile="~/New.Master" CodeBehind="Page1.aspx.cs"
        Inherits="LoadingPanel.Page1" %>
     
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="main" runat="server">
        <div class="mainpagecontent" id="print_area">
            <div class="grid_box" style="width: 100%; min-width: 900px;">
                <telerik:RadToolBar ID="RadToolBar1" runat="server" EnableRoundedCorners="true" EnableShadows="true"
                    Skin="Office2007" OnButtonClick="RadToolBar1_ButtonClick" Width="100%" AutoPostBack="true">
                    <ExpandAnimation Type="OutQuart" Duration="300"></ExpandAnimation>
                    <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
                    <Items>
                        <telerik:RadToolBarButton Value="Export" runat="server" OuterCssClass="rightButton"
                            ImageUrl="~/images/excelExport_icon.png" CssClass="float_right">
                        </telerik:RadToolBarButton>
                        <telerik:RadToolBarButton Value="ClearFilter" OuterCssClass="rightButton" Text="Clear Filter"
                            runat="server" ImageUrl="~/images/Filter.png" Visible="false">
                        </telerik:RadToolBarButton>
                        <telerik:RadToolBarButton Value="Search" OuterCssClass="rightButton" Text="Search"
                            runat="server" ImageUrl="~/images/Search.png">
                        </telerik:RadToolBarButton>
                    </Items>
                </telerik:RadToolBar>
                <div style="width: 100%;">
                    <telerik:RadGrid ID="grd_view" runat="server" CssClass="RadGrid" GridLines="None" AutoGenerateColumns="false"
                        AllowPaging="True" PageSize="10" AllowSorting="True" ShowStatusBar="true" AllowAutomaticInserts="false"
                        AllowMultiRowSelection="True" HorizontalAlign="NotSet" GroupingEnabled="true"
                        ShowGroupPanel="false" OnNeedDataSource="grd_view_NeedDataSource" EnableLinqExpressions="false">
                        <GroupingSettings GroupContinuedFormatString="" GroupContinuesFormatString="" GroupSplitDisplayFormat=""
                            GroupSplitFormat="{0}" />
                        <ClientSettings AllowExpandCollapse="True" AllowDragToGroup="False" AllowColumnsReorder="False">
                            <Selecting AllowRowSelect="True" UseClientSelectColumnOnly="True" />
                            <Resizing AllowColumnResize="true" />
                        </ClientSettings>
                        <MasterTableView CommandItemDisplay="TopAndBottom" DataKeyNames="Id" EditMode="PopUp">
                            <CommandItemSettings ExportToPdfText="Export to PDF" ShowAddNewRecordButton="false"
                                ShowRefreshButton="false"></CommandItemSettings>
                            <CommandItemSettings ExportToPdfText="Export to PDF"></CommandItemSettings>
                            <RowIndicatorColumn FilterControlAltText="Filter RowIndicator column">
                            </RowIndicatorColumn>
                            <ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column">
                            </ExpandCollapseColumn>
                            <Columns>
                                <telerik:GridClientSelectColumn UniqueName="d" Groupable="false">
                                </telerik:GridClientSelectColumn>
                                <telerik:GridBoundColumn DataField="Id" FilterControlAltText="Filter column column"
                                    HeaderText="Id" UniqueName="Id" Visible="false">
                                </telerik:GridBoundColumn>
                                <telerik:GridTemplateColumn HeaderText="Name" FilterControlWidth="300px" AutoPostBackOnFilter="true"
                                    CurrentFilterFunction="Contains" ShowFilterIcon="false" DataField="Name" UniqueName="Name"
                                    FilterControlAltText="Filter column1 column">
                                    <ItemTemplate>
                                        <asp:Label ID="lbl_Id" Visible="false" runat="server" Text='<%#Eval("Id") %>'></asp:Label>
                                        <asp:LinkButton ID="LinkButton2" runat="server" CommandName="Edit123" Text='<%# HttpUtility.HtmlEncode(Eval("Name")) %>'></asp:LinkButton>
                                    </ItemTemplate>
                                </telerik:GridTemplateColumn>
                                <telerik:GridBoundColumn HeaderText="Mobile" FilterControlAltText="Filter column1 column"
                                    HtmlEncode="true" DataField="Mobile" UniqueName="Mobile" FilterControlWidth="300px"
                                    AutoPostBackOnFilter="true" CurrentFilterFunction="Contains" ShowFilterIcon="false"
                                    SortExpression="Mobile">
                                    <HeaderStyle Width="100px" />
                                </telerik:GridBoundColumn>
                            </Columns>
                            <EditFormSettings>
                                <EditColumn FilterControlAltText="Filter EditCommandColumn column">
                                </EditColumn>
                            </EditFormSettings>
                        </MasterTableView>
                        <FilterMenu EnableImageSprites="False">
                        </FilterMenu>
                        <HeaderStyle Width="250px" />
                        <HeaderContextMenu CssClass="GridContextMenu GridContextMenu_Default">
                        </HeaderContextMenu>
                    </telerik:RadGrid>
                </div>
            </div>
        </div>
        <telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadToolBar1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="grd_view" LoadingPanelID="RadAjaxLoadingPanel1" />
                        <telerik:AjaxUpdatedControl ControlID="RadToolBar1" />
                        <telerik:AjaxUpdatedControl ControlID="radwindowExport" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="grd_view">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="grd_view" LoadingPanelID="RadAjaxLoadingPanel1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="grd_view" EventName="ItemCommand">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="grd_view" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="btnExport">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="radwindowExport" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="btnExportCancel">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="radwindowExport" />
                        <telerik:AjaxUpdatedControl ControlID="grd_view" LoadingPanelID="RadAjaxLoadingPanel1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManagerProxy>
        <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server" >
            <script type="text/javascript">
                function onRequestExport(sender, eventArgs) {
                    if (eventArgs.get_eventTarget().indexOf("btnExport") != -1 && eventArgs.get_eventTarget().indexOf("btnExportCancel") == -1) {
                        eventArgs.set_enableAjax(false);
                    }
                }
            </script>
        </telerik:RadCodeBlock>
        <telerik:RadWindowManager ID="RadWindowManagerExport" runat="server" VisibleStatusbar="false"
            Width="450" Height="200" ReloadOnShow="true" EnableShadow="true" ShowContentDuringLoad="false">
            <Windows>
                <telerik:RadWindow ID="radwindowExport" runat="server" SkinID="Office2010" ShowContentDuringLoad="false"
                    VisibleOnPageLoad="false" CssClass="Export" Modal="true" BackColor="#DADADA"
                    VisibleStatusbar="false" Behaviors="Move,Close" Title="Export To Excel">
                    <ContentTemplate>
                        <telerik:RadAjaxPanel ID="RadAjaxPanel3111" runat="server">
                            <div style="padding: 20px; padding-bottom: 10px">
                                <table width="100%" cellpadding="0" cellspacing="0">
                                    <tr>
                                        <td>
                                            <asp:RadioButton Checked="true" Style="color: Black;" GroupName="export" ID="rbDisplayData"
                                                runat="server" Text="Only a page on display" />
                                               
                                            <asp:RadioButton Style="color: Black;" GroupName="export" ID="rbAllData" runat="server"
                                                Text="All data" />
                                        </td>
                                    </tr>
                                    <tr>
                                        <td align="right" valign="middle" style="padding-top: 15px; padding-right: 3px">
                                            <telerik:RadButton ID="btnExport" runat="server" Text="OK" Width="75px" OnClick="ExportToExcel">
                                            </telerik:RadButton>
                                              
                                            <telerik:RadButton ID="btnExportCancel" runat="server" Text="Cancel" Width="75px"
                                                OnClick="ExportToExcelCancel">
                                            </telerik:RadButton>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </telerik:RadAjaxPanel>
                    </ContentTemplate>
                </telerik:RadWindow>
            </Windows>
        </telerik:RadWindowManager>
    </asp:Content>

    and Page1.aspx.cs like this

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using Telerik.Web.UI;
    using System.Data;
    using System.Collections;
    using ClosedXML.Excel;
    using System.IO;
     
    namespace LoadingPanel
    {
        public partial class Page1 : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                System.Threading.Thread.Sleep(2000);
     
                RadAjaxManager man = (RadAjaxManager) Master.FindControl("RadAjaxManager1");
                man.ClientEvents.OnRequestStart = "onRequestExport";
     
                gridbind();
            }
     
            void gridbind()
            {
                try
                {
                    RadToolBar1.Visible = true;
                    grd_view.Visible = true;
     
                    grd_view.DataSource = GetStudents();
                    grd_view.DataBind();
                }
                catch (Exception ex)
                {
                }
            }
     
            public List<Student> GetStudents()
            {
                List<Student> lstStudents = new List<Student>();
     
                for (int i = 0; i < 50; i++)
                {
                    Student stud = new Student { Id = i, Name = "Student" + i, Mobile = "999999999" };
                    lstStudents.Add(stud);
                }
     
                return lstStudents;
            }
     
            protected void grd_view_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
            {
                try
                {
                    RadToolBar1.Visible = true;
                    grd_view.Visible = true;
     
                    grd_view.DataSource = GetStudents();
                }
                catch (Exception ex)
                {
                }
            }
     
            protected void RadToolBar1_ButtonClick(object sender, RadToolBarEventArgs e)
            {
                try
                {
                    if (e.Item.Value == "Search")
                    {
                        radwindowExport.VisibleOnPageLoad = false;
     
                        if (grd_view.MasterTableView.AllowFilteringByColumn)
                        {
                            grd_view.MasterTableView.AllowFilteringByColumn = false;
                            foreach (GridColumn column in grd_view.MasterTableView.OwnerGrid.Columns)
                            {
                                column.CurrentFilterFunction = GridKnownFunction.NoFilter;
                                column.CurrentFilterValue = string.Empty;
                            }
     
                            grd_view.MasterTableView.FilterExpression = string.Empty;
                            grd_view.Rebind();
                            RadToolBarButton clearFilterButton = (RadToolBarButton)RadToolBar1.FindItemByValue("ClearFilter");
                            clearFilterButton.Visible = false;
                        }
                        else
                        {
                            grd_view.MasterTableView.AllowFilteringByColumn = true;
                            grd_view.MasterTableView.FilterExpression = string.Empty;
                            grd_view.Rebind();
     
                            RadToolBarButton clearFilterButton = (RadToolBarButton)RadToolBar1.FindItemByValue("ClearFilter");
                            clearFilterButton.Visible = true;
                        }
                    }
                    else if (e.Item.Value == "Export")
                    {
                        try
                        {
                            radwindowExport.VisibleOnPageLoad = true;
                        }
                        catch (Exception ex)
                        {
                        }
                    }
                    else if (e.Item.Value == "ClearFilter")
                    {
                        radwindowExport.VisibleOnPageLoad = false;
     
                        foreach (GridColumn column in grd_view.MasterTableView.OwnerGrid.Columns)
                        {
                            column.CurrentFilterFunction = GridKnownFunction.NoFilter;
                            column.CurrentFilterValue = string.Empty;
                        }
     
                        grd_view.MasterTableView.FilterExpression = string.Empty;
                        grd_view.Rebind();
                    }
                }
                catch (Exception ex)
                {
                }
            }
     
            protected void ExportToExcel(object sender, EventArgs e)
            {
                try
                {
                    radwindowExport.VisibleOnPageLoad = false;
     
                    ArrayList HeaderName = new ArrayList();
                    HeaderName.Add("Name");
                    HeaderName.Add("Mobile");
     
                    DataTable dtStudent = ConvertListToDataTable(GetStudents());
     
                    if (rbAllData.Checked)
                    {
                        DownloadExcelExport(dtStudent, HeaderName, "Student");
                    }
                    else
                    {
                        DownloadExcelExport(dtStudent, HeaderName, "Student");
                    }
                }
                catch (Exception ex)
                {
                }
            }
     
            static DataTable ConvertListToDataTable(List<Student> list)
            {
                DataTable table = new DataTable();
     
                table.Columns.Add("Id",Type.GetType("System.Int16"));
                table.Columns.Add("Name");
                table.Columns.Add("Mobile");
     
                foreach (var Student in list)
                {
                    DataRow dr = table.NewRow();
     
                    dr["Id"] = Student.Id.ToString();
                    dr["Name"] = Student.Name;
                    dr["Mobile"] = Student.Mobile;
     
                    table.Rows.Add(dr);
                }
     
                return table;
            }
     
            protected void ExportToExcelCancel(object sender, EventArgs e)
            {
                try
                {
                    radwindowExport.VisibleOnPageLoad = false;
                }
                catch (Exception ex)
                {
     
                }
            }
     
            public static void DownloadExcelExport(DataTable dtData, ArrayList HeaderName, string FileName)
            {
                try
                {
                    //variable workbook created
                    var workbook = new XLWorkbook();
                    dtData.TableName = "Export";
                    int colcount = 0;
                    if (dtData.Columns.Count == 0)
                    {
                        foreach (string HN in HeaderName)
                        {
                            dtData.Columns.Add(HN);
                        }
                    }
                    else
                    {
                        //foreach loop
                        foreach (string HN in HeaderName)
                        {
                            if (!dtData.Columns.Contains(HN))
                            {
                                dtData.Columns[colcount].ColumnName = HN;
                                colcount++;
                            }
                            else
                            {
                                dtData.Columns[colcount].ColumnName = " " + HN;
                                colcount++;
                            }
                        }//foreach end
     
                    }
                    workbook.Worksheets.Add(dtData);
     
                    HttpContext.Current.Response.Clear();
                    HttpContext.Current.Response.ContentType = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
                    HttpContext.Current.Response.AddHeader("content-disposition", "attachment;filename=\"" + FileName + ".xlsx\"");
     
                    using (MemoryStream memoryStream = new MemoryStream())
                    {
                        workbook.SaveAs(memoryStream);
                        memoryStream.WriteTo(HttpContext.Current.Response.OutputStream);
                        memoryStream.Close();
                    }
                    HttpContext.Current.Response.Flush();
                    try
                    {
                        HttpContext.Current.Response.End();
                    }
                    catch (Exception ex)
                    {
                    }
                }
                catch (Exception)
                {
     
                }
     
            }
        }
    }
Back to Top