how to filter a grid manually from external textbox?..

[Amit]

Hey everyone,

i have a radgrid.I want to filter radgrid manually.i have a radcombobox consisting of name of columns of radgrid.and a textbox and a search button.I want to filter grid according to the value selected in the combobox and written in textbox on search button click event.for every column name present in the combobx.how to achieve this?..Is there a demo explaining this kind of scenario?...

thanks
Amit

[Princy]

Hello Amit,

Check out the following sample code which shows how to achieve this.

ASPX:

<telerik:RadComboBox ID="RadComboBox1" runat="server">
    <Items>
        <telerik:RadComboBoxItem Text="EmployeeID" />
        <telerik:RadComboBoxItem Text="FirstName" />
    </Items>
</telerik:RadComboBox>
<br />
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<br />
<asp:Button ID="Button1" runat="server" Text="Search" OnClientClick="search(this,event);" />
<br />
<telerik:RadGrid ID="RadGrid1"  runat="server" DataSourceID="SqlDataSource1" AllowFilteringByColumn="true">
    <MasterTableView >
        <Columns>
            <telerik:GridBoundColumn DataField="EmployeeID" HeaderText="EmployeeID" UniqueName="EmployeeID">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="FirstName" HeaderText="FirstName" UniqueName="FirstName">
            </telerik:GridBoundColumn>
         </Columns>
    </MasterTableView>
</telerik:RadGrid>

Java Script:

<script type="text/javascript">
   function search(sender, eventArgs) {
        eventArgs.cancelBubble = true;
        eventArgs.returnValue = false;
        if (eventArgs.stopPropagation) {
            eventArgs.stopPropagation();
            eventArgs.preventDefault();
        }
        var masterTableView = $find("<%= RadGrid1.ClientID %>").get_masterTableView();
        var combo = $find('<%=RadComboBox1.ClientID %>');
        var textbox = document.getElementById("TextBox1");
        var uniqueName = combo.get_selectedItem().get_text(); // setting Column UniqueName for the filtering TextBox
        masterTableView.filter(uniqueName, textbox.value, Telerik.Web.UI.GridFilterFunction.Contains);
    }
</script>

Thanks,
Princy.

[Amit]

hey Princy,

I am doing something like this--

protected void btnSearch_Click(object sender, EventArgs e)
       {
           if (RadComboBox1.SelectedItem.Text == ("Email TempName") && txtSearch.Text != null)
           {
               RadGrid1.DataSource = FilteredDataTable("SELECT * FROM [Entry] Where Email_TemplateName LIKE '" + txtSearch.Text + "%'");
           }
           if (RadComboBox1.SelectedItem.Text == ("Mail Subject") && txtSearch != null)
           {
               RadGrid1.DataSource = FilteredDataTable("SELECT * FROM [Entry] Where Mail_Subject LIKE '" + txtSearch.Text + "%'");
           }
       }

but the thing is like do i have to link this in some way to the need data source event?..b'coz i got the filtered values in the my datatable but then the grid remains same as before without filter.this is my need data source event--

protected void RadGrid1_NeedDataSource(object source, Telerik.Web.UI.GridNeedDataSourceEventArgs e)
        {
            RadGrid1.DataSource = GetDataTable("SELECT UID, Email_TemplateName as 'Name', Mail_Text as 'Mail text',Mail_Subject as 'Mail Subject' FROM Entry");
        }

thanks
Amit

[Amit]

Hey Princy,

 i tried your code,but its not working for me!!

<telerik:RadComboBox ID="RadComboBox1" runat="server" EmptyMessage="Select search type"
                                ToolTip="Select search type" Skin="Hay">
                                <Items>
                                    <telerik:RadComboBoxItem Text="Select your search type..." />
                                    <telerik:RadComboBoxItem Text="Email_TemplateName" />
                                    <telerik:RadComboBoxItem Text="Mail_Subject" />
                                </Items>
                            </telerik:RadComboBox>

<asp:TextBox ID="txtSearch" runat="server" /><span style="color: Red; font-size: small">*</span>

<asp:Button ID="btnSearch" runat="server" Style="float: left; color: black; font-weight: bold"
                                Text="Search" OnClientClick="search(this,event);" />

function search(sender, eventArgs)
            {
                   eventArgs.cancelBubble = true;
                   eventArgs.returnValue = false;
                   if (eventArgs.stopPropagation) {
                   eventArgs.stopPropagation();
                   eventArgs.preventDefault();
                   }
                   var masterTableView = $find("<%= RadGrid1.ClientID %>").get_masterTableView();
                   var combo = $find('<%=RadComboBox1.ClientID %>');
                   var textbox = document.getElementById("txtSearch");
                   var uniqueName = combo.get_selectedItem().get_text(); // setting Column UniqueName for the filtering TextBox
                   masterTableView.filter(uniqueName, textbox.value, Telerik.Web.UI.GridFilterFunction.Contains);
            }

<telerik:RadGrid ID="RadGrid1" runat="server" Skin="Hay" AllowPaging="True" AllowSorting="True"
                    GridLines="None" PagerStyle-AlwaysVisible="true" OnPreRender="RadGrid1_PreRender"
                    EnableViewState="true" OnNeedDataSource="RadGrid1_NeedDataSource" AllowFilteringByColumn="true">
                    <MasterTableView TableLayout="Fixed" DataKeyNames="UID">
                        <RowIndicatorColumn>
                            <HeaderStyle Width="20px"></HeaderStyle>
                        </RowIndicatorColumn>
                        <ExpandCollapseColumn>
                            <HeaderStyle Width="20px"></HeaderStyle>
                        </ExpandCollapseColumn>
                    </MasterTableView>
                    <ClientSettings AllowColumnsReorder="true" ReorderColumnsOnClient="true" EnableRowHoverStyle="true">
                        <Selecting AllowRowSelect="true" />
                    </ClientSettings>
                </telerik:RadGrid>

Thanks
Amit

[Amit]

hey Princy,

my code is working fine now,after calling RadGrid.Rebind() method.but i am curious to achieve this using the javascript function you gave..its not working for me.The above reply shows my code.

[Tsvetina]

Hi Amit,

Could you please elaborate a little more on the problem? Are there any javascript errors? What happens when you debug the javascript which does not get you the desired result?

The code provided is correct for the default case, so it should be working if you share the same set up as in Princy's sample code. Please find a runnable project attached using the exact same javascript which was previously posted.

All the best,
Tsvetina
the Telerik team