Set Value of RadNumericTextBox in FilterRow

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

    Posted 14 Jun 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.

    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. Answer
    Eyup
    Admin
    Eyup avatar
    3015 posts

    Posted 17 Jun 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);
     
        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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Chloe
    Chloe avatar
    2 posts
    Member since:
    Jun 2016

    Posted 17 Jun 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”);

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