I have a RadToolBar (RadToolBar1) placed inside a RadGrid. When I use Tab to focus a RadToolBarButton and press Enter, the server-side event doesn’t fire (e.g., CommandName="InitInsert"). How can I make pressing Enter trigger the button’s server-side event?
I've tried this code, but it was not working.
function pageLoadHandler() {
var buttonList = document.querySelectorAll('.RadToolBar .rtbUL .rtbItem');
if (buttonList) {
buttonList.forEach((button) => {
button.addEventListener("keydown", (e) => {
if (e.code === "Enter") {
button.click();
}
})
})
}
}
Sys.Application.add_load(pageLoadHandler); <telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="True" AllowSorting="True" Width="100%"
CssClass="mx " GridLines="None" Skin="Bootstrap" PageSize="12"
OnNeedDataSource="RadGrid1_NeedDataSource" OnItemCommand="RadGrid1_ItemCommand"
OnUpdateCommand="RadGrid1_UpdateCommand" OnInsertCommand="RadGrid1_InsertCommand"
OnItemDataBound="RadGrid1_ItemDataBound" OnDeleteCommand="RadGrid1_DeleteCommand">
<PagerStyle Mode="NumericPages"></PagerStyle>
<MasterTableView Name="MASTER" AutoGenerateColumns="False"
DataKeyNames="aid,utype,uid,is_enabled,project,user_level,plan,salt,valid,mail"
CommandItemDisplay="Top" PageSize="20" TableLayout="Fixed" EditMode="EditForms">
<HeaderStyle BackColor="#D6F2F6" CssClass="mx header" />
<ItemStyle BackColor="beige" CssClass="mx item" />
<AlternatingItemStyle BackColor="white" CssClass="mx" />
<RowIndicatorColumn>
<HeaderStyle Width="20px"></HeaderStyle>
</RowIndicatorColumn>
<ExpandCollapseColumn ButtonType="ImageButton">
<HeaderStyle Width="24"></HeaderStyle>
</ExpandCollapseColumn>
<CommandItemStyle Height="40" BackColor="#45B3D8" Font-Size="1.1em" />
<CommandItemTemplate>
<telerik:RadToolBar RenderMode="Lightweight" ID="RadToolBar1" runat="server"
CssClass="mm-cmd" AutoPostBack="true" BorderStyle="Groove">
<KeyboardNavigationSettings CommandKey="Alt" FocusKey="M" />
<Items>
<telerik:RadToolBarButton Text="新增學校帳號" CheckOnClick="true" AllowSelfUnCheck="true" CommandName="InitInsert"
ImageUrl="~/images/add.png"
Visible='<%# ! (RadGrid1.MasterTableView.IsItemInserted || RadGrid1.EditIndexes.Count > 0 || Session["user_level"].ToString()!="1") %>'>
</telerik:RadToolBarButton>
<telerik:RadToolBarButton Text="放棄編輯" CommandName="CancelAll"
ImageUrl="~/images/cancel_103431.png" CausesValidation="false"
Visible='<%# RadGrid1.MasterTableView.IsItemInserted || RadGrid1.EditIndexes.Count > 0 %>'>
</telerik:RadToolBarButton>
<telerik:RadToolBarButton runat="server" IsSeparator="true" BackColor="#45B3D8"
Width="">
</telerik:RadToolBarButton>
<telerik:RadToolBarButton Text="更新" CommandName="Rebind"
ImageUrl="~/images/refreshdata.png">
</telerik:RadToolBarButton>
<telerik:RadToolBarButton runat="server" IsSeparator="true" BackColor="#45B3D8"
Width="">
</telerik:RadToolBarButton>
</Items>
</telerik:RadToolBar>
</CommandItemTemplate>
<Columns>
<telerik:GridButtonColumn ConfirmText="確定刪除帳號?" ConfirmDialogType="RadWindow" Text="刪除帳號"
UniqueName="DeleteColumn"
ConfirmTitle="刪除帳號" ButtonType="ImageButton" CommandName="Delete" HeaderText="刪除"
ConfirmDialogHeight="200px" ConfirmDialogWidth="320px" HeaderStyle-Width="38"
ImageUrl="~/images/delete16x16.png" />
<%-- <telerik:GridEditCommandColumn UniqueName="EditCommandColumn1" HeaderStyle-Width="38"
ButtonType="ImageButton" EditImageUrl="~/images/edit16x16.png"
InsertImageUrl="~/images/save16x16.png" EditText="編輯這筆資料" HeaderText="編輯"
UpdateImageUrl="~/images/save16x16.png" UpdateText="保存資料" CancelText="放棄編輯"
CancelImageUrl="~/images/cancel16x16.png">
</telerik:GridEditCommandColumn> --%>
<telerik:GridTemplateColumn HeaderText="編輯" UniqueName="EditCol" HeaderStyle-Width="38">
<ItemTemplate>
<asp:ImageButton ID="btnEdit" runat="server"
ImageUrl="~/images/edit16x16.png"
CommandName="Edit"
AlternateText="編輯這筆資料" ToolTip="編輯這筆資料" />
<!-- 這個 Label 會輸出 <label for="btnEdit的clientId"> -->
<asp:Label ID="lblEditFor" runat="server"
AssociatedControlID="btnEdit" CssClass="sr-only"
Text="編輯這筆資料"></asp:Label>
</ItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridBoundColumn DataField="id" HeaderText="id" SortExpression="id" UniqueName="id"
Display="false" ReadOnly="True">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="uid" HeaderText="帳號"
HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center"
SortExpression="uid" UniqueName="uid" HeaderStyle-Width="150" ReadOnly="True"
HeaderStyle-Font-Size="0.917em" ItemStyle-Height="22px" ItemStyle-Font-Size="0.917em">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="uname" HeaderText="帳號管理人姓名" SortExpression="uname"
HeaderStyle-Font-Size="0.917em" ItemStyle-Height="22px" ItemStyle-Font-Size="0.917em"
ItemStyle-Font-Names="微軟正黑體" HeaderStyle-Font-Names="微軟正黑體" UniqueName="uname"
HeaderStyle-Width="100px" HeaderStyle-HorizontalAlign="Center"
ItemStyle-HorizontalAlign="Center">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="title" HeaderText="職稱" SortExpression="title"
HeaderStyle-Font-Size="0.917em" ItemStyle-Height="22px" ItemStyle-Font-Size="0.917em"
ItemStyle-Font-Names="微軟正黑體" HeaderStyle-Font-Names="微軟正黑體" UniqueName="unit"
HeaderStyle-Width="160px" HeaderStyle-HorizontalAlign="Center"
ItemStyle-HorizontalAlign="Center">
</telerik:GridBoundColumn>
<telerik:GridTemplateColumn HeaderStyle-Width="140" HeaderText="帳號權限"
HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center">
<ItemTemplate>
<%# Eval("user_level").Equals("1")?"學校管理員":"老師帳號" %>
</ItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridTemplateColumn HeaderStyle-Width="140" HeaderText="帳號狀態"
HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center">
<ItemTemplate>
<%# Eval("is_enabled").Equals("1")?"啟用":"停用" %>
</ItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridTemplateColumn HeaderStyle-Width="140" HeaderText="信箱狀態"
HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center">
<ItemTemplate>
<%# Eval("mail").ToString().Equals("")?"尚未填寫信箱":(Eval("valid").Equals("Y")?"已驗證":"<a href=\"SendMailCheck\">尚未驗證</a>") %>
</ItemTemplate>
</telerik:GridTemplateColumn>
</Columns>
<EditFormSettings EditColumn-CancelText="取消" EditColumn-UpdateText="更新"
EditColumn-InsertText="新增" EditColumn-ButtonType="ImageButton" EditFormType="Template">
<EditColumn ButtonType="ImageButton" CancelText="取消" UpdateText="更新" InsertText="新增"
UniqueName="EditCommandColumn">
</EditColumn>
<FormTemplate>
<table class="mx m-table " style="padding: 10px;">
<tr>
<td style="padding: 3px; height: 1.3em; width: 150px">帳號</td>
<td>
<asp:TextBox ID="mUid" runat="server" onkeydown="txtOnKeyPress(this);"
MaxLength="20" Width="120" Placeholder="使用者代碼"
onkeyup="value=value.replace(/[\W]/g,'') "
onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))">
</asp:TextBox>
<asp:Label runat="server" ID="LB"></asp:Label>
</td>
</tr>
<tr>
<td style="padding: 3px; height: 1.3em; width: 180px">帳號管理人姓名</td>
<td>
<asp:TextBox ID="mUname" runat="server" Text='<%# Bind("uname") %>' autocomplete="off"
MaxLength="20" Width="120"></asp:TextBox>
</td>
</tr>
<asp:Panel runat="server" ID="pass1Panel">
<tr>
<td style="padding: 3px; height: 1.3em; width: 180px">新密碼</td>
<td>
<asp:TextBox ID="mPassword1" TextMode="Password" runat="server" autocomplete="off"
MaxLength="20" Width="120"></asp:TextBox>
</td>
</tr>
<tr>
<td style="padding: 3px; height: 1.3em; width: 180px">確認密碼</td>
<td>
<asp:TextBox ID="mPassword2" TextMode="Password" runat="server" autocomplete="off"
MaxLength="20" Width="120"></asp:TextBox>
</td>
</tr>
</asp:Panel>
<asp:Panel runat="server" ID="pass2Panel">
<tr>
<td style="padding: 3px; height: 1.3em; width: 180px">密碼</td>
<td>
<asp:TextBox ID="mPassword" TextMode="Password" runat="server" autocomplete="off"
MaxLength="20" Width="120"></asp:TextBox>
</td>
</tr>
</asp:Panel>
<tr>
<td style="padding: 3px; height: 3em">職稱</td>
<td>
<asp:TextBox ID="mTitle" runat="server" Text='<%# Bind("title") %>'
MaxLength="100" Width="420"></asp:TextBox>
</td>
</tr>
<tr>
<td style="padding: 3px; height: 3em">備用信箱</td>
<td>
<asp:TextBox ID="mEmail" runat="server" Text='<%# Bind("mail") %>'
MaxLength="100" Width="420"></asp:TextBox>
<asp:RegularExpressionValidator ID="revEmailAddress" runat="server"
SetFocusOnError="true" Display="None" ControlToValidate="mEmail"
resourceKey="revEmailAddress"
ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"
ValidationGroup="forgetpassword"></asp:RegularExpressionValidator>
<asp:Literal runat="server" ID="mEmailState" Text=""></asp:Literal>
</td>
</tr>
<tr>
<td style="padding: 3px; height: 1.3em; width: 150px">帳號權限</td>
<td>
<asp:RadioButtonList runat="server" ID="mUser_Level" RepeatColumns="2"
Font-Size="Medium" CssClass="nontable">
<asp:ListItem Value="1" Text="學校管理員"></asp:ListItem>
<asp:ListItem Value="2" Text="老師帳號"></asp:ListItem>
</asp:RadioButtonList>
</td>
</tr>
<tr>
<td style="padding: 3px; height: 1.3em; width: 150px">開放計畫權限</td>
<td>
<asp:CheckBoxList RenderMode="Lightweight" ID="listbox" RepeatColumns="6"
Width="100%" runat="server" DataSourceID="SqlDataSource1" DataTextField="name"
DataValueField="plan_code">
</asp:CheckBoxList>
</td>
</tr>
<tr>
<td style="padding: 3px; height: 1.3em; width: 150px">帳號狀態</td>
<td>
<asp:RadioButtonList runat="server" ID="mIs_Enabled" RepeatColumns="2"
Font-Size="Medium" CssClass="nontable">
<asp:ListItem Value="1" Text="啟用"></asp:ListItem>
<asp:ListItem Value="0" Text="停用"></asp:ListItem>
</asp:RadioButtonList>
</td>
</tr>
</table>
<br />
<asp:ValidationSummary ID="mSummary" resourceKey="mSummary" runat="server"
ShowSummary="false" ShowMessageBox="true" ValidationGroup="forgetpassword"
HeaderText="輸入的信箱格式有誤" />
<telerik:RadButton CausesValidation="true" ID="btnUpdate" runat="server"
CommandName='<%# (Container is GridEditFormInsertItem) ? "PerformInsert" : "Update" %>'
Width="120px" Height="36px" Font-Size="1em" ButtonType="LinkButton" ValidationGroup="forgetpassword"
CssClass="customizeIcon"
Text='<%# (Container is GridEditFormInsertItem) ? "保存" : "更新" %>'
UseSubmitBehavior="false">
<Icon PrimaryIconCssClass="rbSave" PrimaryIconTop="8px" PrimaryIconBottom="8px"
PrimaryIconLeft="10"></Icon>
</telerik:RadButton>
<telerik:RadButton ID="btnCancel" CommandName="Cancel" Text="取消" runat="server"
Width="120px" Height="36px" ButtonType="LinkButton" CssClass="customizeIcon"
Font-Size="1em">
<Icon PrimaryIconCssClass="rbCancel" PrimaryIconTop="8px" PrimaryIconBottom="8px"
PrimaryIconLeft="10"></Icon>
</telerik:RadButton>
</FormTemplate>
</EditFormSettings>
</MasterTableView>
</telerik:RadGrid>LTY
1 Answer, 1 is accepted
0
Hi Tai Yen,
The behavior you described is a known limitation: pressing Enter while a RadToolBarButton is focused does not automatically trigger the server-side event (such as CommandName) in ASP.NET WebForms. This issue is confirmed in the following public feedback item:
Why your approach didn’t work
- The
.click()method on a DOM element only triggers the client-side click event. It does not initiate a postback or the RadToolBar’s server-side CommandName logic. - For RadToolBar, server-side events require a postback, which is not automatically triggered by pressing Enter.
You can manually trigger the server-side event by using the Telerik client-side API to invoke the button’s click method, which will initiate a postback if AutoPostBack="true" is set.
Regards,
Vasko
Progress Telerik
Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Telerik family, check out our getting started resources!