Cannot find a control in a radGrid FilterTemplate via Javascript

[Tim]

I'm performing a Custom Filter on a RadGrid. The filter works when my Button is pressed, I'd like to now have the button's code behind fire when the User types into the Search Textbox.

I am able to find the Grid using Javascript, but the $find to the 'btnFilter' always fails. As you can see below, I've tried multiple ways.

function doFilter(sender, e) {
        if (e.keyCode == 13) {

            var masterTable = $find("<%=AgreementsGrid.ClientID%>").get_masterTableView();
           //var btn = masterTable.get_dataItems()[0].findControl('btnFilter');
            var btn = $find("ctl00$MainContentPlaceHolder$AgreementsGrid$ctl00$ctl02$ctl01$btnFilter");

            if (btn != null) {
                e.cancelBubble = true;
                e.returnValue = false;

                if (e.preventDefault) {
                    e.preventDefault();
                }

                alert("yes!");
                //btn.click();
            } else {
                alert("no!");
            }
        }
    }

<telerik:RadGrid ID="AgreementsGrid" runat="server" CellSpacing="0" GridLines="None" EnableLinqExpressions="false"
                  AllowFilteringByColumn="true" AllowPaging="false" AllowSorting="True" EnableViewState="true"
                  AutoGenerateColumns="False" Height="240">
     <MasterTableView DataKeyNames="AgreementID" TableLayout="Auto">
         <Columns>
             <telerik:GridBoundColumn DataField="AgreementName"
                                     FilterControlAltText="Filter AgreementName column" HeaderText="Agreement" HeaderStyle-Width="350" FilterControlWidth="350"
                                      SortExpression="AgreementName" UniqueName="AgreementName" >
                 <FilterTemplate>
                     <telerik:RadTextBox ID="AgreementName" runat="server" EmptyMessageStyle-Font-Italic="true" onkeydown="doFilter(this,event)"
                                         HoveredStyle-Font-Italic="true" Width="90%">
                     </telerik:RadTextBox>
                     <asp:Button ID="btnFilter" runat="server" Width="20px" Text="" OnClick="FilterTextbox_Changed" CommandName="btnSearch" />
                 </FilterTemplate>
             </telerik:GridBoundColumn>
         </Columns>

        <FilterItemStyle Width="10px" />
     </MasterTableView>

    <FilterMenu EnableImageSprites="False"></FilterMenu>
 </telerik:RadGrid>

[Princy]

Hi,

Please try the following code snippet to access the Button in the FilterTemplate.

ASPX:

<asp:HiddenField ID="hidden1" runat="server" />

C#:

protected void AgreementsGrid_ItemDataBound(object sender, Telerik.Web.UI.GridItemEventArgs e)
{
    if (e.Item is GridFilteringItem)
    {
        GridFilteringItem item = (GridFilteringItem)e.Item;
        Button btn = (Button)item.FindControl("btnFilter");
        hidden1.Value = btn.ClientID.ToString();
    }
}

Javascript:

<script type="text/javascript">
    function doFilter(sender, e) {
        if (e.keyCode == 13) {
            var masterTable = $find("<%=AgreementsGrid.ClientID%>").get_masterTableView();
            var hidden = document.getElementById("hidden1").value;
            var btn = document.getElementById(hidden);
            if (btn != null) {
                e.cancelBubble = true;
                e.returnValue = false;

                if (e.preventDefault) {
                    e.preventDefault();
                }
                alert("yes!");
            } else {
                alert("no!");
            }
        }
    }
</script>

Regards,
Princy.

[Tim]

Princy, thanks for the response.  I added your code and using a breakpoint, was able to confirm that the control location is being saved to the hidden field.  However, when fired I get this error

'Microsoft JScript runtime error: Unable to get value of the property 'value': object is null or undefined'

Thx in advance!

[Jayesh Goyani]

Hello,

Please try with below code snippet.

JS

function doFilter(sender, e) {
              var SenderId = sender.id;
              // using Jquery
              var btnFilter2 = $("#" + SenderId.replace("AgreementName", "btnFilter")).get(0);
              btnFilter2.value = "Your Value";

              // Using JS
              var btnFilter = document.getElementById(SenderId.replace("AgreementName", "btnFilter"));
              btnFilter.value = "Your Value";
          }

aspx

