Hello,
I have a RadGrid on a page that also has a RadWindow which loads a page that displays a Telerik Report.
The RadWindow is shown through javascript which simply does $find and calls the show() function.
Everything works fine until the point when the RadWindow is closed (by clicking the X in the top right) - the RadGrid Edit and Delete buttons will cause RadAjaxManager to display a RadAjaxLoadingPanel and do an async postback through RadAjaxManager but the OnItemCommand event of the RadGrid is never fired and when the RadAjaxLoadingPanel disappears the RadGrid has lost it's data! In addition, during the async postback, the RadGrid never fires it's OnNeedDataSource event. If you click the Edit or Delete button again (a 2nd time) after closing the RadWindow everything goes back to normal.
Additional details:
The RadGrid is bound in codebehind via LINQ to SQL classes.
The RadGrid has 4 events configured - OnNeedDataSource, OnItemCommand, OnItemCreated, OnItemDataBound
The RadWindow is a modal and displays another page which contains a Telerik Report Viewer and binds the Report Datasource via codebehind to LINQ to SQL classes.
I am using the latest version of the AJAX Controls (Q3 2008) and Telerik Reports (Q3 2008).
Here is the page that the RadWindow loads:
Here is the relavant code from the page that contains the Grid and the Window:
I really appreciate any help you could give me on this. This is not the most horrible thing in the entire world because it is fixed by just clicking the button again but it is definitely confusing for a sales person who is not computer-savvy and has to print a quote and then edit what he was working on.
I have a RadGrid on a page that also has a RadWindow which loads a page that displays a Telerik Report.
The RadWindow is shown through javascript which simply does $find and calls the show() function.
Everything works fine until the point when the RadWindow is closed (by clicking the X in the top right) - the RadGrid Edit and Delete buttons will cause RadAjaxManager to display a RadAjaxLoadingPanel and do an async postback through RadAjaxManager but the OnItemCommand event of the RadGrid is never fired and when the RadAjaxLoadingPanel disappears the RadGrid has lost it's data! In addition, during the async postback, the RadGrid never fires it's OnNeedDataSource event. If you click the Edit or Delete button again (a 2nd time) after closing the RadWindow everything goes back to normal.
Additional details:
The RadGrid is bound in codebehind via LINQ to SQL classes.
The RadGrid has 4 events configured - OnNeedDataSource, OnItemCommand, OnItemCreated, OnItemDataBound
The RadWindow is a modal and displays another page which contains a Telerik Report Viewer and binds the Report Datasource via codebehind to LINQ to SQL classes.
I am using the latest version of the AJAX Controls (Q3 2008) and Telerik Reports (Q3 2008).
Here is the page that the RadWindow loads:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Quote.aspx.cs" Inherits="_PrintForms_Quote" %> |
<%@ Register Assembly="Telerik.ReportViewer.WebForms, Version=2.9.9.202, Culture=neutral, PublicKeyToken=a9d7983dfcc261be" Namespace="Telerik.ReportViewer.WebForms" TagPrefix="telerik" %> |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> |
<html xmlns="http://www.w3.org/1999/xhtml"> |
<head runat="server"> |
<title></title> |
<style type="text/css"> |
html#html, body#body, form#form1, div#content, center#center |
{ |
border: 0px solid black; |
padding: 0px; |
margin: 0px; |
height: 100%; |
} |
</style> |
</head> |
<body> |
<form id="form1" runat="server"> |
<div> |
<telerik:ReportViewer ID="rvQuote" runat="server" |
Report="Reports.Quote, Reports, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null" |
Skin="Office2007" Width="100%" Height="100%"> |
</telerik:ReportViewer> |
</div> |
</form> |
</body> |
</html> |
Here is the relavant code from the page that contains the Grid and the Window:
<telerik:RadCodeBlock ID="rcbJavaScript" runat="server"> |
<script language="javascript" type="text/javascript"> |
function ramAjax_RequestStart(sender, args) { |
document.body.style.cursor = "wait"; |
AdjustLoadingPanelHeight(); |
}; |
function ramAjax_ResponseEnd(sender, args) { |
document.body.style.cursor = "default"; |
} |
function AdjustLoadingPanelHeight() { |
var windowBounds = GetWindowBounds(); |
var loadingPanel = $get("<%= ralpModal.ClientID %>"); |
loadingPanel.style.width = windowBounds.width + 'px'; |
loadingPanel.style.height = windowBounds.height + 'px'; |
var loadingImageContainer = $get('<%= loadingImageContainer.ClientID %>'); |
loadingImageContainer.style.marginTop = ((windowBounds.height / 2) - 40) + 'px'; |
} |
function rgLineItems_OnPopUpShowing(sender, eventArgs) { |
var windowBounds = GetWindowBounds(); |
var popup = eventArgs.get_popUp(); |
blackbird.debug('popup.style.width=' + parseInt(popup.style.width)); |
blackbird.debug('popup.style.height=' + parseInt(popup.style.height)); |
popup.style.top = ((windowBounds.height / 2) - (parseInt(popup.style.height) / 2)) + 'px'; |
popup.style.left = ((windowBounds.width / 2) - (parseInt(popup.style.width) / 2)) + 'px'; |
} |
var costInput = null; |
function Cost_Load(sender, args) { |
costInput = sender; |
} |
var itemTotalInput = null; |
function ItemTotal_Load(sender, args) { |
itemTotalInput = sender; |
} |
var markUpInput = null; |
function MarkUp_Load(sender, args) { |
markUpInput = sender; |
} |
var priceInput = null; |
function Price_Load(sender, args) { |
priceInput = sender; |
} |
var quantityInput = null; |
function Quantity_Load(sender, args) { |
quantityInput = sender; |
} |
function CalculatePriceAndTotal() { |
// formula: price = cost / ((100 - markup) / 100) |
var cost = costInput.get_value(); |
var markUp = markUpInput.get_value(); |
try { |
priceInput.set_value(RoundNumber(cost / ((100 - markUp) / 100), 2)); |
} |
catch (e) { } |
CalculateTotalPrice(); |
} |
function CalculateTotalPrice() { |
var quantity = quantityInput.get_value(); |
var price = priceInput.get_value(); |
try { |
itemTotalInput.set_value(RoundNumber(quantity * price, 2)); |
} |
catch (e) { } |
} |
function TriggerCalculatePriceAndTotal_KeyPress(sender, args) { |
setTimeout('CalculatePriceAndTotal();', 500); |
} |
function TriggerCalculateTotalPrice_KeyPress(sender, args) { |
setTimeout('CalculateTotalPrice();', 500); |
} |
function rgInvoices_RowMouseOut(sender, eventArgs) { |
var currentRowElement = sender.get_masterTableView().get_dataItems()[eventArgs.get_itemIndexHierarchical()].get_element(); |
var backgroundColor = ''; |
currentRowElement.style.backgroundColor = rowPreviousBackgroundColor; |
} |
function rgInvoices_RowMouseOver(sender, eventArgs) { |
var currentRowElement = sender.get_masterTableView().get_dataItems()[eventArgs.get_itemIndexHierarchical()].get_element(); |
rowPreviousBackgroundColor = currentRowElement.style.backgroundColor; |
currentRowElement.style.cursor = 'pointer'; |
currentRowElement.style.backgroundColor = '#e6eaff'; |
} |
function rgInvoices_RowClick(sender, eventArgs) { |
var currentRowItem = sender.get_masterTableView().get_dataItems()[eventArgs.get_itemIndexHierarchical()]; |
location.href = 'Invoices.aspx?InvoiceId=' + currentRowItem.getDataKeyValue('InvoiceId'); |
} |
function ShowPrintForm() { |
$find('<%= rwPrint.ClientID %>').show(); |
} |
</script> |
</telerik:RadCodeBlock> |
<telerik:RadAjaxManager ID="ramAjax" runat="server" UpdatePanelsRenderMode="Inline" DefaultLoadingPanelID="ralpModal"> |
<ClientEvents OnRequestStart="ramAjax_RequestStart();" OnResponseEnd="ramAjax_ResponseEnd();" /> |
<AjaxSettings> |
<telerik:AjaxSetting AjaxControlID="companyId"> |
<UpdatedControls> |
<telerik:AjaxUpdatedControl ControlID="contactId" LoadingPanelID="ralpLoadingFields" /> |
<telerik:AjaxUpdatedControl ControlID="addressId" LoadingPanelID="ralpLoadingFields" /> |
</UpdatedControls> |
</telerik:AjaxSetting> |
<telerik:AjaxSetting AjaxControlID="btnSaveAndNew"> |
<UpdatedControls> |
<telerik:AjaxUpdatedControl ControlID="ramAjax" /> |
<telerik:AjaxUpdatedControl ControlID="makesRadAjaxManagerWork" /> |
</UpdatedControls> |
</telerik:AjaxSetting> |
<telerik:AjaxSetting AjaxControlID="btnSave"> |
<UpdatedControls> |
<telerik:AjaxUpdatedControl ControlID="ramAjax" /> |
<telerik:AjaxUpdatedControl ControlID="makesRadAjaxManagerWork" /> |
</UpdatedControls> |
</telerik:AjaxSetting> |
<telerik:AjaxSetting AjaxControlID="btnSaveAndPrint"> |
<UpdatedControls> |
<telerik:AjaxUpdatedControl ControlID="ramAjax" /> |
<telerik:AjaxUpdatedControl ControlID="makesRadAjaxManagerWork" /> |
<telerik:AjaxUpdatedControl ControlID="modifyDate" /> |
<telerik:AjaxUpdatedControl ControlID="modifiedBy" /> |
</UpdatedControls> |
</telerik:AjaxSetting> |
<telerik:AjaxSetting AjaxControlID="btnCreateInvoice"> |
<UpdatedControls> |
<telerik:AjaxUpdatedControl ControlID="ramAjax" /> |
<telerik:AjaxUpdatedControl ControlID="makesRadAjaxManagerWork" /> |
<telerik:AjaxUpdatedControl ControlID="modifyDate" /> |
<telerik:AjaxUpdatedControl ControlID="modifiedBy" /> |
</UpdatedControls> |
</telerik:AjaxSetting> |
<telerik:AjaxSetting AjaxControlID="btnDelete"> |
<UpdatedControls> |
<telerik:AjaxUpdatedControl ControlID="ramAjax" /> |
<telerik:AjaxUpdatedControl ControlID="makesRadAjaxManagerWork" /> |
</UpdatedControls> |
</telerik:AjaxSetting> |
<telerik:AjaxSetting AjaxControlID="rgLineItems"> |
<UpdatedControls> |
<telerik:AjaxUpdatedControl ControlID="rgLineItems" /> |
</UpdatedControls> |
</telerik:AjaxSetting> |
</AjaxSettings> |
</telerik:RadAjaxManager> |
<telerik:RadAjaxLoadingPanel ID="ralpLoading" runat="server" Height="75px" Width="75px"> |
<img alt="Loading..." src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading.gif") %>' |
style="border: 0px;" /> |
</telerik:RadAjaxLoadingPanel> |
<telerik:RadAjaxLoadingPanel ID="ralpLoadingFields" runat="server" Height="75px" Width="75px"> |
<img alt="Loading..." src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading3.gif") %>' |
style="border: 0px;" /> |
</telerik:RadAjaxLoadingPanel> |
<telerik:RadAjaxLoadingPanel ID="ralpModal" runat="server" IsSticky="true" Transparency="35" BackColor="#00102A" style="position:absolute;top:0;left:0;z-index:100001;" Width="100%" Height="100%"> |
<div id="loadingImageContainer" runat="server" style="text-align: center; width: 200px; height: 200px; margin: 0 auto 0 auto;"> |
<div style="position: relative; width: 200px; height: 6px; font-size: 1px;"> |
<div style="position: absolute; z-index: 201; top: 0px; left: 6px; width: 188px; height: 5px; background-color: #fff; border-top: solid 1px #004A80; font-size: 1px;"></div> |
<img style="position: absolute; z-index: 202; top: 0px; left: 0px;" alt="" src="Images/TopFormTopLeft.gif" /> |
<img style="position: absolute; z-index: 202; top: 0px; left: 194px;" alt="" src="Images/TopFormTopRight.gif" /> |
</div> |
<div style="border-left: solid 1px #10609A; border-right: solid 1px #3678A8; text-align: center; background-color: #fff; font-weight: bold;"> |
Saving ....<br /> |
<br /> |
<img alt="" src="Images/LoadingGraphic.gif" /> |
</div> |
<div id="mainBottom" style="position: relative; width: 200px; height: 6px; font-size: 1px;"> |
<div style="position: absolute; z-index: 201; top: 0px; left: 6px; width: 188px; height: 5px; background-color: #fff; border-bottom: solid 1px #4b86b2; font-size: 1px;"></div> |
<img style="position: absolute; z-index: 202; top: 0px; left: 0px;" alt="" src="Images/MiddleFormBottomLeft.gif" /> |
<img style="position: absolute; z-index: 202; top: 0px; left: 194px;" alt="" src="Images/MiddleFormBottomRight.gif" /> |
</div> |
</div> |
</telerik:RadAjaxLoadingPanel> |
<telerik:RadWindow ID="rwPrint" runat="server" Modal="true" Width="700px" Height="750px" Skin="Vista" VisibleStatusbar="false" InitialBehaviors="Close" IconUrl="Images/Icons/printer.png" ReloadOnShow="True" NavigateUrl="PrintForms/Quote.aspx"> |
</telerik:RadWindow> |
<div id="pnlLineItems" runat="server" style="margin-top: 24px;"> |
<div class="EditorInputLabel">Line Items:</div> |
<telerik:RadGrid ID="rgLineItems" Skin="Office2007" runat="server" |
OnNeedDataSource="rgLineItems_NeedDataSource" |
OnItemCommand="rgLineItems_ItemCommand" OnItemCreated="rgLineItems_ItemCreated" OnItemDataBound="rgLineItems_ItemDataBound" ShowFooter="true"> |
<ClientSettings> |
<ClientEvents OnPopUpShowing="rgLineItems_OnPopUpShowing" /> |
</ClientSettings> |
<MasterTableView DataKeyNames="LineItemId,TypeId" CommandItemDisplay="Bottom" AutoGenerateColumns="false" EditMode="PopUp" Width="100%"> |
<EditFormSettings> |
<FormTableButtonRowStyle Font-Size="10pt" Font-Bold="true" /> |
<PopUpSettings Modal="true" Width="300px" Height="300px" /> |
</EditFormSettings> |
<Columns> |
<telerik:GridButtonColumn ConfirmText="Are you sure you want to delete this record?" ConfirmDialogType="RadWindow" ConfirmTitle="Delete" ButtonType="ImageButton" |
CommandName="Delete" Text="Delete" UniqueName="Delete" ImageUrl="Images/Icons/cross.png" FooterStyle-BorderStyle="None"> |
<ItemStyle Width="16px" HorizontalAlign="Center" CssClass="DeleteButton" /> |
<HeaderStyle Width="16px" /> |
</telerik:GridButtonColumn> |
<telerik:GridEditCommandColumn UniqueName="Edit" EditImageUrl="Images/Icons/page_edit.png" ButtonType="ImageButton" FooterStyle-BorderStyle="None"> |
<ItemStyle Width="16px" HorizontalAlign="Center" /> |
<HeaderStyle Width="16px" /> |
</telerik:GridEditCommandColumn> |
<telerik:GridNumericColumn HeaderText="Qty" UniqueName="Quantity" DataField="Quantity" NumericType="Number" FooterStyle-BorderStyle="None"></telerik:GridNumericColumn> |
<telerik:GridTemplateColumn HeaderText="Type" UniqueName="Type" FooterStyle-BorderStyle="None"> |
<EditItemTemplate> |
<telerik:RadComboBox ID="type" DataTextField="DisplayName" DataValueField="TypeId" Skin="Telerik" runat="server" MarkFirstMatch="true"></telerik:RadComboBox> |
</EditItemTemplate> |
<ItemTemplate> |
<asp:Label ID="type" runat="server"><%# Eval("Type") %></asp:Label> |
</ItemTemplate> |
</telerik:GridTemplateColumn> |
<telerik:GridBoundColumn HeaderText="Item #" UniqueName="ItemNumber" DataField="ItemNumber" FooterStyle-BorderStyle="None" HeaderStyle-Wrap="false"></telerik:GridBoundColumn> |
<telerik:GridBoundColumn HeaderText="Description" UniqueName="Description" DataField="Description" FooterStyle-BorderStyle="None"></telerik:GridBoundColumn> |
<telerik:GridNumericColumn HeaderText="Cost" UniqueName="Cost" DataField="Cost" NumericType="Currency" FooterStyle-BorderStyle="None"></telerik:GridNumericColumn> |
<telerik:GridNumericColumn HeaderText="MarkUp" UniqueName="MarkUp" DataField="MarkUp" NumericType="Number" FooterStyle-BorderStyle="None"></telerik:GridNumericColumn> |
<telerik:GridNumericColumn HeaderText="Price" UniqueName="Price" DataField="Price" NumericType="Currency" FooterStyle-BorderStyle="None"></telerik:GridNumericColumn> |
<telerik:GridNumericColumn HeaderText="Tax" UniqueName="Tax" DataField="Tax" NumericType="Currency" Aggregate="Sum" FooterAggregateFormatString="{0:c}"></telerik:GridNumericColumn> |
<telerik:GridNumericColumn HeaderText="Item Total" UniqueName="ItemTotal" DataField="ItemTotal" NumericType="Currency" HeaderStyle-Wrap="false" Aggregate="Sum" FooterAggregateFormatString="{0:c}" FooterStyle-Font-Bold="true"></telerik:GridNumericColumn> |
</Columns> |
<CommandItemSettings AddNewRecordImageUrl="Images/Icons/add.png" RefreshImageUrl="Images/Icons/arrow_refresh.png" /> |
<CommandItemStyle CssClass="VistaCommandItemStyle" /> |
</MasterTableView> |
</telerik:RadGrid> |
</div> |
I really appreciate any help you could give me on this. This is not the most horrible thing in the entire world because it is fixed by just clicking the button again but it is definitely confusing for a sales person who is not computer-savvy and has to print a quote and then edit what he was working on.