I have a nestedviewtemplate radgrid inside another RadGrid. I am having a problem with the nested RadGrid not expanding on the first click. What I mean is, I expand an item in the parent grid, then when I try to expand an item in the nested grid within the parent item, I have to click expand twice. In some versions of IE, the nested grid disappears altogether after clicking expand on the nested grid just once. In IE10 and the latest version of Firefox, it stays, but just doesn't expand until the second click.
Has anyone else experienced this and found a solution?
Thank you in advance. Below is my markup.
Has anyone else experienced this and found a solution?
Thank you in advance. Below is my markup.
<telerik:RadAjaxPanel runat="server" ID="UnapprovedPOsGridAjaxPanel"> <telerik:RadGrid runat="server" ID="UnapprovedPOsGrid" AutoGenerateColumns="False" Skin="Metro" DataSourceID="UnapprovedPOsDataSource" AllowAutomaticInserts="true" OnItemCommand="UnapprovedPOsGrid_ItemCommand" OnItemDataBound="UnapprovedPOsGrid_ItemDataBound" AllowAutomaticDeletes="true" AllowAutomaticUpdates="true" AllowFilteringByColumn="true" AllowPaging="true" PageSize="10" PagerStyle-Position="Bottom" MasterTableView-PagerStyle-PagerTextFormat=""> <MasterTableView EditMode="EditForms" CommandItemDisplay="Top" DataKeyNames="PO_ID" ExpandCollapseColumn-ButtonType="LinkButton" ShowHeadersWhenNoRecords="true" GroupsDefaultExpanded="false" GroupLoadMode="server" ShowGroupFooter="true" DataSourceID="UnapprovedPOsDataSource"> <Columns> <telerik:GridEditCommandColumn ButtonType="LinkButton" EditText="View" UniqueName="ViewCommandColumn"></telerik:GridEditCommandColumn> <telerik:GridBoundColumn HeaderText="PO #" DataField="PO_ID" /> <telerik:GridBoundColumn HeaderText="Division Director Approval" DataField="PO_DivisionDirectorApprovalDate" DataFormatString="{0:MM/dd/yyyy}"></telerik:GridBoundColumn> <telerik:GridBoundColumn HeaderText="Comptroller Approval" DataField="PO_ComptrollerApprovalDate" DataFormatString="{0:MM/dd/yyyy}"></telerik:GridBoundColumn> <telerik:GridBoundColumn HeaderText="Operations Approval" DataField="PO_DirectorOfOperationsApprovalDate" DataFormatString="{0:MM/dd/yyyy}"></telerik:GridBoundColumn> <telerik:GridBoundColumn HeaderText="Accounts Payable Approval" DataField="PO_AccountsPayableApprovalDate" DataFormatString="{0:MM/dd/yyyy}"></telerik:GridBoundColumn> <telerik:GridBoundColumn HeaderText="President Approval" DataField="PO_PresidentApprovalDate" DataFormatString="{0:MM/dd/yyyy}"></telerik:GridBoundColumn> <telerik:GridBoundColumn HeaderText="Employee" DataField="PO_EmployeeName" /> </Columns> <EditFormSettings ColumnNumber="3" EditFormType="Template"> <FormTemplate> <table> <tr> <td> <div> <strong>Date PO Submitted</strong> </div> <div> <asp:Label runat="server" ID="DatePOSubmittedLabel" Text='<%# Eval("PO_TodaysDate", "{0:d}") %>'></asp:Label> </div> </td> </tr> <tr> <td> <div> <strong>Employee Name</strong> </div> <div> <asp:Label runat="server" ID="EmployeeLabel" Text='<%# Eval("PO_EmployeeName") %>'> </asp:Label> </div> </td> </tr> <tr> <td> <div> <strong>Vendor Payee Name</strong> </div> <div> <asp:Label runat="server" ID="VendorNameLabel" Text='<%# Eval("PO_VendorName") %>'> </asp:Label> </div> </td> <td> <div> <strong>Vendor Payee Phone</strong> </div> <div> <asp:Label runat="server" ID="VendorPhoneLabel" Text='<%# Eval("PO_VendorPhone") %>'> </asp:Label> </div> </td> </tr> <tr> <td> <div> <strong>Vendor Address</strong> </div> <div> <asp:Label runat="server" ID="VendorAddressLabel" Text='<%# Eval("PO_VendorAddress") %>'> </asp:Label> </div> </td> <td> <div> <strong>Vendor City</strong> </div> <div> <asp:Label runat="server" ID="VendorCityLabel" Text='<%# Eval("PO_VendorCity") %>'> </asp:Label> </div> </td> <td> <div> <strong>Vendor State</strong> </div> <div> <asp:Label runat="server" ID="VendorStateLabel" Text='<%# Eval("PO_VendorState") %>'></asp:Label> </div> </td> <td> <div> <strong>Vendor Zip</strong> </div> <div> <asp:Label runat="server" ID="VendorZipLabel" Text='<%# Eval("PO_VendorZip") %>'></asp:Label> </div> </td> </tr> <tr> <td> <div> <strong>Division Director</strong> </div> <div> <asp:Label runat="server" ID="DivisionDirectorApprovalLabel" Text='<%# Eval("PO_DivisionDirectorApproval") %>'> </asp:Label> </div> </td> <td> <div> <strong>Division Director Approval Date</strong> </div> <div> <asp:Label runat="server" ID="DivisionDirectorApprovalLabelDate" Text='<%# Bind("PO_DivisionDirectorApprovalDate", "{0:d}") %>'> </asp:Label> </div> </td> </tr> <tr> <td> <div> <strong>Approved By Division Director</strong><br /> <br /> </div> </td> <td> <div> <asp:CheckBox runat="server" ID="DivisionDirectorApprovalCheckBox" Checked='<%# Eval("PO_DivisionDirectorApproved") %>' TextAlign="Left" Enabled="false" /><br /> <br /> </div> </td> </tr> <tr> <td> <div> <strong>Estimated Delivery Date</strong> </div> <div> <asp:Label runat="server" ID="EstimatedDeliveryDateLabel" Text='<%# Eval("PO_EstimatedDeliveryDate") %>'></asp:Label> </div> </td> <td> <div> <strong>Company Name Ordered In</strong> </div> <div> <asp:Label runat="server" ID="CompanyNameOrderedInLabel" Text='<%# Eval("PO_CompanyNameOrderedIn") %>' Enabled="false"> </asp:Label> </div> </td> </tr> <tr> <td> <div> <strong>Payment Method</strong> </div> <div> <asp:Label runat="server" ID="PaymentMethodLabel" EmptyMessage="Select..." Text='<%# Eval("PO_PaymentMethod") %>'> </asp:Label> </div> </td> <td> <div> <strong>Division</strong> </div> <div> <asp:Label runat="server" ID="DivisionLabel" Enabled="false" Text='<%# Eval("PO_Division") %>'> </asp:Label> </div> </td> <td> <div> <strong>Card Used</strong> </div> <div> <asp:Label ID="CreditCardName" runat="server" Text='<%# Eval("PO_CreditCardName") %>'> </asp:Label> </div> </td> </tr> <tr> <td> <div> <strong>To Be Ordered By</strong> </div> <div> <asp:Label runat="server" ID="ToBeOrderedByComboBox" Text='<%# Eval("PO_ToBeOrderedBy") %>'> </asp:Label> </div> </td> <td> <div> <strong>Date Ordered</strong> </div> <div> <asp:Label runat="server" ID="DateOrderedDatePicker" Text='<%# Eval("PO_DateOrdered") %>'> </asp:Label> </div> </td> </tr> </table> <telerik:RadGrid runat="server" ID="UnapprovedPOsItemsGrid" DataSourceID="UnapprovedPOsItemsDataSource" Skin="Metro" OnItemDataBound="UnapprovedPOsItemsGrid_ItemDataBound" AutoGenerateColumns="false"> <MasterTableView CommandItemDisplay="Top" DataKeyNames="PO_ID" ShowHeadersWhenNoRecords="true" GroupsDefaultExpanded="false" GroupLoadMode="server" ShowGroupFooter="true" DataSourceID="UnapprovedPOsItemsDataSource"> <CommandItemTemplate> <asp:Label ID="ItemsBeingPurchasedLabel" runat="server" Width="170px" Text="Items Being Purchased" Style="font-weight: bold; padding: 5px 0 5px 5px"></asp:Label> </CommandItemTemplate> <Columns> <telerik:GridBoundColumn DataField="PO_ID" Visible="false"> </telerik:GridBoundColumn> <telerik:GridBoundColumn HeaderText="Description of Item" DataField="POI_DescriptionOfItem" /> <telerik:GridBoundColumn HeaderText="Reason For Purchase" DataField="POI_ReasonForPurchase" /> <telerik:GridBoundColumn HeaderText="Quantity" DataField="POI_Quantity" FooterAggregateFormatString="<b>Total Quantity: </b>{0}" /> <telerik:GridBoundColumn HeaderText="Unit Price" DataField="POI_UnitPrice" FooterAggregateFormatString="<b>Total Price: </b>{0}" /> <telerik:GridBoundColumn HeaderText="Amount" DataField="POI_Amount" FooterAggregateFormatString="<b>Total Amount: </b>{0}" /> <%--<telerik:GridBoundColumn HeaderText="Price Quoted" DataField="POI_PriceQuoted" FilterControlWidth="80px" /> <telerik:GridBoundColumn HeaderText="Price Estimated" DataField="POI_PriceEstimated" />--%> <telerik:GridBoundColumn HeaderText="Additional Costs" DataField="POI_AdditionalCosts" FilterControlWidth="80px" /> <telerik:GridBoundColumn HeaderText="Explanation of Additional Costs" Display="false" DataField="POI_AdditionalCostsExplanation" /> </Columns> <NestedViewSettings DataSourceID="UnapprovedPOsItemsDataSource"> <ParentTableRelation> <telerik:GridRelationFields DetailKeyField="POI_Item_ID" MasterKeyField="POI_Item_ID" /> </ParentTableRelation> </NestedViewSettings> <NestedViewTemplate> <div style="padding-left: 30px; padding-top: 20px; padding-bottom: 20px;"> <table> <tr> <td>Description of Item </td> <td> <asp:Label runat="server" ID="ItemDescriptionTextBox" Text='<%# Eval("POI_DescriptionOfItem") %>'></asp:Label> </td> </tr> <tr> <td>Reason For Purchase </td> <td> <asp:Label runat="server" ID="ReasonForPurchaseTextBox" Text='<%# Eval("POI_ReasonForPurchase") %>'> </asp:Label> </td> </tr> <tr> <td>Quantity </td> <td> <asp:Label runat="server" ID="QuantityNumericTextBox" Text='<%# Eval("POI_Quantity") %>'> </asp:Label> </td> </tr> <tr> <td>Unit Price </td> <td> <asp:Label runat="server" ID="UnitPriceNumericTextBox" Text='<%# Eval("POI_UnitPrice") %>'> </asp:Label> </td> </tr> <tr> <td>Amount (Q x Price) </td> <td> <asp:Label runat="server" ID="AmountNumericTextBox" Text='<%# Eval("POI_Amount") %>'> </asp:Label> </td> </tr> <%--<tr> <td>Price Quoted </td> <td> <asp:Label runat="server" ID="PriceQuotedNumericTextBox" Text='<%# Eval("POI_PriceQuoted") %>'> </asp:Label> </td> </tr> <tr> <td>Price Estimated </td> <td> <asp:Label runat="server" ID="PriceEstimatedNumericTextBox" Text='<%# Eval("POI_PriceEstimated") %>'> </asp:Label> </td> </tr>--%> <tr> <td>Additional Costs </td> <td> <asp:Label runat="server" ID="AdditionalCostsNumericTextBox" Text='<%# Eval("POI_AdditionalCosts") %>'> </asp:Label> </td> </tr> <tr> <td>Explanation of Additional Costs </td> <td> <asp:Label runat="server" ID="ExplanationAdditionalCostsTextBox" Text='<%# Eval("POI_AdditionalCostsExplanation") %>'> </asp:Label> </td> </tr> </table> <br /> </div> </NestedViewTemplate> </MasterTableView> </telerik:RadGrid> <table> <tr> <td> <div> <strong>Plus Sales Tax</strong> </div> <div> <asp:Label runat="server" ID="PlusSalesTaxLabel" Text='<%# Eval("PO_PlusSalesTax") %>'> </asp:Label> </div> </td> </tr> <tr> <td> <div> <strong>Total Cost</strong> </div> <div> <asp:Label runat="server" ID="TotalCostLabel" Text='<%# Eval("PO_TotalCost") %>'> </asp:Label> </div> </td> </tr> <tr> <td> <div> <strong>Supporting Documents</strong> </div> <asp:Panel runat="server" ID="supportingDocsPanel"> </asp:Panel> </td> </tr> </table> <asp:Panel runat="server" ID="AdministrativeSectionPanel" Enabled="true"> <h3>Administrative Use Only</h3> <table> <tr> <td> <div> <strong>Accounts Payable</strong> </div> <div> <asp:Label runat="server" ID="AccountsPayableApprovalLabel" Text='<%# Eval("PO_AccountsPayableApproval") %>'> </asp:Label> </div> </td> <td> <div> <strong>Accounts Payable Approval Date</strong> </div> <div> <asp:Label runat="server" ID="AccountsPayableApprovalLabelDate" Text='<%# Eval("PO_AccountsPayableApprovalDate", "{0:d}") %>'> </asp:Label> </div> </td> </tr> <tr> <td> <div> <strong>Approved by Accounts Payable</strong><br /> <br /> </div> </td> <td> <asp:CheckBox runat="server" ID="AccountsPayableApprovalCheckBox" TextAlign="Left" Checked='<%# Eval("PO_AccountsPayableApproved") %>' /><br /> <br /> </td> </tr> </table> <table> <tr> <td> <div> <strong>Comptroller</strong> </div> <div> <asp:Label runat="server" ID="ComptrollerApprovalLabel" Text='<%# Eval("PO_ComptrollerApproval") %>'> </asp:Label> </div> </td> <td> <div> <strong>Comptroller Approval Date</strong> </div> <div> <asp:Label runat="server" ID="ComptrollerApprovalLabelDate" Text='<%# Eval("PO_ComptrollerApprovalDate", "{0:d}") %>'> </asp:Label> </div> </td> </tr> <tr> <td> <div> <strong>Approved by Comptroller</strong><br /> <br /> </div> </td> <td> <asp:CheckBox runat="server" ID="ComptrollerApprovalCheckBox" TextAlign="Left" Enabled="false" Checked='<%# Eval("PO_ComptrollerApproved") %>' /> <br /> <br /> </td> </tr> <tr> <td> <div> <strong>GL Number</strong> </div> <div> <asp:Label runat="server" ID="FirstGLNumberLabel" Text='<%# Eval("PO_FirstGLNumber") %>'> </asp:Label> </div> </td> <td> <div> <strong>GL Name</strong> </div> <div> <asp:Label runat="server" ID="FirstGLNameLabel" Text='<%# Eval("PO_FirstGLName") %>'> </asp:Label> </div> </td> <td> <div> <strong>Amount</strong> </div> <div> <asp:Label runat="server" ID="FirstGLAmountLabel" Text='<%# Eval("PO_FirstGLAmount") %>'> </asp:Label> </div> </td> </tr> <tr> <td> <div> <strong>GL Number</strong> </div> <div> <asp:Label runat="server" ID="SecondGLNumberLabel" Text='<%# Eval("PO_SecondGLNumber") %>'> </asp:Label> </div> </td> <td> <div> <strong>GL Name</strong> </div> <div> <asp:Label runat="server" ID="SecondGLNameLabel" Text='<%# Eval("PO_SecondGLName") %>'> </asp:Label> </div> </td> <td> <div> <strong>Amount</strong> </div> <div> <asp:Label runat="server" ID="SecondGLAmountLabel" Text='<%# Eval("PO_SecondGLAmount") %>'> </asp:Label> </div> </td> </tr> <tr> <td> <div> <strong>GL Number</strong> </div> <div> <asp:Label runat="server" ID="ThirdGLNumberLabel" Text='<%# Eval("PO_ThirdGLNumber")%>'> </asp:Label> </div> </td> <td> <div> <strong>GL Name</strong> </div> <div> <asp:Label runat="server" ID="ThirdGLNameLabel" Text='<%# Eval("PO_ThirdGLName")%>'> </asp:Label> </div> </td> <td> <div> <strong>Amount</strong> </div> <div> <asp:Label runat="server" ID="ThirdGLAmountLabel" Text='<%# Eval("PO_ThirdGLAmount")%>'> </asp:Label> </div> </td> </tr> </table> <br /> <h3>If Paying By Check</h3> <table> <tr> <td> <div> <strong>Due Date</strong> </div> <div> <asp:Label runat="server" ID="DueDateLabel" Text='<%# Eval("PO_CheckDueDate") %>'> </asp:Label> </div> </td> </tr> <tr> <td> <div> <strong>Check Payable To</strong> </div> <div> <asp:Label runat="server" ID="CheckPayableToLabel" Text='<%# Eval("PO_CheckPayableTo") %>'> </asp:Label> </div> </td> </tr> <tr> <td> <div> <strong>Check Number</strong> <div> <asp:Label runat="server" ID="CheckNumberTextBox" Text='<%# Eval("PO_CheckNumber") %>'> </asp:Label> </div> </div> </td> </tr> <tr> <td> <div> <strong>Street Address</strong> </div> <div> <asp:Label runat="server" ID="StreetAddressLabel" Text='<%# Eval("PO_StreetAddress") %>'> </asp:Label> </div> </td> </tr> <tr> <td> <div> <strong>City</strong> </div> <div> <asp:Label runat="server" ID="CityLabel" Text='<%# Eval("PO_City") %>'> </asp:Label> </div> </td> <td> <div> <strong>State</strong> </div> <div> <asp:Label runat="server" ID="StateLabel" Text='<%# Eval("PO_State") %>'> </asp:Label> </div> </td> <td> <div> <strong>Zip</strong> </div> <div> <asp:Label runat="server" ID="ZipLabel" Text='<%# Eval("PO_Zip") %>'> </asp:Label> </div> </td> </tr> <tr> <td> <div> <h4>Who will mail this check?</h4> </div> </td> <td> <asp:Label ID="WhoWillMailCheckLabel" runat="server" Text='<%# Eval("PO_DepartmentMailingCheck") %>'> </asp:Label> </td> </tr> <tr> <td> <div> <strong>Date Paid</strong> </div> <div> <asp:Label runat="server" ID="DatePaidByCheckLabel" Text='<%# Eval("PO_DatePaidByCheck") %>'> </asp:Label> </div> </td> </tr> </table> <br /> <br /> <h3>Comments</h3> <asp:Label runat="server" ID="CommentsLabel" Text='<%# Eval("PO_Comments") %>'></asp:Label> <br /> <br /> <table> <tr> <td> <div> <strong>Director of Operations</strong> <div> <asp:Label runat="server" ID="DirectorOfOperationsLabel" Text="Devin Sherman"> </asp:Label> </div> </div> </td> <td> <div> <strong>Approval Date</strong> </div> <div> <telerik:RadDatePicker runat="server" ID="DirectorOfOperationsApprovalDate" DbSelectedDate='<%# Bind("PO_DirectorOfOperationsApprovalDate") %>'> </telerik:RadDatePicker> </div> </td> </tr> <tr> <td> <div> <strong>Approved By Director of Operations</strong><br /> <br /> </div> </td> <td> <div> <asp:CheckBox runat="server" ID="DirectorOfOperationsApprovalCheckBox" Checked='<%# Bind("PO_DirectorOfOperationsApproved") %>' TextAlign="Left" /><br /> <br /> </div> </td> </tr> </table> </asp:Panel> <asp:Button ID="btnUpdate" Text='<%# (Container is GridEditFormInsertItem) ? "Save" : "Update" %>' runat="server" CommandName='<%# (Container is GridEditFormInsertItem) ? "PerformInsert" : "Update" %>' UseSubmitBehavior="true" /> <asp:Button ID="btnCancel" Text="Cancel" runat="server" CausesValidation="False" UseSubmitBehavior="false" CommandName="Cancel" /> </FormTemplate> </EditFormSettings> </MasterTableView> </telerik:RadGrid> <asp:SqlDataSource ID="UnapprovedPOsDataSource" runat="server" ConnectionString="<%$ appSettings:SQLConn %>" ViewStateMode="Enabled" ProviderName="System.Data.SqlClient" InsertCommandType="StoredProcedure" SelectCommandType="StoredProcedure" SelectCommand="DisplayUnapprovedPurchaseOrdersDOO" UpdateCommandType="StoredProcedure" UpdateCommand="UpdatePurchaseOrderDOO" OnUpdating="UnapprovedPOsDataSource_Updating"></asp:SqlDataSource> <asp:SqlDataSource ID="UnapprovedPOsItemsDataSource" runat="server" ConnectionString="<%$ appSettings:SQLConn %>" ViewStateMode="Enabled" ProviderName="System.Data.SqlClient" SelectCommandType="StoredProcedure" SelectCommand="DisplayPurchaseOrderItem"> <SelectParameters> <asp:ControlParameter Name="PO_ID" DbType="Int32" ControlID="PO_IDTextBox" PropertyName="Text" /> </SelectParameters> </asp:SqlDataSource> <asp:TextBox runat="server" ID="PO_IDTextBox" Style="visibility: hidden" /> </telerik:RadAjaxPanel>