<telerik:RadGrid ID="AgreementsGrid" runat="server" CellSpacing="0" GridLines="None"
         EnableLinqExpressions="false" AllowFilteringByColumn="true" AllowPaging="false"
         AllowSorting="True" EnableViewState="true" AutoGenerateColumns="false" Height="240" OnNeedDataSource="AgreementsGrid_NeedDataSource">
         <MasterTableView DataKeyNames="ID" TableLayout="Auto">
             <Columns>
                 <telerik:GridBoundColumn DataField="Name" FilterControlAltText="Filter AgreementName column"
                     HeaderText="Name" HeaderStyle-Width="350" FilterControlWidth="350" SortExpression="AgreemNameentName"
                     UniqueName="Name">
                     <FilterTemplate>
                         <telerik:RadTextBox ID="AgreementName" runat="server" EmptyMessageStyle-Font-Italic="true"
                             onkeydown="doFilter(this,event)" HoveredStyle-Font-Italic="true" Width="90%">
                         </telerik:RadTextBox>
                         <asp:Button ID="btnFilter" runat="server" Width="20px" Text=""
                             CommandName="btnSearch" />
                     </FilterTemplate>
                 </telerik:GridBoundColumn>
             </Columns>
             <FilterItemStyle Width="10px" />
         </MasterTableView>
         <FilterMenu EnableImageSprites="False">
         </FilterMenu>
     </telerik:RadGrid>

.aspx.cs

protected void AgreementsGrid_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
    {
        dynamic data = new[] {
               new { ID = 1, Name ="Name_1"},
               new { ID = 2, Name = "Name_2"},
               new { ID = 3, Name = "Name_3"},
               new { ID = 4, Name = "Name_4"},
               new { ID = 5, Name = "Name_5"}
           };
        AgreementsGrid.DataSource = data;
    }

Also check below link for reference.
http://jayeshgoyani.blogspot.in/2012/07/access-another-control-which-was-in.html

Thanks,
Jayesh Goyani

[Tim]

That did the job Jayesh, thx!!

[Tim]

Jayesh, just one final question.  How could I accomplish the same if I now set my bntfilter button visibility to false?  The code no longer functions when the btn is set to not visible.

<asp:Button ID="btnFilter" runat="server" Width="20px" Text="" OnClick="FilterTextbox_Changed" Visible="false" />

[Jayesh Goyani]

Hello,

Please set below property (style="display: none;") in place of Visible="false".
If you set Visible='false' then it will not render to browser/client side that's why you are not able to get button on client side.
 

<asp:Button  style="display: none;"  ID="btnFilter" runat="server" Width="20px" Text="" OnClick="FilterTextbox_Changed" />

Thanks,
Jayesh Goyani

[Tim]

Of course, that makes sense.

That solution *almost* works.  The button's background image appears to still be showing in part (4pxwidth).  I checked a little in the src and it's becuase the Grid is rendering the button this way

<a class="rfdSkinnedButton" href="javascript:void(0)">
<input name="ctl00$MainContentPlaceHolder$AgreementsGrid$ctl00$ctl02$ctl01$btnFilter" tabIndex="-1" class="rfdDecorated" id="ctl00_MainContentPlaceHolder_AgreementsGrid_ctl00_ctl02_ctl01_btnFilter" style="width: 14px; display: none;" onclick="javascript:__doPostBack('ctl00$MainContentPlaceHolder$AgreementsGrid$ctl00$ctl02$ctl01$btnFilter','')" type="button" value=""/>

Since this is rendered by the Grid, i'm not sure how I can remove it or override it?

[Jayesh Goyani]

Hello,

By using display property we are only hide our button from page.

Sorry but we can not hide its SRC from page. (To hide its source we have to use visible='false' ant that useless for your requirement)


Then also please try with below code.

<asp:Button  style="display: none;" Width="0px" Height="0px"  ID="btnFilter" runat="server"  OnClick="FilterTextbox_Changed" />

Thanks,
Jayesh Goyani

[Tim]

Opps, I may have not properly explained.  By ujsing diplay:none;, the button still shows, approximatly 4px wide.  The src code I submitted above was just to show you how the button is still being rendered due to another class.

[Kostadin]

Hello Tim,

I prepared a small sample where I set display:none and the button is not shown. Give it a try and let me know how it differs from your real setup.

All the best,
Kostadin
the Telerik team

[Tim]

Well, you're right, it does hide the button in your version.  There's alot going on in mine, MasterPage, this is a user control so I'm going to have to do alot of digging, but thx for the proof!