Filter By Day Of Week

[David Beck]

I have a Column thats a DateTime Column. I want to filter by the Day of the week. Of course if i keep the column as a DateTime column i get an error about 'Thu' not being a valid datetime format.

I tried making it a regular DataBound column with a DataFormat string but still no luck. My filtering is being done via JS

Heres the code located in my User Control

<%@ Control Language="VB" AutoEventWireup="false" CodeFile="AvailableClasses.ascx.vb"
    Inherits="UserControls_AvailableClasses" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<table>
    <tr>
        <th align="right">
            City:
        </th>
        <td align="left">
            <telerik:RadComboBox ID="ddlLocationCities" Width="100%" Skin="Web20" AllowCustomText="true"
                EmptyMessage="--Select A City--" MarkFirstMatch="true" Filter="StartsWith" runat="server"
                Sort="Ascending" OnClientSelectedIndexChanged="LocationCityIndexChanged">
                <Items>
                    <telerik:RadComboBoxItem Text="All" />
                </Items>
            </telerik:RadComboBox>
            <telerik:RadScriptBlock ID="RadScriptBlock2" runat="server">

                <script type="text/javascript">
                    function LocationCityIndexChanged(sender, args) {
                        var grid = $find("<%= ClassGrid.ClientID %>");
                        var tableView = grid.get_masterTableView();
                        tableView.filter("Location_DisplayCity", args.get_item().get_value(), "EqualTo");
                    }
                </script>

            </telerik:RadScriptBlock>
        </td>
    </tr>
    <tr>
        <th align="right">
            Time:
        </th>
        <td align="left">
            <telerik:RadComboBox ID="ddlClassTime" Width="100%" Skin="Web20" AllowCustomText="true"
                EmptyMessage="--Select A Time--" MarkFirstMatch="true" Filter="StartsWith" runat="server"
                Sort="Ascending" OnClientSelectedIndexChanged="ClassTimeIndexChanged">
                <Items>
                    <telerik:RadComboBoxItem Text="All" />
                </Items>
            </telerik:RadComboBox>
            <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">

                <script type="text/javascript">
                    function ClassTimeIndexChanged(sender, args) {
                        var grid = $find("<%= ClassGrid.ClientID %>");
                        var tableView = grid.get_masterTableView();
                        tableView.filter("Class_Start_Time", args.get_item().get_value(), "EqualTo");
                    }
                </script>

            </telerik:RadScriptBlock>
        </td>
    </tr>
    <tr>
        <th align="right" style="white-space:nowrap;">
            Day of Week:
        </th>
        <td align="left">
            <telerik:RadComboBox ID="ddlDayOfWeek" Width="100%" Skin="Web20" AllowCustomText="true"
                EmptyMessage="--Select A Day--" MarkFirstMatch="true" Filter="StartsWith"
                runat="server" Sort="Ascending" OnClientSelectedIndexChanged="DayofWeekIndexChanged">
                <Items>
                    <telerik:RadComboBoxItem Text="All" />
                    <telerik:RadComboBoxItem Text="Sunday" Value="SUN" />
                    <telerik:RadComboBoxItem Text="Monday" Value="MON" />
                    <telerik:RadComboBoxItem Text="Tuesday" Value="TUE" />
                    <telerik:RadComboBoxItem Text="Wednesday" Value="WED" />
                    <telerik:RadComboBoxItem Text="Thursday" Value="Thu" />
                    <telerik:RadComboBoxItem Text="Friday" Value="Fri" />
                    <telerik:RadComboBoxItem Text="Saturday" Value="Sat" />
                </Items>
            </telerik:RadComboBox>
            <telerik:RadScriptBlock ID="RadScriptBlock3" runat="server">

                <script type="text/javascript">
                    function DayofWeekIndexChanged(sender, args) {
                        var grid = $find("<%= ClassGrid.ClientID %>");
                        var tableView = grid.get_masterTableView();
                        tableView.filter("tmp", args.get_item().get_value(), "Contains");
                    }
                </script>

            </telerik:RadScriptBlock>
        </td>
    </tr>
