How to press ESC key to close popup EditForm of RadGrid?

3 posts, 0 answers
  1. Long
    Long avatar
    13 posts
    Member since:
    Jul 2010

    Posted 15 Mar 2011 Link to this post

    I use RadGrid control with using popup editform.
    Now I want after show popup, if press ESC key, call cancel events and close popup.
    Please help me, thanks you so much!
    Best regards,
    Long Vo
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 15 Mar 2011 Link to this post

    Hello Long,

    Try the following code snippet in OnKeyPress ClientEvent of RadGrid.

    ASPX:
    <ClientSettings>
          <ClientEvents OnKeyPress="OnKeyPress" />
    </ClientSettings>

    Java Script:
    <script type="text/javascript">
          function OnKeyPress(sender, args) {
             var masterTable = sender.get_masterTableView();
            var editIndex = $find("RadGrid1")._editIndexes[0];
            if (args._domEvent.charCode == 27 && editIndex > -1) {
                masterTable.fireCommand("CancelAll", "");
               }
         }
    </script>

    Thanks,
    Princy.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Long
    Long avatar
    13 posts
    Member since:
    Jul 2010

    Posted 15 Mar 2011 Link to this post

    Thanks you for your reply, I try that code but it's not work.
    Please see my code:

    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
            <script type="text/javascript">
                function OnKeyPress(sender, args) {
                    var masterTable = sender.get_masterTableView();
                    var editIndex = $find("RadGrid_FAQ")._editIndexes[0];
                    if (args._domEvent.charCode == 27 && editIndex > -1) {
                        masterTable.fireCommand("CancelAll", "");
                    }
                }
            </script>
        </telerik:RadCodeBlock>
        <telerik:RadGrid ID="RadGrid_FAQ" runat="server" Skin="Sunset"
            DataSourceID="SqlDataSource1" ShowHeader="false" AllowAutomaticUpdates="True" AllowAutomaticDeletes="True"
                AllowAutomaticInserts="True" GridLines="None" BorderStyle="None"
                onitemdatabound="RadGrid_FAQ_ItemDataBound"
                ondeletecommand="RadGrid_FAQ_DeleteCommand"
                oninsertcommand="RadGrid_FAQ_InsertCommand"
                onupdatecommand="RadGrid_FAQ_UpdateCommand" >
            <MasterTableView AutoGenerateColumns="False" DataKeyNames="FAQId" AllowSorting="true" BorderStyle="None" CommandItemSettings-ShowRefreshButton="false"
                DataSourceID="SqlDataSource1" EditMode="PopUp">
                <Columns>               
                    <telerik:GridTemplateColumn DataField="Question" SortExpression="Question" UniqueName="Question">
                        <ItemStyle BorderStyle="None" />
                        <ItemTemplate>
                            <table width="100%" style="border: none">
                                <tr style="border: none">
                                    <td style="border: none">
                                        <a style="color: Maroon; cursor:pointer; font-weight: bold" onclick="DisplayFAQ('displayAnswer<%# Eval("FAQId") %>');">
                                            <%# Container.ItemIndex + 1 %>.
                                            <asp:Label ID="lblQuestion" runat="server" Text='<%# Eval( "Question") %>'></asp:Label>
                                            <asp:Label ID="lblDate" runat="server" Text='<%# Eval( "CreatedDate") %>' Visible="false"></asp:Label>
                                            <asp:Label ID="lblUserId" runat="server" Text='<%# Eval( "UserId") %>' Visible="false"></asp:Label>
                                        </a>
                                            
                                        <asp:ImageButton ID="btnEdit" CssClass="MyImageButton" ImageUrl="~/images/edit.gif" runat="server" CommandName="Edit" ToolTip='<%# GetString("EditButton") %>' Visible='<%# (lblRightStatus.Text == "e" || lblRightStatus.Text == "d") ? (chkIsProtect.Checked ? ( (Eval("UserId").ToString() != "" && Eval("UserId").ToString() != UserId.ToString()) ? false : true ) : true ) : false %>'  />
                                          
                                        <asp:ImageButton ID="btnDelete" CssClass="MyImageButton" ImageUrl="~/images/delete.gif" runat="server" CommandName="Delete" OnClientClick="return ConfirmDelete();" ToolTip='<%# GetString("DeleteButton") %>' Visible='<%# (lblRightStatus.Text == "d") ? (chkIsProtect.Checked ? ( (Eval("UserId").ToString() != "" && Eval("UserId").ToString() != UserId.ToString()) ? false : true ) : true ) : false %>' />
                                    </td>
                                </tr>
                                <tr style="border: none">
                                    <td style="border: none">
                                        <div id='displayAnswer<%# Eval("FAQId") %>' style='display: <%# (lblKey.Text != "" && (Eval("Question").ToString().ToUpper().Contains(lblKey.Text.ToUpper()) || Eval("Answer").ToString().ToUpper().Contains(lblKey.Text.ToUpper()))) ? "" : "none" %>'>
                                            <asp:Label ID="lblAnswer" runat="server" Text='<%# Eval( "Answer") %>'></asp:Label>
                                        </div>
                                    </td>
                                </tr>
                            </table>
                        </ItemTemplate>
                         
                    </telerik:GridTemplateColumn>
                </Columns>
                <EditFormSettings CaptionDataField="Question" EditFormType="Template" PopUpSettings-Modal="true" PopUpSettings-Height="700" PopUpSettings-Width="800" >
                    <FormTemplate>
                        <table id="Table1" cellspacing="1" cellpadding="1" width="500" border="0">
                            <tr valign="top">
                                <td>  
                                </td>
                                <td>
                                </td>
                                <td>
                                </td>
                            </tr>
                            <tr valign="top">
                                <td>
                                    <%# GetString("lblQuestion") %>
                                    <asp:RequiredFieldValidator id="RequiredFieldValidator1" Display="Dynamic" runat="server"  ValidationGroup="IACFAQ"
                                        ErrorMessage="*" ControlToValidate="txtQuestion" Font-Bold="true">
                                    </asp:RequiredFieldValidator>  
                                </td>
                                <td>
                                    <asp:Label ID="lblQuestion" runat="server" Text='<%# Eval( "Question") %>' Visible="false"></asp:Label>
                                    <asp:Label ID="lblAnswer" runat="server" Text='<%# Eval( "Answer") %>' Visible="false"></asp:Label>
                                    <asp:Label ID="lblDate" runat="server" Text='<%# Eval( "CreatedDate") %>' Visible="false"></asp:Label>
                                    <asp:Label ID="lblUserName" runat="server" Text='<%# Eval( "FullName") %>' Visible="false"></asp:Label>
                                    <telerik:RadEditor ID="txtQuestion" Content='<%# Bind( "Question") %>' runat="server" Width="700" Height="300"  Skin="WebBlue" AutoResizeHeight="false" >
                                            <Tools>
                                                <telerik:EditorToolGroup Tag="MainToolbar">
                                                    <telerik:EditorTool Name="Print" ShortCut="CTRL+P"></telerik:EditorTool>
                                                    <telerik:EditorTool Name="AjaxSpellCheck" />
                                                    <telerik:EditorTool Name="FindAndReplace" ShortCut="CTRL+F" />
                                                    <telerik:EditorTool Name="SelectAll" ShortCut="CTRL+A" />
                                                    <telerik:EditorTool Name="Cut" />
                                                    <telerik:EditorTool Name="Copy" ShortCut="CTRL+C" />
                                                    <telerik:EditorTool Name="Paste" ShortCut="CTRL+V" />
                                                    <telerik:EditorTool Name="PasteStrip" />
                                                    <telerik:EditorSeparator />
                                                    <telerik:EditorTool Name="Undo" ShortCut="CTRL+Z" />
                                                    <telerik:EditorTool Name="Redo" ShortCut="CTRL+Y" />
                                                </telerik:EditorToolGroup>
                                                <telerik:EditorToolGroup Tag="InsertToolbar">
                                                    <telerik:EditorTool Name="ImageManager" ShortCut="CTRL+G" />
                                                    <telerik:EditorTool Name="DocumentManager" />
                                                    <telerik:EditorTool Name="FlashManager" />
                                                    <telerik:EditorTool Name="MediaManager" />
                                                    <telerik:EditorTool Name="TemplateManager" />
                                                    <telerik:EditorSeparator />
                                                    <telerik:EditorTool Name="LinkManager" ShortCut="CTRL+K" />
                                                    <telerik:EditorTool Name="Unlink" ShortCut="CTRL+SHIFT+K" />
                                                </telerik:EditorToolGroup>
                                                <telerik:EditorToolGroup>
                                                    <telerik:EditorTool Name="Superscript" />
                                                    <telerik:EditorTool Name="Subscript" />
                                                    <telerik:EditorTool Name="InsertParagraph" />
                                                    <telerik:EditorTool Name="InsertGroupbox" />
                                                    <telerik:EditorTool Name="InsertHorizontalRule" />
                                                    <telerik:EditorTool Name="InsertDate" />
                                                    <telerik:EditorTool Name="InsertTime" />
                                                    <telerik:EditorSeparator />
                                                    <telerik:EditorTool Name="FormatCodeBlock" />
                                                </telerik:EditorToolGroup>
                                                <telerik:EditorToolGroup>
                                                    <telerik:EditorTool Name="FormatBlock" />
                                                    <telerik:EditorTool Name="FontName" ShortCut="CTRL+SHIFT+F" />
                                                    <telerik:EditorTool Name="RealFontSize" ShortCut="CTRL+SHIFT+P" />
                                                </telerik:EditorToolGroup>
                                                <telerik:EditorToolGroup>
                                                    <telerik:EditorTool Name="AbsolutePosition" />
                                                    <telerik:EditorSeparator />
                                                    <telerik:EditorTool Name="Bold" ShortCut="CTRL+B" />
                                                    <telerik:EditorTool Name="Italic" ShortCut="CTRL+I" />
                                                    <telerik:EditorTool Name="Underline" ShortCut="CTRL+U" />
                                                    <telerik:EditorTool Name="StrikeThrough" />
                                                    <telerik:EditorSeparator />
                                                    <telerik:EditorTool Name="JustifyLeft" />
                                                    <telerik:EditorTool Name="JustifyCenter" />
                                                    <telerik:EditorTool Name="JustifyRight" />
                                                    <telerik:EditorTool Name="JustifyFull" />
                                                    <telerik:EditorTool Name="JustifyNone" />
                                                    <telerik:EditorSeparator />
                                                    <telerik:EditorTool Name="Indent" />
                                                    <telerik:EditorTool Name="Outdent" />
                                                    <telerik:EditorSeparator />
                                                    <telerik:EditorTool Name="InsertOrderedList" />
                                                    <telerik:EditorTool Name="InsertUnorderedList" />
                                                    <telerik:EditorSeparator />
                                                    <telerik:EditorTool Name="ToggleTableBorder" />
                                                    <telerik:EditorTool Name="XhtmlValidator" />
                                                </telerik:EditorToolGroup>
                                                <telerik:EditorToolGroup>
                                                    <telerik:EditorTool Name="ForeColor" />
                                                    <telerik:EditorTool Name="BackColor" />
                                                    <telerik:EditorTool Name="ApplyClass" />
                                                    <telerik:EditorTool Name="FormatStripper" />
                                                </telerik:EditorToolGroup>
                                                <telerik:EditorToolGroup Tag="DropdownToolbar">
                                                    <telerik:EditorTool Name="InsertSymbol" />
                                                    <telerik:EditorTool Name="InsertTable" />
                                                    <telerik:EditorTool Name="InsertFormElement" />
                                                    <telerik:EditorTool Name="InsertSnippet" />
                                                    <telerik:EditorTool Name="ImageMapDialog" />
                                                    <telerik:EditorTool Name="InsertCustomLink" ShortCut="CTRL+ALT+K" />
                                                    <telerik:EditorSeparator />
                                                    <telerik:EditorTool Name="ConvertToLower" />
                                                    <telerik:EditorTool Name="ConvertToUpper" />
                                                    <telerik:EditorSeparator />
                                                    <telerik:EditorTool Name="Zoom" />
                                                    <telerik:EditorTool Name="ModuleManager" />
                                                    <telerik:EditorTool Name="ToggleScreenMode" ShortCut="F11" />
                                                    <telerik:EditorTool Name="AboutDialog" />
                                                </telerik:EditorToolGroup>
                                            </Tools>
                                    </telerik:RadEditor>
                                </td>
                                <td>
                                     
                                </td>
                            </tr>
                            <tr valign="top">
                                <td>
                                    <%# GetString("lblAnswer")%>  
                                </td>
                                <td>
                                    <telerik:RadEditor ID="txtAnswer" Content='<%# Bind( "Answer") %>' runat="server" Width="700" Height="300"  Skin="WebBlue" AutoResizeHeight="false">
                                            <Tools>
                                                <telerik:EditorToolGroup Tag="MainToolbar">
                                                    <telerik:EditorTool Name="Print" ShortCut="CTRL+P"></telerik:EditorTool>
                                                    <telerik:EditorTool Name="AjaxSpellCheck" />
                                                    <telerik:EditorTool Name="FindAndReplace" ShortCut="CTRL+F" />
                                                    <telerik:EditorTool Name="SelectAll" ShortCut="CTRL+A" />
                                                    <telerik:EditorTool Name="Cut" />
                                                    <telerik:EditorTool Name="Copy" ShortCut="CTRL+C" />
                                                    <telerik:EditorTool Name="Paste" ShortCut="CTRL+V" />
                                                    <telerik:EditorTool Name="PasteStrip" />
                                                    <telerik:EditorSeparator />
                                                    <telerik:EditorTool Name="Undo" ShortCut="CTRL+Z" />
                                                    <telerik:EditorTool Name="Redo" ShortCut="CTRL+Y" />
                                                </telerik:EditorToolGroup>
                                                <telerik:EditorToolGroup Tag="InsertToolbar">
                                                    <telerik:EditorTool Name="ImageManager" ShortCut="CTRL+G" />
                                                    <telerik:EditorTool Name="DocumentManager" />
                                                    <telerik:EditorTool Name="FlashManager" />
                                                    <telerik:EditorTool Name="MediaManager" />
                                                    <telerik:EditorTool Name="TemplateManager" />
                                                    <telerik:EditorSeparator />
                                                    <telerik:EditorTool Name="LinkManager" ShortCut="CTRL+K" />
                                                    <telerik:EditorTool Name="Unlink" ShortCut="CTRL+SHIFT+K" />
                                                </telerik:EditorToolGroup>
                                                <telerik:EditorToolGroup>
                                                    <telerik:EditorTool Name="Superscript" />
                                                    <telerik:EditorTool Name="Subscript" />
                                                    <telerik:EditorTool Name="InsertParagraph" />
                                                    <telerik:EditorTool Name="InsertGroupbox" />
                                                    <telerik:EditorTool Name="InsertHorizontalRule" />
                                                    <telerik:EditorTool Name="InsertDate" />
                                                    <telerik:EditorTool Name="InsertTime" />
                                                    <telerik:EditorSeparator />
                                                    <telerik:EditorTool Name="FormatCodeBlock" />
                                                </telerik:EditorToolGroup>
                                                <telerik:EditorToolGroup>
                                                    <telerik:EditorTool Name="FormatBlock" />
                                                    <telerik:EditorTool Name="FontName" ShortCut="CTRL+SHIFT+F" />
                                                    <telerik:EditorTool Name="RealFontSize" ShortCut="CTRL+SHIFT+P" />
                                                </telerik:EditorToolGroup>
                                                <telerik:EditorToolGroup>
                                                    <telerik:EditorTool Name="AbsolutePosition" />
                                                    <telerik:EditorSeparator />
                                                    <telerik:EditorTool Name="Bold" ShortCut="CTRL+B" />
                                                    <telerik:EditorTool Name="Italic" ShortCut="CTRL+I" />
                                                    <telerik:EditorTool Name="Underline" ShortCut="CTRL+U" />
                                                    <telerik:EditorTool Name="StrikeThrough" />
                                                    <telerik:EditorSeparator />
                                                    <telerik:EditorTool Name="JustifyLeft" />
                                                    <telerik:EditorTool Name="JustifyCenter" />
                                                    <telerik:EditorTool Name="JustifyRight" />
                                                    <telerik:EditorTool Name="JustifyFull" />
                                                    <telerik:EditorTool Name="JustifyNone" />
                                                    <telerik:EditorSeparator />
                                                    <telerik:EditorTool Name="Indent" />
                                                    <telerik:EditorTool Name="Outdent" />
                                                    <telerik:EditorSeparator />
                                                    <telerik:EditorTool Name="InsertOrderedList" />
                                                    <telerik:EditorTool Name="InsertUnorderedList" />
                                                    <telerik:EditorSeparator />
                                                    <telerik:EditorTool Name="ToggleTableBorder" />
                                                    <telerik:EditorTool Name="XhtmlValidator" />
                                                </telerik:EditorToolGroup>
                                                <telerik:EditorToolGroup>
                                                    <telerik:EditorTool Name="ForeColor" />
                                                    <telerik:EditorTool Name="BackColor" />
                                                    <telerik:EditorTool Name="ApplyClass" />
                                                    <telerik:EditorTool Name="FormatStripper" />
                                                </telerik:EditorToolGroup>
                                                <telerik:EditorToolGroup Tag="DropdownToolbar">
                                                    <telerik:EditorTool Name="InsertSymbol" />
                                                    <telerik:EditorTool Name="InsertTable" />
                                                    <telerik:EditorTool Name="InsertFormElement" />
                                                    <telerik:EditorTool Name="InsertSnippet" />
                                                    <telerik:EditorTool Name="ImageMapDialog" />
                                                    <telerik:EditorTool Name="InsertCustomLink" ShortCut="CTRL+ALT+K" />
                                                    <telerik:EditorSeparator />
                                                    <telerik:EditorTool Name="ConvertToLower" />
                                                    <telerik:EditorTool Name="ConvertToUpper" />
                                                    <telerik:EditorSeparator />
                                                    <telerik:EditorTool Name="Zoom" />
                                                    <telerik:EditorTool Name="ModuleManager" />
                                                    <telerik:EditorTool Name="ToggleScreenMode" ShortCut="F11" />
                                                    <telerik:EditorTool Name="AboutDialog" />
                                                </telerik:EditorToolGroup>
                                            </Tools>
                                    </telerik:RadEditor>
                                </td>
                                <td>
                                     
                                </td>
                            </tr>
                            <tr valign="top">
                                <td>
                                     
                                </td>
                                <td colspan="2">
                                    <asp:ImageButton ID="btnUpdate" ToolTip='<%# (Container is GridEditFormInsertItem) ? GetString("InsertButton") : GetString("UpdateButton") %>' Visible='<%# (lblRightStatus.Text == "e" || lblRightStatus.Text == "d") ? (chkIsProtect.Checked ? ( (Eval("UserId").ToString() != "" && Eval("UserId").ToString() != UserId.ToString()) ? false : true ) : true ) : false %>'
                                        runat="server" CommandName='<%# (Container is GridEditFormInsertItem) ? "PerformInsert" : "Update" %>'  ImageUrl="~/images/IAC/check.png" ValidationGroup="IACFAQ">
                                    </asp:ImageButton>   
                                    <asp:ImageButton ID="Button2" ToolTip='<%# GetString("CancelButton") %>' runat="server" CausesValidation="False" CommandName="Cancel" ImageUrl="~/images/IAC/cancel.png" >
                                    </asp:ImageButton>
                                </td>
                            </tr>
                        </table>
                    </FormTemplate>
                </EditFormSettings>
            </MasterTableView>
            <ClientSettings>
                  <ClientEvents OnKeyPress="OnKeyPress" />
            </ClientSettings>
        </telerik:RadGrid>
         
        <script type="text/javascript">
            function DisplayFAQ(name) {
                var tbl = document.getElementById(name);
                if (tbl != null) {
                    {
                        if (tbl.style.display == 'none') {
                            tbl.style.display = '';
                        }
                        else {
                            tbl.style.display = 'none';
                        }
                    }
                }
                return false;
            }
            function ConfirmDelete() {
                return confirm('<%= GetString("ConfirmDelete") %>');
            }
        </script>
    <asp:SqlDataSource ID="SqlDataSource1" runat="server"
        ConnectionString="<%$ ConnectionStrings:SiteSqlServer %>"
        DeleteCommand="DELETE FROM IACFAQ WHERE FAQId = @FAQId"
        InsertCommand="INSERT INTO IACFAQ(Question, Answer, TabModuleId, UserId, CreatedDate) VALUES (@Question, @Answer, @TabModuleId, @UserId, @CreatedDate)"
        SelectCommand="SELECT *, ( FirstName + ' ' + LastName) FullName FROM IACFAQ T JOIN Users U ON T.UserId = U.UserId WHERE TabModuleId = @TabModuleId "
        UpdateCommand="UPDATE IACFAQ SET Question = @Question, Answer = @Answer, TabModuleId = @TabModuleId, UserId = @UserId, CreatedDate = @CreatedDate WHERE (FAQId = @FAQId)"
        onupdating="SqlDataSource1_Updating"
        oninserting="SqlDataSource1_Inserting">
        <DeleteParameters>
            <asp:Parameter Name="FAQId" />
        </DeleteParameters>
        <SelectParameters>
            <asp:Parameter Name="TabModuleId" />
        </SelectParameters>
        <UpdateParameters>
            <asp:Parameter Name="Question" />
            <asp:Parameter Name="Answer" />       
            <asp:Parameter Name="TabModuleId" />
            <asp:Parameter Name="UserId" />
            <asp:Parameter Name="CreatedDate" />
            <asp:Parameter Name="FAQId" />
        </UpdateParameters>
        <InsertParameters>
            <asp:Parameter Name="Question" />
            <asp:Parameter Name="Answer" />
            <asp:Parameter Name="TabModuleId" />
            <asp:Parameter Name="UserId" />
            <asp:Parameter Name="CreatedDate" />
        </InsertParameters>
    </asp:SqlDataSource>

    Please support for me,
    Thanks you,
    Best regards,
Back to Top