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

RadAjaxPanel & RadAjaxLoadingPanel not working in IE browser

2 Answers 171 Views

Ajax

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

2 Answers, 1 is accepted

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.

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">

<html xmlns="http://www.w3.org/1999/xhtml">

<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>

</td>

</tr>

</table>

<div class="clr">

</div>

<div class="clr">

</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>

<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)

{

}