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

RadAjaxPanel & RadAjaxLoadingPanel not working in IE browser

2 Answers 130 Views
Ajax
This is a migrated thread and some comments may be shown as answers.
acb
Top achievements
Rank 1
acb asked on 05 Mar 2014, 08:19 AM
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 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 2
answered on 06 Mar 2014, 07:39 AM
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.
0
acb
Top achievements
Rank 1
answered on 10 Mar 2014, 09:15 AM
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)
            {
 
            }
 
        }
    }
}
Tags
Ajax
Asked by
acb
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 2
acb
Top achievements
Rank 1
Share this question
or