Set Value of RadNumericTextBox in FilterRow

3 posts, 1 answers
  1. Chloe
    Chloe avatar
    2 posts
    Member since:
    Jun 2016

    Posted 14 Jun 2016 Link to this post

    For GridBoundColumns which have auto generated filters I've written javascript that when a cell is clicked its value is put in the filter text box. Users can then use that value as if they'd typed it into the filter text box.

    I have a numeric bound column for which I want the same capability. 

    Info I've gathered so far leads me to think I should use the .set_value() command, but all the examples I've found assume I know the control's ID to get it, but because it's auto generated I don't.

    At present the numeric value is appearing in the filter text box, but the filter button does not react to its presence.


    function CopyNumericValue()


    var radNumericTextBox1 = $find("<%= RadNumericTextBox1.ClientID %>");

    var radNumericTextBox2 = $find("<%= RadNumericTextBox2.ClientID %>");

    radNumericTextBox1.set_value(radNumericTextBox2.get_value() + 1);



    <telerik:RadGrid runat="server" ID="RadGrid1" RenderMode="Classic" Skin="Office2010Blue" EnableViewState="true" ClientIDMode="AutoID"
        AllowPaging="True" OnPageIndexChanged="RadGrid1_PageIndexChanged" OnPageSizeChanged="RadGrid1_PageSizeChanged"
        AllowSorting="true" OnSortCommand="RadGrid1_SortCommand"
        AllowFilteringByColumn="True" OnNeedDataSource="RadGrid1_NeedDataSource"
        <AlternatingItemStyle Height="16px" BackColor="#e4eaf1" />
        <ItemStyle Height="16px" />
        <MasterTableView AutoGenerateColumns="false" DataKeyNames="SalesOrderId" ClientDataKeyNames="SalesOrderId">

               <telerik:GridBoundColumn DataField="SalesOrderId" HeaderText="SalesOrderId" Visible="false"
                    UniqueName="SalesOrderId" AllowFiltering="false">


               <telerik:GridBoundColumn DataField="StatusName" HeaderText="Status" UniqueName="StatusName" FilterControlWidth="80%">
                    <HeaderStyle Width="10%" HorizontalAlign="Left" />
                    <ItemStyle HorizontalAlign="Left" />

               <telerik:GridNumericColumn DataField="OrderTotal" HeaderText="Total" UniqueName="OrderTotal" FilterControlWidth="60%"
                        DecimalDigits="2" DataFormatString="{0:### ##0.00}">
                    <HeaderStyle Width="7%" HorizontalAlign="Right" />
                    <ItemStyle HorizontalAlign="Right" />

        <PagerStyle PageSizes="10,15,20,25" AlwaysVisible="true" Position="Top" />
             <Scrolling AllowScroll="true" UseStaticHeaders="true" />
            <Selecting CellSelectionMode="SingleCell" />
            <ClientEvents OnCellSelecting="populateFilterTextBoxes" />


                function populateFilterTextBoxes(sender, eventArgs) {
                    var selectedColumn = eventArgs.get_column();
                    var selectedColumnUniqueName = selectedColumn.get_uniqueName();
                    var selectedColumnElement = selectedColumn.get_element();
                    var selectedColumnCellIndex = selectedColumnElement.cellIndex;

                    var selectedRow = eventArgs.get_row();
                    var selectedCell = selectedRow.cells[selectedColumnCellIndex];
                    var value = selectedCell.innerText;
                    var inputs = document.getElementsByTagName("input");
                    for (var i = 0; i < inputs.length; i++) {
                        var curInput = inputs[i];
                        //_FilterTextBox_ for normal bound columns
                        if ("_FilterTextBox_" + selectedColumnUniqueName)) {
                            curInput.innerText = value;//prototype endsWith in DefaultEditor.Master
                        //_RNTBF_ for Numeric columns
                        if ("_RNTBF_" + selectedColumnUniqueName)) {
                            curInput.innerText = value;

    HTML of filter controls

    <td style="white-space:nowrap;">
        <input name="RadGrid1$ctl00$ctl02$ctl02$FilterTextBox_StatusName" type="text" size="10" 
            id="RadGrid1_ctl00_ctl02_ctl02_FilterTextBox_StatusName" class="rgFilterBox" alt="Filter StatusName column" 
            onkeypress="if((event.keyCode == 13)) return false;" style="height:22px;width:80%;" />
        <input type="button" name="RadGrid1$ctl00$ctl02$ctl02$Filter_StatusName" value=" " 
            onclick="$find(&quot;RadGrid1&quot;)._showFilterMenu(&quot;RadGrid1_ctl00&quot;, &quot;StatusName&quot;, event); return         false;__doPostBack(&#39;RadGrid1$ctl00$ctl02$ctl02$Filter_StatusName&#39;,&#39;&#39;)" 
            id="RadGrid1_ctl00_ctl02_ctl02_Filter_StatusName" title="Filter" class="rgFilter" />
    <td style="white-space:nowrap;">
        <span id="RadGrid1_ctl00_ctl02_ctl02_RNTBF_OrderTotal_wrapper" class="riSingle RadInput RadInput_Office2010Blue" style="width:60%;">
            <input id="RadGrid1_ctl00_ctl02_ctl02_RNTBF_OrderTotal" name="RadGrid1$ctl00$ctl02$ctl02$RNTBF_OrderTotal" class="riTextBox riEnabled" 
                alt="Filter OrderTotal column" type="text" />
            <input id="RadGrid1_ctl00_ctl02_ctl02_RNTBF_OrderTotal_ClientState" name="RadGrid1_ctl00_ctl02_ctl02_RNTBF_OrderTotal_ClientState"             type="hidden" />
        <input type="button" name="RadGrid1$ctl00$ctl02$ctl02$Filter_OrderTotal" value="" 
            onclick="$find(&quot;RadGrid1&quot;)._showFilterMenu(&quot;RadGrid1_ctl00&quot;, &quot;OrderTotal&quot;, event); return         false;__doPostBack(&#39;RadGrid1$ctl00$ctl02$ctl02$Filter_OrderTotal&#39;,&#39;&#39;)" 
            id="RadGrid1_ctl00_ctl02_ctl02_Filter_OrderTotal" title="Filter" class="rgFilter" />

  2. Answer
    Eyup avatar
    4081 posts

    Posted 17 Jun 2016 Link to this post

    Hello Chloe,

    You can use the following approach to achieve this requirement:
    function buttonClick(sender, args) {
        var grid = $find('<%= RadGrid1.ClientID %>');
        var numColName = "InitialMargin";
        var cell = grid.get_masterTableView()._getFilterCellByColumnUniqueName(numColName);
        var numBox = $telerik.findControl(cell, "RNTBF_" + numColName);

    That should do the trick. Please give it a try and let me know if it works for you.

    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  3. Chloe
    Chloe avatar
    2 posts
    Member since:
    Jun 2016

    Posted 17 Jun 2016 in reply to Eyup Link to this post

    Thanks it works.

    I’ve also made it work with dates too.

    function buttonClick(sender, args) {
        var grid = $find('<%= RadGrid1.ClientID %>');
        var datColName = "dateColumnName";
        var cell = grid.get_masterTableView()._getFilterCellByColumnUniqueName(datColName);
        var dip = $telerik.findControl(cell, "RDIPF" + datColName + “_dateInput”);

Back to Top