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

Set Value of RadNumericTextBox in FilterRow

2 Answers 162 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Chloe
Top achievements
Rank 1
Chloe asked on 14 Jun 2016, 09:27 AM

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>

2 Answers, 1 is accepted

Sort by
0
Accepted
Eyup
Telerik team
answered on 17 Jun 2016, 08:09 AM
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
Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
0
Chloe
Top achievements
Rank 1
answered on 17 Jun 2016, 09:02 AM
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”);
}
Tags
Grid
Asked by
Chloe
Top achievements
Rank 1
Answers by
Eyup
Telerik team
Chloe
Top achievements
Rank 1
Share this question
or