</table>
<telerik:RadGrid ID="ClassGrid" runat="server" AllowMultiRowSelection="false" AutoGenerateColumns="False"
    OnNeedDataSource="ClassGrid_NeedDataSource" OnDataBound="ClassGrid_DataBound"
    Skin="WebBlue" GridLines="Both" ShowGroupPanel="false" ShowHeader="true" OnItemDataBound="ClassGrid_ItemDataBound"
    AllowPaging="true" PageSize="10" AllowFilteringByColumn="true">
    <ExportSettings FileName="AvailableClassListExport" ExportOnlyData="true" OpenInNewWindow="True"
        HideStructureColumns="true">
    </ExportSettings>
    <MasterTableView Width="100%" CommandItemDisplay="TopAndBottom" PagerStyle-AlwaysVisible="true">
        <CommandItemSettings ShowAddNewRecordButton="false" ShowExportToExcelButton="false"
            ShowExportToCsvButton="false" ShowExportToWordButton="false" ShowExportToPdfButton="false" />
        <RowIndicatorColumn Visible="True">
        </RowIndicatorColumn>
        <Columns>
            <telerik:GridBoundColumn DataField="Class_ID" Display="false" HeaderText="ID">
            </telerik:GridBoundColumn>
            <telerik:GridDateTimeColumn UniqueName="Class_Date" DataField="Class_Date" Display="true"
                HeaderText="Date" AllowFiltering="true" PickerType="DatePicker" DataType="System.DateTime"
                DataFormatString="{0:ddd}">
            </telerik:GridDateTimeColumn>
            <telerik:GridBoundColumn UniqueName="tmp" DataField="Class_Date" Display="false"
                HeaderText="Date" AllowFiltering="true" DataFormatString="{0:ddd, MMM dd, yyyy}">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="Class_Start_Time" Display="false" HeaderText="Start Time"
                AllowFiltering="true">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="Class_End_Time" Display="false" HeaderText="End Time"
                AllowFiltering="true">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="Location_Name" Display="false" HeaderText="Location">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="Street_Address" Display="false" HeaderText="Address">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="City" Display="false" HeaderText="_City">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="FK_State_Code" Display="false" HeaderText="State">
            </telerik:GridBoundColumn>
            <telerik:GridDateTimeColumn DataField="Zip" Display="false" HeaderText="Zip">
            </telerik:GridDateTimeColumn>
            <telerik:GridBoundColumn DataField="Class_Status" Display="false" HeaderText="Status">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="isSpanish" Display="false" HeaderText="Spanish"
                AllowFiltering="true">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="Location_DisplayCity" Display="false" HeaderText="City"
                AllowFiltering="true">
            </telerik:GridBoundColumn>
            <telerik:GridTemplateColumn AllowFiltering="false" HeaderText="Class">
                <ItemTemplate>
                    <div style="float:left;padding: 0px 15px 0px 0px;font-weight:bold;">
                        <%#Eval("Class_Date", "{0:ddd, MMM dd, yyyy}")%>
                        <br />
                        <%#Container.DataItem("Class_Start_Time")%>
                        -
                        <%# Container.DataItem("Class_End_Time") %>
                        <br /><br /><br /><br /><br />
                    </div>
                    <div>
                        <span><b>
                            <%# Container.DataItem("Location_Name") %></b>
                            <%#IIf(Container.DataItem("isSpanish") = "Y", " (Spanish)", " (English)")%>
                            <br />
                            <%# Container.DataItem("Street_Address") %>
                            <br />
                            <%# Container.DataItem("City") %>,
                            <%# Container.DataItem("FK_State_Code") %>
                            <%# Container.DataItem("Zip") %>
                            <br />
                            <b>Cross Streets:</b>
                            <%# container.DataItem("Cross_Streets") %>
                            <br />
                            <!-- Map -->
                            <%#"<a href=""http://www.mapquest.com/maps?city=" + Container.DataItem("City") + "&state=" + Container.DataItem("FK_State_Code") + "&address=" + Container.DataItem("Street_Address") + "&zipcode=" + Container.DataItem("Zip") + "&country=US&CID=lfmaplink"" target=""_Blank"">Map</a>"%>
                            <!-- Seperator -->
                            |
                            <!-- Directions -->
                            <%#"<a href=""http://www.mapquest.com/maps?2c=" + Container.DataItem("City") + "&2s=" + Container.DataItem("FK_State_Code") + "&2a=" + Container.DataItem("Street_Address") + "&2z=" + Container.DataItem("Zip") + "&2y=US&Form=directions&CID=lfddlink"" target=""_Blank"">Directions</a>"%>
                            <br />
                            <br />
                        </span>
                    </div>
                </ItemTemplate>
            </telerik:GridTemplateColumn>
        </Columns>
    </MasterTableView>
    <ClientSettings ReorderColumnsOnClient="True" AllowDragToGroup="True" AllowColumnsReorder="True">
        <Selecting AllowRowSelect="True"></Selecting>
        <Resizing AllowRowResize="True" AllowColumnResize="True" EnableRealTimeResize="True"
            ResizeGridOnColumnResize="False"></Resizing>
    </ClientSettings>
    <GroupingSettings ShowUnGroupButton="true" />
    <PagerStyle Mode="NextPrevAndNumeric" Position="TopAndBottom" />
</telerik:RadGrid>

[Martin]

Hello David Beck,

Please note that this functionality is not supported out of the box. However you can implement your own custom filtering logic to achieve the desired functionality. For example you can have additional hidden column that stores the week day names and use that column to filter your grid. For demonstration purposes I have attached a small sample that utilizes this approach.

I hope this helps.

Best wishes,
Martin
the Telerik team