Creating/Customize the filter radgrid

[Pedro]

Hi Telerik Team,

I wanna know if the textbox of filter put out of the grid.

Please help me, thanks to all telerik team!

[Princy]

Hello Pedro,

One way to achieve this functionality is by adding FilterExpression in SqlDataSource control. Now pass the TextBox's Text in the FilterParameters of the SqlDataSource which provides the data to the RadGrid. Following mark-up shows similar approach.

ASPX:

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

 <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
        SelectCommand="SELECT [EmployeeID], [FirstName] FROM [Employees] "
        FilterExpression="FirstName LIKE '%{0}%'" >
       <FilterParameters>
            <asp:ControlParameter ControlID="TextBox1" PropertyName="Text" />
        </FilterParameters>
</asp:SqlDataSource>

Or you can refer the following code library which explains how to filter the records in RadGrid on key press from a textbox outside of the grid.
Filter RadGrid on external textbox key press

Thanks,
Princy.

[Pedro]

Hi Princy, thanks a lot but I set the columns and datasource from the codebehind.

I did cutomize the filter and make the search on the Enter key press. It is excelent!, but the searches no work good in all occasions.
There are any way that put the textbox of filter on the columns names of the radgrid?.

Respect to Popup editform, this popup can fire through other button?, thanks for all.

[Tsvetina]

Hello Pedro,

I am attaching a sample project demonstrating one way to achieve the functionality described by you. Please, check if this covers all your requirements.

As for the popup edit form - it is the same like with the other edit forms, it is shown on switching an item (row) into edit mode, no matter how this is done (using CommandItem, a GridEditColumn, etc.). You can find more information on using a popup edit form in this help topic.

Kind regards,
Tsvetina
the Telerik team

[Pedro]

Hi Admin, thanks,
My project is something same how you make the example.

My requirements are if the textbox for the filter can be on of the columnname, out of the grid.
Other thing were if the mastertableview can be fire from other button that not is "Add new record".

Thanks for your help.

[Princy]

Hello Pedro,

You can attach 'onkeydown' client event to the TextBox(which is outside grid) like below.

ASPX:

<asp:TextBox ID="TextBox1" runat="server" onkeydown="doFilter(this,event)"></asp:TextBox>

Then in that event handler directly set the ColumnUniqueName for which you are using that filtering TextBox.

Java Script:

<script type="text/javascript">
    function doFilter(sender, eventArgs) {
        if (eventArgs.keyCode == 13) {
            eventArgs.cancelBubble = true;
            eventArgs.returnValue = false;
            if (eventArgs.stopPropagation) {
                eventArgs.stopPropagation();
                eventArgs.preventDefault();
            }
            var masterTableView = $find("<%= RadGrid1.ClientID %>").get_masterTableView();
            var uniqueName = "FirstName"; // set Column UniqueName for the filtering TextBox
            masterTableView.filter(uniqueName, sender.value, Telerik.Web.UI.GridFilterFunction.Contains);
        }
    }
</script>

And try the following code to open an insert form in external button click .

C#:

protected void button1_Click(object sender, EventArgs e)
   {
       RadGrid1.MasterTableView.IsItemInserted = true;
       RadGrid1.Rebind();
   }

Thanks,
Princy.

[Pedro]

Hi Princy thanks for your response.

mmm, now I have the page like this:

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="GridTemplate.aspx.cs" Inherits="WebApplication1.GridTemplate" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        </telerik:RadScriptManager>
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="rgvPrueba">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="rgvPrueba" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>

        <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
            <script type="text/javascript">
                function doFilter(sender, eventArgs) {
                    if (eventArgs.keyCode == 13) {
                        eventArgs.cancelBubble = true;
                        eventArgs.returnValue = false;
                        if (eventArgs.stopPropagation) {
                            eventArgs.stopPropagation();
                            eventArgs.preventDefault();
                        }
                        var masterTableView = $find("<%= rgvPrueba.ClientID %>").get_masterTableView();
                        var uniqueName = "gtcCodigo"; // set Column UniqueName for the filtering TextBox
                        masterTableView.filter(uniqueName, sender.value, Telerik.Web.UI.GridFilterFunction.Contains);
                    }
                }
            </script>
        </telerik:RadCodeBlock>
