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 45 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Steve
Top achievements
Rank 1
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

Sort by
0
Dimitar Terziev
Telerik team
answered on 03 Dec 2014, 07:48 AM
Hi,

You could use the approach suggested in the following help article here.

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.

 
0
Steve
Top achievements
Rank 1
answered on 03 Dec 2014, 12:08 PM
Thanks Dimitar, I saw this. But the combobox is embedded within the EditFormSettings template of the RadGrid. The example assumes it is not. How do I get access to the combobox within the grid, so I can do the logic shown in the pageload javascript function? I get an error stating it is unable to find the combobox object, using the shown code.
0
Steve
Top achievements
Rank 1
answered on 03 Dec 2014, 05:53 PM
I'm opening this as a ticket. I'm not getting much help here, so I need to go that route.
0
Accepted
Dimitar Terziev
Telerik team
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.

 
0
Steve
Top achievements
Rank 1
answered on 05 Dec 2014, 12:18 PM
Yes, it works perfectly!
Tags
ComboBox
Asked by
Steve
Top achievements
Rank 1
Answers by
Dimitar Terziev
Telerik team
Steve
Top achievements
Rank 1
Share this question
or