Set Value of RadNumericTextBox in FilterRow

[Chloe]

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.

EG

function CopyNumericValue()

{

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

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

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

}

Grid

<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"
    GridLines="Horizontal">
    <AlternatingItemStyle Height="16px" BackColor="#e4eaf1" />
    <ItemStyle Height="16px" />
    <MasterTableView AutoGenerateColumns="false" DataKeyNames="SalesOrderId" ClientDataKeyNames="SalesOrderId">
        <Columns>

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

...

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

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

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

Javascript

            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 (curInput.id.endsWith("_FilterTextBox_" + selectedColumnUniqueName)) {
                        curInput.innerText = value;//prototype endsWith in DefaultEditor.Master
                        break;
                    }
                    //_RNTBF_ for Numeric columns
                    if (curInput.id.endsWith("_RNTBF_" + selectedColumnUniqueName)) {
                        curInput.innerText = value;
                        break;
                    }
                }
            }

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>
<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" />
    </span>
    <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" />
</td>

[Eyup]

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);

    numBox.set_value(15);
}

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

Regards,
Eyup
Telerik

[Chloe]

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”);

    dip.set_value(“15/06/2016”);
}