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

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

5 Answers 641 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Amit
Top achievements
Rank 1
Amit asked on 08 Nov 2010, 10:38 AM
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

5 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 2
answered on 08 Nov 2010, 11:06 AM
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.
0
Amit
Top achievements
Rank 1
answered on 08 Nov 2010, 11:34 AM
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
0
Amit
Top achievements
Rank 1
answered on 08 Nov 2010, 11:55 AM
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
0
Amit
Top achievements
Rank 1
answered on 10 Nov 2010, 05:39 AM
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.
0
Tsvetina
Telerik team
answered on 10 Nov 2010, 03:39 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Tags
Grid
Asked by
Amit
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 2
Amit
Top achievements
Rank 1
Tsvetina
Telerik team
Share this question
or