<table width="100%">
    <tr>
        <td></td>
    </tr>
    <tr>
        <td>
            <telerik:RadGrid ID="rgvPrueba" runat="server" AllowSorting="True"
                AutoGenerateColumns="False" onneeddatasource="rgvPrueba_NeedDataSource"
                GridLines="None">
                <MasterTableView DataKeyNames="Codigo">
<CommandItemSettings ExportToPdfText="Export to Pdf"></CommandItemSettings>
                    <Columns>
                        <telerik:GridImageColumn ImageUrl="Imagenes/seleccionar.png">

                        </telerik:GridImageColumn>
                        <telerik:GridTemplateColumn UniqueName="gtcCodigo">
                            <HeaderTemplate>
                                <table>
                                    <tr>
                                        <td>
                                            <%--<input type="text" id="txt_fcodigo" name="txt_fcodigo" style="width:inherit"/>--%>
                                            <asp:TextBox ID="txt_fcodigo" runat="server" onkeydown="doFilter(this,event)" ></asp:TextBox>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td align="center">
                                            <asp:LinkButton ID="SortCodigo" CommandName="Sort" CommandArgument="Codigo" runat="server" Text="Código"></asp:LinkButton>
                                        </td>
                                    </tr>
                                </table>
                            </HeaderTemplate>
                            <ItemTemplate>
                                <%# DataBinder.Eval(Container.DataItem, "Codigo")%>
                            </ItemTemplate>
                        </telerik:GridTemplateColumn>
                        <telerik:GridTemplateColumn UniqueName="gtcNombre">
                            <HeaderTemplate>
                                <table>
                                    <tr>
                                        <td><input type="text" id="txt_fnombre" name="txt_fnombre" style="width:inherit" /></td>
                                    </tr>
                                    <tr>
                                        <td align="center">
                                            <asp:LinkButton ID="SortNombre" CommandName="Sort" CommandArgument="Nombre" runat="server" Text="Nombre"></asp:LinkButton>
                                        </td>
                                    </tr>
                                </table>
                            </HeaderTemplate>
                            <ItemTemplate>
                                <%# DataBinder.Eval(Container.DataItem, "Nombre")%>
                            </ItemTemplate>
                        </telerik:GridTemplateColumn>
                        <telerik:GridTemplateColumn UniqueName="gtcDescripcion">
                            <HeaderTemplate>
                                <table>
                                    <tr>
                                        <td><input type="text" id="txt_fDescripcion" name="txt_fDescripcion" style="width:inherit"/></td>
                                    </tr>
                                    <tr>
                                        <td align="center">
                                            <asp:LinkButton ID="SortDescripcion" CommandName="Sort" CommandArgument="Descripcion" runat="server" Text="Descripción"></asp:LinkButton>
                                        </td>
                                    </tr>
                                </table>
                            </HeaderTemplate>
                            <ItemTemplate>
                                <%# DataBinder.Eval(Container.DataItem, "Descripcion")%>
                            </ItemTemplate>
                        </telerik:GridTemplateColumn>
                        <telerik:GridTemplateColumn UniqueName="gtcValor">
                            <HeaderTemplate>
                                <table>
                                    <tr>
                                        <td><input type="text" id="txt_fValor" name="txt_fValor" style="width:inherit"/></td>
                                    </tr>
                                    <tr>
                                        <td align="center">
                                            <asp:LinkButton ID="SortValor" CommandName="Sort" CommandArgument="Valor" runat="server" Text="Valor"></asp:LinkButton>
                                        </td>
                                    </tr>
                                </table>
                            </HeaderTemplate>
                            <ItemTemplate>
                                <%# DataBinder.Eval(Container.DataItem, "Valor")%>
                            </ItemTemplate>
                        </telerik:GridTemplateColumn>
                        <telerik:GridTemplateColumn UniqueName="gtcEstado">
                            <HeaderTemplate>
                                <table>
                                    <tr>
                                        <td><input type="text" id="txt_fEstado" name="txt_fEstado" style="width:inherit"/></td>
                                    </tr>
                                    <tr>
                                        <td align="center">
                                            <asp:LinkButton ID="SortEstado" CommandName="Sort" CommandArgument="Estado" runat="server" Text="Estado"></asp:LinkButton>
                                        </td>
                                    </tr>
                                </table>
                            </HeaderTemplate>
                            <ItemTemplate>
                                <%# DataBinder.Eval(Container.DataItem, "Estado")%>
                            </ItemTemplate>
                        </telerik:GridTemplateColumn>
                    </Columns>
                </MasterTableView>
            </telerik:RadGrid>
        </td>
    </tr>
    <tr>
        <td></td>
    </tr>
