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

6 posts, 1 answers
  1. Steve
    Steve avatar
    6 posts
    Member since:
    Aug 2014

    Posted 02 Dec 2014 Link to this post

    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>




  2. Dimitar Terziev
    Admin
    Dimitar Terziev avatar
    1266 posts

    Posted 03 Dec 2014 Link to this post

    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.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Steve
    Steve avatar
    6 posts
    Member since:
    Aug 2014

    Posted 03 Dec 2014 in reply to Dimitar Terziev Link to this post

    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.
  5. Steve
    Steve avatar
    6 posts
    Member since:
    Aug 2014

    Posted 03 Dec 2014 Link to this post

    I'm opening this as a ticket. I'm not getting much help here, so I need to go that route.
  6. Answer
    Dimitar Terziev
    Admin
    Dimitar Terziev avatar
    1266 posts

    Posted 05 Dec 2014 Link to this post

    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.

     
  7. Steve
    Steve avatar
    6 posts
    Member since:
    Aug 2014

    Posted 05 Dec 2014 in reply to Dimitar Terziev Link to this post

    Yes, it works perfectly!
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017