[Solved] ModalPopup not working correctly with Radgrid

[Kevin]

This is the third time ina row I have nto been able to get this working and at this point I need to know why.  Bascially all I am trying to do is get the modalpop working so that when someone picks on the edit button on the grid it pops up a panel so that they can edit some information what i get is the modalpop comes up and pushes down my gird instead of bing in middle and the it grays out everything under the grid and.  So basically it doe not center itself on the screen or gray it out appropriately.  I have tried 3 times before to get modalpopups to work with radgrid with same results.

<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" />

          <asp:panel ID="pnlGrid" runat="server" Width="100%">

               <table width="100%">

                   <tr>

                       <td style="width:15%" align="left" valign="top">

                               <asp:Panel ID="pnlAdmins" runat="server" BackColor="#99CCFF" Width="260px" style="z-index:-1;height:auto">

                                   <asp:RoundedCornersExtender ID="pnlAdmins_RoundedCornersExtender" TargetControlID="pnlAdmins" Radius="25" runat="server" Corners="Right"></asp:RoundedCornersExtender>

                                   <table>

                                       <tr>

                                           <td>Pick Categories</td>

                                       </tr>

                                        <tr>

                                           <td style="height:5px"></td>

                                       </tr>

                                       <tr>

                                           <td>

                                               <asp:DropDownList ID="ddlDeployments" runat="server" Width="220" AutoPostBack="true"></asp:DropDownList>

                                           </td>

                                       </tr>

                                   </table>

                               </asp:Panel>

                            </td>

                            <td style="width:85%" align="left" valign="top">

                           <asp:LinkButton id="lnkAddCat" runat="server">Add Category</asp:LinkButton>

                           <telerik:RadGrid ID="myRadGrid" runat="server" Width="100%" BorderWidth="1px" CellPadding="6" GridLines="None" BorderColor="#404040" Skin="Web20">

                           <MasterTableView AutoGenerateColumns="false" DataKeyNames="intCategoryId" HierarchyDefaultExpanded="false" HierarchyLoadMode="ServerBind" 

                               BorderColor="#404040" Font-Size="12" Font-Names="Veranda,arial,sans-serif" HeaderStyle-HorizontalAlign="Center" Name="MasterGrid"

                               GridLines="Both" BorderWidth="1px" ExpandCollapseColumn-ButtonType="ImageButton" ExpandCollapseColumn-CollapseImageUrl="~/Images/30.png" 

                               ExpandCollapseColumn-ExpandImageUrl="~/Images/29.png"><ItemStyle HorizontalAlign="Center" />

                               <AlternatingItemStyle BackColor="#B0C4DE"  HorizontalAlign="Center" />

                               <HeaderStyle ForeColor="White" Font-Bold="true" BorderColor="#404040" BorderWidth="1px" />

                               <DetailTables>

                                   <telerik:GridTableView Name="myManufacGrid" runat="server" DataKeyNames="intManufacturerId" TableLayout="Fixed" BorderWidth="1px" CellPadding="6" Font-Size="10"

                                       AutoGenerateColumns="False" HeaderStyle-HorizontalAlign="Center" BorderColor="#404040" Font-Names="Veranda,arial,sans-serif" GridLines="Both" ExpandCollapseColumn-ButtonType="ImageButton"

                                       ExpandCollapseColumn-CollapseImageUrl="~/Images/30.png" ExpandCollapseColumn-ExpandImageUrl="~/Images/29.png">

                                       <ParentTableRelation>

                                           <telerik:GridRelationFields DetailKeyField="intCategoryId" MasterKeyField="intCategoryId" />

                                       </ParentTableRelation>

                                       <HeaderStyle Font-Bold="true" HorizontalAlign="Center" CssClass="MostInnerHeaderStyle" />

                                       <ItemStyle CssClass="MostInnerItemStyle" HorizontalAlign="Center" />

                                       <AlternatingItemStyle CssClass="MostInnerAlernatingItemStyle" HorizontalAlign="Center" />

                                       <DetailTables>

                                       <telerik:GridTableView DataKeyNames="intMakeID" Name="myMakeGrid" Width="100%" TableLayout="Fixed" BorderWidth="1px" CellPadding="6" Font-Size="10"

                                           AutoGenerateColumns="False" HeaderStyle-HorizontalAlign="Center" BorderColor="#404040" Font-Names="Veranda,arial,sans-serif" GridLines="Both" ExpandCollapseColumn-ButtonType="ImageButton"

                                           ExpandCollapseColumn-CollapseImageUrl="~/Images/30.png" ExpandCollapseColumn-ExpandImageUrl="~/Images/29.png">

                                               <ParentTableRelation>

                                               <telerik:GridRelationFields DetailKeyField="intManufacturerId" MasterKeyField="intManufacturerId" />

                                               </ParentTableRelation>

                                               <HeaderStyle Font-Bold="true" HorizontalAlign="Center" CssClass="InnerSubHeaderStyle" />

                                               <ItemStyle CssClass="InnerSubItemStyle" HorizontalAlign="Center"  />

                                               <AlternatingItemStyle CssClass="InnerSubAlernatingItemStyle" HorizontalAlign="Center" />

                                               <Columns>

                                                    <telerik:GridBoundColumn HeaderText="MAKE|MODEL" DataField="strmake" />

                                                    <telerik:GridTemplateColumn HeaderText="Edit">

                                                       <ItemTemplate>

                                                               <asp:ImageButton runat="server" ID="imgMakeEdit"  CommandArgument='<%# bind("intMakeID") %>' CommandName="MakeEdit" ImageUrl="~/Images/edit_icon.png" />

                                                       </ItemTemplate>

                                                   </telerik:GridTemplateColumn>

                                                   <telerik:GridTemplateColumn HeaderText="Archive">

                                                       <ItemTemplate>

                                                               <asp:ImageButton runat="server" ID="imgMakeArchive"  CommandArgument='<%# bind("intMakeID") %>' CommandName="MakeArchive" ImageUrl="~/Images/edit_icon.png" OnClientClick="return confirm('Are you sure you want to archive Category, This will Archive everything Underneath as well.');" />

                                                       </ItemTemplate>

                                                   </telerik:GridTemplateColumn>

                                               </Columns>

                                       </telerik:GridTableView>

                                   </DetailTables>

                                       <Columns>

                                           <telerik:GridBoundColumn HeaderText="MANUFACTURERS" DataField="strManufacturer"></telerik:GridBoundColumn>

                                           <telerik:GridTemplateColumn HeaderText="ADD MAKE\MODEL">

                                               <ItemTemplate>

                                                       <asp:ImageButton runat="server" ID="imgAddPosition"  CommandArgument='<%# bind("intManufacturerId") %>' CommandName="AddMake" ImageUrl="~/Images/29.png" />

                                               </ItemTemplate>

                                           </telerik:GridTemplateColumn>

                                           <telerik:GridTemplateColumn HeaderText="Edit">

                                               <ItemTemplate>

                                                       <asp:ImageButton runat="server" ID="imgManEdit"  CommandArgument='<%# bind("intManufacturerId") %>' CommandName="ManEdit" ImageUrl="~/Images/edit_icon.png" />

                                               </ItemTemplate>

                                           </telerik:GridTemplateColumn>

                                           <telerik:GridTemplateColumn HeaderText="Archive">

                                               <ItemTemplate>

                                                       <asp:ImageButton runat="server" ID="imgManArchive"  CommandArgument='<%# bind("intManufacturerId") %>' CommandName="ManArchive" ImageUrl="~/Images/edit_icon.png" OnClientClick="return confirm('Are you sure you want to archive Category, This will Archive everything Underneath as well.');" />

                                               </ItemTemplate>

                                           </telerik:GridTemplateColumn>

                                       </Columns>

                                   </telerik:GridTableView>

                               </DetailTables>

                               <Columns>

                               <telerik:GridBoundColumn HeaderText="Category" DataField="strCategory" />

                               <telerik:GridTemplateColumn HeaderText="Add Manufacturer">

                                   <ItemTemplate>

                                           <asp:ImageButton runat="server" ID="imgAdd"  CommandArgument='<%# bind("intCategoryId") %>' CommandName="AddMan" ImageUrl="~/Images/29.png" />

                                   </ItemTemplate>

                               </telerik:GridTemplateColumn>

                               <telerik:GridTemplateColumn HeaderText="Edit">

                                   <ItemTemplate>

                                           <asp:ImageButton runat="server" ID="imgCatEdit"  CommandArgument='<%# bind("intCategoryId") %>' CommandName="CatEdit" ImageUrl="~/Images/edit_icon.png" />

                                   </ItemTemplate>

                               </telerik:GridTemplateColumn>

                               <telerik:GridTemplateColumn HeaderText="Archive">

                                   <ItemTemplate>

                                           <asp:ImageButton runat="server" ID="imgCatArchive"  CommandArgument='<%# bind("intCategoryId") %>' CommandName="CatArchive" ImageUrl="~/Images/edit_icon.png" OnClientClick="return confirm('Are you sure you want to archive Category, This will Archive everything Underneath as well.');" />

                                   </ItemTemplate>

                               </telerik:GridTemplateColumn>

                           </Columns>

                           </MasterTableView>

                           </telerik:RadGrid>

                       </td>

                   </tr>

               </table>

           </asp:panel>

           <asp:Panel ID="pnlEdit" runat="server" style="display:none">

              <div>

                  <asp:button ID="btnEdit" runat="server" style="display:none" />

                   HELLO

              </div>

           </asp:Panel>

           <asp:ModalPopupExtender ID="pnlEdit_MPE" runat="server" PopupControlID="pnlEdit" TargetControlID="btnEdit"></asp:ModalPopupExtender>

          </form>

If (e.CommandName = "CatEdit") Then
           Dim CatID As Integer = Convert.ToInt32(e.CommandArgument)
           pnlEdit_MPE.Show()
       End If

[Andrey]

Hello,

I am not sure that I understand your requirement correctly, however, you could give this online demo application a try and check whether this is the desired behavior.

Additionally, when you set some popup to be modal it applies disabled style to all the other controls on the page and this is the reason for the grayed out controls.


Regards,
Andrey
the Telerik team

[Kevin]

hi,
thanks for the reference, i am just starting to really get intot he nitty gritty of these radgrids and finding that with some asp.net controls they don't work so great, but radgrid always seems to have a way to do it to.  It's just matter of eventually switching over fully to telerik controls.