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

How do I dissallow specific characters on entry when combo is embedded in grid?

5 Answers 84 Views

ComboBox

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

Steve asked on 02 Dec 2014, 10:10 PM

I have a grid with an edit template. In the template I have a combobox that is populated with data from a SQL table, I also have the AllowCustomText="True" set so I can enter values that are not in the dropdown. I want to only allow numeric entries. How can I accomplish this client side with javascript? I can't seem to get it working. Can anyone shed some light on what I need to do?

Here is what I have (I removed the extra columns to shorten the code):

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

<script type="text/javascript">

function NumericOnly(sender, eventArgs) {

debugger

var code = eventArgs.get_domEvent().keyCode;

//allow numerics only

if (code < 48 || code > 57) {

sender.returnValue = false;

if (sender.preventDefault) {

sender.preventDefault();

}

</script>

</telerik:RadCodeBlock>

<telerik:RadGrid ID="RadGrid1" runat="server" CssClass="RadGrid" GridLines="None"

AllowFilteringByColumn="true" AllowPaging="True" PageSize="10" AllowSorting="True"

AutoGenerateColumns="False" ShowStatusBar="true" AllowAutomaticDeletes="True"

AllowAutomaticInserts="True" AllowAutomaticUpdates="True" DataSourceID="sdsNTA_ENDORSEMENT_MASTER"

OnItemDeleted="RadGrid1_ItemDeleted"

OnItemInserted="RadGrid1_ItemInserted" OnItemUpdated="RadGrid1_ItemUpdated"

OnItemCreated="RadGrid1_ItemCreated" OnItemCommand="RadGrid1_ItemCommand" OnPreRender="RadGrid1_PreRender"

OnItemDataBound="RadGrid1_ItemDataBound" Skin="Office2007">

<PagerStyle Mode="NextPrevAndNumeric"></PagerStyle>

<ClientSettings>

<ClientEvents OnRowClick="RowClick" OnRowDblClick="RowDblClick" OnGridCreated="GridCreated" />

</ClientSettings>

<MasterTableView Width="100%" CommandItemDisplay="TopAndBottom" DataSourceID="sdsNTA_ENDORSEMENT_MASTER"

DataKeyNames="GROUP_NUMB">

<CommandItemTemplate>

<div style="padding: 5px 5px;">

<asp:LinkButton ID="btnPreview" runat="server" CommandName="Preview" Visible='<%# RadGrid1.EditIndexes.Count == 0 && !RadGrid1.MasterTableView.IsItemInserted %>'>

<img style="border:0px;vertical-align:middle;" alt="" src="Images/eye.png"/>Preview selected</asp:LinkButton>

<asp:LinkButton ID="btnInitInsert" runat="server" CommandName="InitInsert" Visible='<%# RadGrid1.EditIndexes.Count == 0 && !RadGrid1.MasterTableView.IsItemInserted %>'>

<img style="border:0px;vertical-align:middle;" alt="" src="Images/AddRecord.png"/>Add new</asp:LinkButton>

<asp:LinkButton ID="btnPerformInsert" runat="server" CommandName="PerformInsert"

Visible='<%# RadGrid1.MasterTableView.IsItemInserted %>'>

<img style="border:0px;vertical-align:middle;" alt="" src="Images/Insert.gif"/> Add this Endorsement</asp:LinkButton>

<asp:LinkButton ID="btnEditSelected" runat="server" CommandName="EditSelected" Visible='<%# RadGrid1.EditIndexes.Count == 0 && !RadGrid1.MasterTableView.IsItemInserted %>'>

<img style="border:0px;vertical-align:middle;" alt="" src="Images/Edit.png"/>Edit selected</asp:LinkButton>

<asp:LinkButton ID="btnUpdateEdited" OnClientClick="javascript:return ResetChanges()"

runat="server" CommandName="UpdateEdited" Visible='<%# RadGrid1.EditIndexes.Count > 0 && !RadGrid1.MasterTableView.IsItemInserted %>'>

<img style="border:0px;vertical-align:middle;" alt="" src="Images/Update.png"/>Update</asp:LinkButton>

<asp:LinkButton ID="btnDelete" OnClientClick="javascript:return confirm('Delete all selected plans?')"

runat="server" CommandName="DeleteSelected" Visible='<%# RadGrid1.EditIndexes.Count == 0 && !RadGrid1.MasterTableView.IsItemInserted %>'>

<img style="border:0px;vertical-align:middle;" alt="" src="Images/Delete.png"/>Delete selected</asp:LinkButton>

<asp:LinkButton ID="btnCancel" OnClientClick="javascript:return ResetChanges()" runat="server"

CommandName="CancelAll" Visible='<%# RadGrid1.EditIndexes.Count > 0 || RadGrid1.MasterTableView.IsItemInserted %>'>

<img style="border:0px;vertical-align:middle;" alt="" src="Images/Cancel.png"/>Cancel</asp:LinkButton>

<asp:LinkButton ID="LinkButton4" runat="server" CommandName="RebindGrid" Visible='<%# RadGrid1.EditIndexes.Count == 0 && !RadGrid1.MasterTableView.IsItemInserted %>'>

<img style="border:0px;vertical-align:middle;" alt="" src="Images/Refresh.png"/>Refresh endorsement list</asp:LinkButton>

</div>

</CommandItemTemplate>

<Columns>

<telerik:GridBoundColumn UniqueName="GROUP_NUMB" HeaderText="Group Number" DataField="GROUP_NUMB">

<FilterTemplate>

<telerik:RadComboBox ID="GroupNumbFilter" DataSourceID="sdsGroupNumbers" DataTextField="GROUP_NUMB"

DataValueField="GROUP_NUMB" AppendDataBoundItems="true" DropDownAutoWidth="Enabled"

Width="70" SelectedValue='<%# ((GridItem)Container).OwnerTableView.GetColumn("GROUP_NUMB").CurrentFilterValue %>'

runat="server" OnClientSelectedIndexChanged="GroupNumberIndexChanged">

<Items>

<telerik:RadComboBoxItem Text="All" />

</Items>

</telerik:RadComboBox>

<telerik:RadScriptBlock ID="RadScriptBlock6" runat="server">

<script type="text/javascript">

function GroupNumberIndexChanged(sender, args) {

var tableView = $find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");

tableView.filter("GROUP_NUMB", args.get_item().get_value(), "EqualTo");

}

</script>

</telerik:RadScriptBlock>

</FilterTemplate>

</telerik:GridBoundColumn>

</Columns>

<EditFormSettings EditFormType="Template">

<FormTemplate>

<table id="Table2" cellspacing="2" cellpadding="1" width="100%" border="0" rules="none"

style="border-collapse: collapse;">

<tr class="EditFormHeader">

<td colspan="6" style="font-size: small">

<b>Endorsement Details</b>

</td>

</tr>

<tr>

<td colspan="6">

<table id="Table3" cellspacing="1" cellpadding="1" width="100%" border="0" class="module">

<tr>

<td>

</td>

</tr>

<tr>

<td>

Group Number:

</td>

<td>

<telerik:RadComboBox ID="cboGROUP_NUMB" runat="server" Filter="None" MarkFirstMatch="true" AllowCustomText="true"

ChangeTextOnKeyBoardNavigation="false" DataSourceID="sdsGroupNumbers" DataTextField="GROUP_NUMB"

DataValueField="GROUP_NUMB"

SelectedValue='<%# Bind("GROUP_NUMB") %>' OnClientKeyPressing="NumericOnly" >

</telerik:RadComboBox>

</td>

</tr>

</table>

</td>

</tr>

</table>

</FormTemplate>

</EditFormSettings>

<NestedViewTemplate>

<table id="Table2" cellspacing="2" cellpadding="1" width="100%" border="0" rules="none"

style="border-collapse: collapse;">

<tr class="EditFormHeader">

<td colspan="6" style="font-size: small">

<b>Endorsement Details</b>

</td>

</tr>

<tr>

<td colspan="6">

<table id="Table3" cellspacing="1" cellpadding="1" width="100%" border="0" class="module">

<tr>

<td>

</td>

</tr>

<tr>

<td>

Group Number:

</td>

<td>

<i>

<%# Eval("GROUP_NUMB")%></i>

</td>

</tr>

</table>

</td>

</tr>

</table>

</NestedViewTemplate>

</MasterTableView>

<ClientSettings>

<Selecting AllowRowSelect="True" EnableDragToSelectRows="True"></Selecting>

</ClientSettings>

</telerik:RadGrid>

5 Answers, 1 is accepted

Accepted

answered on 05 Dec 2014, 08:30 AM

Hi Steve

I see that the solution suggested by my colleague is working for you so I am posting it here. The approach described in the help article from my previous post should be applied to the client load event handler function:

<telerik:RadComboBox ... OnClientLoad="comboLoad">

function comboLoad(sender, args) {

sender.get_inputDomElement().onkeydown = function (e) {

if (!e)

e = window.event;

var code = e.keyCode || e.which;

if (code < 48 || code > 57) {

e.returnValue = false;

if (e.preventDefault) {

e.preventDefault();

}

};

}

Regards,
Dimitar Terziev
Telerik

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.