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

RadWindow that displays Report on same page as RadGrid breaks RadGrid

3 Answers 111 Views

Grid

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

Nate Pinchot asked on 03 Feb 2009, 07:57 PM

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:

    
            <%@ 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.

3 Answers, 1 is accepted

answered on 06 Feb 2009, 03:30 PM

Hello Nate,

Unfortunately from the details you provided so far I am not able to determine the exact reason for the abnormality you depicted. To progress in our investigation, is it possible for you to modify the project linked at the bottom of this online demo of our products:

http://demos.telerik.com/aspnet-ajax/controls/examples/integration/gridandwindow/defaultcs.aspx?product=grid

to include Telerik Reporting in it and bind the grid using LinqToSQL and then send it attached to a formal support ticket? Thus we will be able to research the matter further and provide up-to-the-point answer/solution.

You may also outline the differences in both cases as they can shed some additional light and speed up the resolution.

Best regards,
Sebastian
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

RadWindow that displays Report on same page as RadGrid breaks RadGrid

3 Answers, 1 is accepted