[Solved] pup-up div with radgrid add record command

[Kevin]

trying to get more into javascript and not doing postbacks if I do not have to.  What I am tring to figure out is how to show a div that is my information to insert on the radgrid add new record command.  cant do inside of the grid as I have a jquery autocomplete that does not play nice.  So how can I pop up a div in javascript on the click o fthe radgrid insert new record.

Protected Sub myRadGrid_InsertCommand(sender As Object, e As GridCommandEventArgs) Handles myRadGrid.InsertCommand

End Sub

Protected Sub myRadGrid_ItemCommand(sender As Object, e As GridCommandEventArgs) Handles myRadGrid.ItemCommand
    If (e.CommandArgument = "Up") Then
        ScriptManager.RegisterStartupScript(Page, Page.GetType(), Guid.NewGuid().ToString(), " document.getElementById('divOut').style.display='block';", True)
        ScriptManager.RegisterStartupScript(Page, Page.GetType(), Guid.NewGuid().ToString(), " document.getElementById('tblAdmin').style.display='block';", True)
    End If
End Sub

<table class="ConsultGrid">
      <tr>
          <td>
             <telerik:RadGrid ID="myRadGrid" runat="server" Width="100%" Skin="Web20" >
                  <MasterTableView AutoGenerateColumns="false" Font-Size="10" DataKeyNames="intAdminId" CommandItemDisplay="Top">
                      <HeaderStyle ForeColor="White" Font-Bold="true" HorizontalAlign="Center" />
                      <ItemStyle HorizontalAlign="Center"/>
                      <AlternatingItemStyle BackColor="#B0C4DE"  HorizontalAlign="Center" />
                          <Columns>
                              <telerik:GridEditCommandColumn UniqueName="EditCommandColumn"></telerik:GridEditCommandColumn>
                              <telerik:GridBoundColumn DataField="Name" HeaderText="NAME" />
                              <telerik:GridTemplateColumn>
                                  <ItemTemplate>
                                      <asp:LinkButton ID="lnkChange" runat="server" CommandArgument='<%# Bind("intAdminId")%>' CommandName="Up" Text="Add"></asp:LinkButton>
                                  </ItemTemplate>
                              </telerik:GridTemplateColumn>
                              <telerik:GridTemplateColumn HeaderText="ADMIN">
                                  <ItemTemplate>
                                      <asp:CheckBox ID="cbADmin" Checked='<%# IIf(DataBinder.Eval(Container.DataItem, "bitProgramAdmin") Is DBNull.Value, False, Eval("bitProgramAdmin"))%>' runat="server" Enabled="false" />
                                  </ItemTemplate>
                              </telerik:GridTemplateColumn>
                              <telerik:GridTemplateColumn HeaderText="MEPS ADMIN">
                                  <ItemTemplate>
                                      <asp:CheckBox ID="cbMepsAdmin" Checked='<%# IIf(DataBinder.Eval(Container.DataItem, "bitMepsAdmin") Is DBNull.Value, False, Eval("bitMepsAdmin"))%>' runat="server" Enabled="false" />
                                  </ItemTemplate>
                              </telerik:GridTemplateColumn>
                              <telerik:GridTemplateColumn HeaderText="ACTIVE">
                                  <ItemTemplate>
                                      <asp:CheckBox ID="cbActivate" Checked='<%# IIf(DataBinder.Eval(Container.DataItem, "bitActive") Is DBNull.Value, False, Eval("bitActive"))%>' runat="server" Enabled="false" />
                                  </ItemTemplate>
                              </telerik:GridTemplateColumn>
                           </Columns>
                              <EditFormSettings EditFormType="Template">
                                  <FormTemplate>

                                  </FormTemplate>
                              </EditFormSettings>
                  </MasterTableView>
             </telerik:RadGrid>
          </td>
      </tr>
  </table>
  <div class="happy" runat="server" id="divOut" style="display:none">
  </div>
   <table class="windows" runat="server" id="tblAdmin" style="display:none">
          <tr>
              <td style="text-align:right">Enter Admin: </td>
              <td>
                  <asp:TextBox ID="txtname" runat="server" Width="260px"></asp:TextBox><asp:HiddenField ID="HFId" runat="server" />
              </td>
          </tr>
          <tr>
              <td style="height:5px"></td>
          </tr>
          <tr>
              <td style="text-align:right">Program Admin: </td>
              <td> <asp:CheckBox ID="cbAdmin" runat="server" /></td>
          </tr>
          <tr>
              <td style="height:5px"></td>
          </tr>
          <tr>
              <td style="text-align:right">MEPS Admin: </td>
              <td> <asp:CheckBox ID="cbMepsAdmin"  runat="server" /></td>
          </tr>
          <tr>
              <td style="height:5px"></td>
          </tr>
          <tr>
              <td style="text-align:right">Active: </td>
              <td><asp:CheckBox ID="cbActive" runat="server" /></td>
          </tr>
          <tr>
              <td></td>
              <td>
                  <asp:LinkButton ID="lnkSubmit" runat="server" Text="Submit"></asp:LinkButton>

                  <asp:LinkButton ID="lnkCancel" runat="server" CausesValidation="false" CommandName="Cancel" Text="Cancel"></asp:LinkButton>
              </td>
          </tr>
          <tr>
              <td style="height:8px"></td>
          </tr>
      </table>

[Antonio Stoilkov]

Hello Kevin,

You could achieve the desired functionality by subscribing to the RadGrid OnCommand client-side event and in the event handler if the commandName is InitInsert cancel the event and show the popup as shown in the example below.

<ClientSettings>
    <ClientEvents OnCommand="Command" />
</ClientSettings>

function Command(sender, args)
{
    if (args.get_commandName() === "InitInsert")
    {
        // show your popup
        args.set_cancel(true);
    }
}

Regards,
Antonio Stoilkov
the Telerik team