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

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

2 Answers 160 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Long
Top achievements
Rank 1
Long asked on 15 Mar 2011, 08:38 AM
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 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 2
answered on 15 Mar 2011, 12:22 PM
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.
0
Long
Top achievements
Rank 1
answered on 16 Mar 2011, 03:26 AM
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,
Tags
Grid
Asked by
Long
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 2
Long
Top achievements
Rank 1
Share this question
or