RadGrid Filter with Template column

1 posts, 0 answers
  1. Rajeesh
    Rajeesh avatar
    1 posts
    Member since:
    Nov 2012

    Posted 26 Jun 2017 Link to this post

    Hello Team,

    I created a Rad grid with a GridBoundColumn which is assigned a DateTime column. I have the allowFilterOnColumns= True.

    Since it is a template column i have added a RadDatePicker as said in the demo of basic template filtering.

    But the filter is not working.

    Here is the code i have now.

    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="GridwithFilter.aspx.vb" Inherits="WebApplication1.GridwithFilter" %>
     
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
     
    <!DOCTYPE html>
     
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <telerik:RadScriptManager ID="rdsm1" runat="server"></telerik:RadScriptManager>
                <telerik:RadGrid ID="rgdFilter" runat="server" AutoGenerateColumns="false" AllowFilteringByColumn="true">
                    <MasterTableView>
                        <Columns>
                            <telerik:GridTemplateColumn HeaderText="Product Name" UniqueName="ProductNameColumn">
                                <ItemTemplate>
                                    <asp:Label ID="lblProduct" runat="server" Text='<%# Eval("ProductName") %>'></asp:Label>
                                </ItemTemplate>
                            </telerik:GridTemplateColumn>
                            <telerik:GridDateTimeColumn DataField="OrderDate" HeaderText="OrderDate" FilterControlWidth="110px"
                                SortExpression="OrderDate" PickerType="DatePicker" EnableTimeIndependentFiltering="true"
                                DataFormatString="{0:MM/dd/yyyy}">
                            </telerik:GridDateTimeColumn>
                             
                            <telerik:GridBoundColumn UniqueName="ShippedDate" DataField="ShippedDate" HeaderText="Shipped date"
                            DataFormatString="{0:d}" HeaderStyle-Width="100px">
                            <FilterTemplate>
                                <telerik:RadDatePicker RenderMode="Lightweight" ID="ShippedDatePicker" runat="server" Width="100px" ClientEvents-OnDateSelected="DateSelected"
                                    DbSelectedDate='<%# SetShippedDate(Container) %>' />
                                <telerik:RadScriptBlock ID="RadScriptBlock2" runat="server">
                                    <script type="text/javascript">
                                        function DateSelected(sender, args) {
                                            var tableView = $find("<%# TryCast(Container, GridItem).OwnerTableView.ClientID %>");
      
                                        var date = FormatSelectedDate(sender);
      
                                        tableView.filter("ShippedDate", date, "EqualTo");
                                    }
                                    function FormatSelectedDate(picker) {
                                        var date = picker.get_selectedDate();
                                        var dateInput = picker.get_dateInput();
                                        var formattedDate = dateInput.get_dateFormatInfo().FormatDate(date, dateInput.get_displayDateFormat());
      
                                        return formattedDate;
                                    }
                                    </script>
                                </telerik:RadScriptBlock>
                            </FilterTemplate>
                        </telerik:GridBoundColumn>
                        </Columns>
                    </MasterTableView>
                </telerik:RadGrid>
            </div>
        </form>
    </body>
    </html>

     

    and My Code behind

    Imports Telerik.Web.UI
     
    Public Class GridwithFilter
        Inherits System.Web.UI.Page
     
        Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
            If Not IsPostBack Then
     
            End If
        End Sub
     
        Private Sub rgdFilter_NeedDataSource(sender As Object, e As GridNeedDataSourceEventArgs) Handles rgdFilter.NeedDataSource
            Dim dt As New DataTable()
            dt.Columns.Add("ProductName")
            dt.Columns.Add("ShippedDate", GetType(Date))
            Dim dr As DataRow
            dr = dt.NewRow()
            dr("ProductName") = "Product 1"
            dr("ShippedDate") = DateTime.Now
            dt.Rows.Add(dr)
     
            dr = dt.NewRow()
            dr("ProductName") = "Product 2"
            dr("ShippedDate") = DateTime.Now.AddMonths(5)
            dt.Rows.Add(dr)
     
            rgdFilter.DataSource = dt
        End Sub
        Protected Function SetShippedDate(ByVal container As GridItem) As System.Nullable(Of DateTime)
            If container.OwnerTableView.GetColumn("ShippedDate").CurrentFilterValue = String.Empty Then
                Return New System.Nullable(Of DateTime)()
            Else
                Return DateTime.Parse(container.OwnerTableView.GetColumn("ShippedDate").CurrentFilterValue)
            End If
        End Function
    End Class

     

    Regards

    Rajesh

Back to Top