</table>
</asp:Content>

but don't filter the column

Thanks to all

[Princy]

Hello Pedro,

You need to set AllowFilteringByColumn property of RadGrid as true to filter the column.

Thnaks,
Princy.

[Pedro]

Hi Princy, but my filters are the textbox that I have in the HeaderTemplate of the column, for example in the first column my filter is txt_fcodigo
In this textbox i call doFilter functionfor the filtering the radgrid but not do it.

I don't wanna use the default radgridfilter, Can I filter the columns from other textbox?}

Thanks to all!

[Princy]

Hello Pedro,

If you dont want the default filter item, you can hide it from code behind like below.

C#:

protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
   {
       if (e.Item is GridFilteringItem)
       {
           GridFilteringItem filterItem = (GridFilteringItem)e.Item;
           filterItem.Display = false;
       }
   }

Thanks,
Princy.

[Pedro]

Hi Princy, then I should set the property AllowFilterByColumn as true and hide the default filter and then my doFilter function can filtering the column gtcCodigo?

Thanks for all Princy, in this moment can't prove your solution but thanks for the response.

See you later

[Pedro]

Hi to all.
Don't filtering :'(

Debugging the doFilter function the parameters are for:
uniquename = "gtcCodigo"
sender.value = The value of the textbox for ex: 2
and the last parameter is the filter Contains

I made a test and this not func because i have columntamplate, tha columntamplate doesn't has Datafield... I prove with a BoundColumn and the function filter the column very good!

Any idea what can I  do the filtering in the columntemplate?

Thanks

[Princy]

Hello Pedro,

I guess you want to filter a TemplateColumn. If so you can set the DataField property of the template column to the field you want to use for filtering. There is one documentation regarding this. Please go through this for more details.
Implementing filtering for template/custom columns

Thanks,
Princy.

[Pedro]

Hi Princy, thanks a lot

for all the solution will be this:
This is the function

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


                eventArgs.cancelBubble = true;
                eventArgs.returnValue = false;
                if (eventArgs.stopPropagation) {
                    eventArgs.stopPropagation();
                    eventArgs.preventDefault();
                }

                var tableView = $find("<%= rgvParametros.ClientID %>").get_masterTableView();
                var ordenamiento = "";
                if (columna == "Codigo") {
                    ordenamiento = "EqualTo";
                } else {
                    ordenamiento = "Contains";
                }
                tableView.filter(columna, sender.value, ordenamiento);
            }
        }

and the columntemplate will be

<telerik:GridTemplateColumn DataField="Codigo" HeaderText="Codigo" UniqueName="Codigo"  AllowFiltering="True">
    <HeaderTemplate >
        <table>
            <tr>
                <td>
                    <asp:TextBox ID="txt_fcodigo" runat="server" onkeydown="doFilter(this,event,'Codigo')" ></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td align="center">
                     <asp:LinkButton ID="SortCodigoP" CommandName="Sort" CommandArgument="Codigo" runat="server" Text="Código"></asp:LinkButton>
                </td>
            </tr>
      </table>
   </HeaderTemplate>
   <ItemTemplate>
        <%# Eval("Codigo")%>
   </ItemTemplate>
</telerik:GridTemplateColumn>

Thanks Princy, thanks to all!.