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 232 Views

Grid

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

2 Answers, 1 is accepted

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.

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,