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

Filter By Day Of Week

1 Answer 96 Views
Grid
This is a migrated thread and some comments may be shown as answers.
David Beck
Top achievements
Rank 1
David Beck asked on 05 Oct 2010, 03:00 AM
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>

1 Answer, 1 is accepted

Sort by
0
Martin
Telerik team
answered on 08 Oct 2010, 09:25 AM
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
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
David Beck
Top achievements
Rank 1
Answers by
Martin
Telerik team
Share this question
or