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

radgrid date filter issue

4 Answers 188 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Devang
Top achievements
Rank 1
Devang asked on 01 Jun 2017, 08:23 PM

Hello All,  

    I have simple radgrid with to/from date filter option. But when I change the dates in the filter, its not updating the grid. Following is my simple code. I have tried everything in the tutorial, but no luck. Any help is appreciated. 

 

<telerik:RadGrid RenderMode="Lightweight" ID="rgScreening" runat="server" Width="100%" Enabled ="true" 
        FilterItemStyle-BackColor="#e6e6e6" FilterItemStyle-BorderStyle="Solid" OnPreRender="rgScreening_PreRender"
        OnItemCommand="rgScreening_ItemCommand">
        <HeaderStyle CssClass="gridViewHeader" />
        <PagerStyle Mode="NumericPages" CssClass="gridViewPager" />
        <ItemStyle CssClass="gridViewRow" />
        <AlternatingItemStyle CssClass="gridViewAltRow" />
        <SelectedItemStyle CssClass="gridViewSelected" />
        <MasterTableView AllowSorting="true" PageSize="10" AllowPaging="True" Width="100%" AutoGenerateColumns="false" CommandItemDisplay="None" 
            AllowFilteringByColumn="true">
        <CommandItemSettings ShowAddNewRecordButton="false" ShowRefreshButton="false" />            
        <Columns>
            <telerik:GridBoundColumn UniqueName="ProviderOrOwner" DataField="ProviderOrOwner" HeaderText="Provider/Owner">
                <FilterTemplate>
                    <telerik:RadComboBox RenderMode="Lightweight" runat="server" ID="rcbProviderOrOwner" 
                        SelectedValue='<%# ((GridItem)Container).OwnerTableView.GetColumn("ProviderOrOwner").CurrentFilterValue %>' 
                        OnClientSelectedIndexChanged="ProviderOrOwnerSelectedIndexChanged" Width="80px">
                        <Items>
                            <telerik:RadComboBoxItem runat="server" Text="All"/>
                            <telerik:RadComboBoxItem runat="server" Text="Provider" Value="Provider" />
                            <telerik:RadComboBoxItem runat="server" Text="Owner" Value="Owner" />
                        </Items>
                    </telerik:RadComboBox>
                    <telerik:RadScriptBlock ID="RadScriptBlock2" runat="server">
                        <script type="text/javascript">
                            function ProviderOrOwnerSelectedIndexChanged(sender, args) {
                                var tableView = $find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");
                                tableView.filter("ProviderOrOwner", args.get_item().get_value(), "EqualTo");
                            }
                        </script>
                    </telerik:RadScriptBlock>
                </FilterTemplate>
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn UniqueName="ScreeningDate" DataField="ScreeningDate" HeaderText="Screening Date" DataFormatString="{0:D}" >
            <FilterTemplate>
                <span style="width:50px; font-weight:bold; text-align:right">From</span>
                <telerik:RadDatePicker RenderMode="Lightweight" ID="FromScreeningDatePicker" runat="server" Width="120px" ClientEvents-OnDateSelected="FromDateSelected"
                MinDate='<%# Convert.ToDateTime("01/01/1900")%>' MaxDate='<%# Convert.ToDateTime(DateTime.Now.ToString("MM/dd/yyyy"))%>'
                DbSelectedDate='<%# startDate %>' FocusedDate="01/01/2016"
                 DateInput-ForeColor="Black" Calendar-CalendarTableStyle-BackColor="#cccccc" Calendar-BackColor="White" Calendar-HeaderStyle-BackColor="White" 
                Calendar-TitleStyle-BackColor="White" DateInput-BorderColor="Black"/> &nbsp;            
                <span style="width:50px; font-weight:bold; text-align:right">To</span>
                <telerik:RadDatePicker RenderMode="Lightweight" ID="ToScreeningDatePicker" runat="server"  Width="120px" ClientEvents-OnDateSelected="ToDateSelected"
                MinDate='<%# Convert.ToDateTime("01/01/1900")%>' MaxDate='<%# Convert.ToDateTime(DateTime.Now.ToString("MM/dd/yyyy"))%>'
                DbSelectedDate='<%# endDate %>' FocusedDate='<%# Convert.ToDateTime(DateTime.Now.ToString("MM/dd/yyyy"))%>'
                DateInput-ForeColor="Black" Calendar-CalendarTableStyle-BackColor="#cccccc" Calendar-BackColor="White" Calendar-HeaderStyle-BackColor="White" 
                Calendar-TitleStyle-BackColor="White" DateInput-BorderColor="Black"></telerik:RadDatePicker>
                <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
                    <script type="text/javascript">
                        function FromDateSelected(sender, args) {
                            var tableView = $find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");
                            var ToPicker = $find('<%# ((GridItem)Container).FindControl("ToScreeningDatePicker").ClientID %>');
                            var fromDate = FormatSelectedDate(sender);
                            var toDate = FormatSelectedDate(ToPicker);
                            tableView.filter("ScreeningDate", fromDate + " " + toDate, "Between");
                        }
                        function ToDateSelected(sender, args) {
                        var tableView = $find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");
                        var FromPicker = $find('<%# ((GridItem)Container).FindControl("FromScreeningDatePicker").ClientID %>');
                        var fromDate = FormatSelectedDate(FromPicker);
                        var toDate = FormatSelectedDate(sender);
                        var dtfilter = fromDate + "  " + toDate
                        tableView.filter("ScreeningDate", tfilter, "Between");
                    }
                    function FormatSelectedDate(picker) {
                        var date = picker.get_selectedDate();
                        var dateInput = picker.get_dateInput();
                        var formattedDate = dateInput.get_dateFormatInfo().FormatDate(date, "MM/dd/yyyy hh:mm:ss tt");
                        return formattedDate;
                    }
                    </script>
                </telerik:RadScriptBlock>
            </FilterTemplate>

        </telerik:GridBoundColumn>

</Columns>
        </MasterTableView>
    </telerik:RadGrid>

4 Answers, 1 is accepted

Sort by
0
Devang
Top achievements
Rank 1
answered on 01 Jun 2017, 08:28 PM

full grid cod is: 

<telerik:RadGrid RenderMode="Lightweight" ID="rgScreening" runat="server" Width="100%" Enabled ="true" 
        FilterItemStyle-BackColor="#e6e6e6" FilterItemStyle-BorderStyle="Solid" OnPreRender="rgScreening_PreRender"
        OnItemCommand="rgScreening_ItemCommand">
        <HeaderStyle CssClass="gridViewHeader" />
        <PagerStyle Mode="NumericPages" CssClass="gridViewPager" />
        <ItemStyle CssClass="gridViewRow" />
        <AlternatingItemStyle CssClass="gridViewAltRow" />
        <SelectedItemStyle CssClass="gridViewSelected" />
        <MasterTableView AllowSorting="true" PageSize="10" AllowPaging="True" Width="100%" AutoGenerateColumns="false" CommandItemDisplay="None" 
            AllowFilteringByColumn="true">
        <CommandItemSettings ShowAddNewRecordButton="false" ShowRefreshButton="false" />            
        <Columns>
            <telerik:GridBoundColumn UniqueName="ProviderOrOwner" DataField="ProviderOrOwner" HeaderText="Provider/Owner">
                <FilterTemplate>
                    <telerik:RadComboBox RenderMode="Lightweight" runat="server" ID="rcbProviderOrOwner" 
                        SelectedValue='<%# ((GridItem)Container).OwnerTableView.GetColumn("ProviderOrOwner").CurrentFilterValue %>' 
                        OnClientSelectedIndexChanged="ProviderOrOwnerSelectedIndexChanged" Width="80px">
                        <Items>
                            <telerik:RadComboBoxItem runat="server" Text="All"/>
                            <telerik:RadComboBoxItem runat="server" Text="Provider" Value="Provider" />
                            <telerik:RadComboBoxItem runat="server" Text="Owner" Value="Owner" />
                        </Items>
                    </telerik:RadComboBox>
                    <telerik:RadScriptBlock ID="RadScriptBlock2" runat="server">
                        <script type="text/javascript">
                            function ProviderOrOwnerSelectedIndexChanged(sender, args) {
                                var tableView = $find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");
                                tableView.filter("ProviderOrOwner", args.get_item().get_value(), "EqualTo");
                            }
                        </script>
                    </telerik:RadScriptBlock>
                </FilterTemplate>
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn UniqueName="ScreeningDate" DataField="ScreeningDate" HeaderText="Screening Date" DataFormatString="{0:D}" >
            <FilterTemplate>
                <span style="width:50px; font-weight:bold; text-align:right">From</span>
                <telerik:RadDatePicker RenderMode="Lightweight" ID="FromScreeningDatePicker" runat="server" Width="120px" ClientEvents-OnDateSelected="FromDateSelected"
                MinDate='<%# Convert.ToDateTime("01/01/1900")%>' MaxDate='<%# Convert.ToDateTime(DateTime.Now.ToString("MM/dd/yyyy"))%>'
                DbSelectedDate='<%# startDate %>' FocusedDate="01/01/2016"
                 DateInput-ForeColor="Black" Calendar-CalendarTableStyle-BackColor="#cccccc" Calendar-BackColor="White" Calendar-HeaderStyle-BackColor="White" 
                Calendar-TitleStyle-BackColor="White" DateInput-BorderColor="Black"/> &nbsp;            
                <span style="width:50px; font-weight:bold; text-align:right">To</span>
                <telerik:RadDatePicker RenderMode="Lightweight" ID="ToScreeningDatePicker" runat="server"  Width="120px" ClientEvents-OnDateSelected="ToDateSelected"
                MinDate='<%# Convert.ToDateTime("01/01/1900")%>' MaxDate='<%# Convert.ToDateTime(DateTime.Now.ToString("MM/dd/yyyy"))%>'
                DbSelectedDate='<%# endDate %>' FocusedDate='<%# Convert.ToDateTime(DateTime.Now.ToString("MM/dd/yyyy"))%>'
                DateInput-ForeColor="Black" Calendar-CalendarTableStyle-BackColor="#cccccc" Calendar-BackColor="White" Calendar-HeaderStyle-BackColor="White" 
                Calendar-TitleStyle-BackColor="White" DateInput-BorderColor="Black"></telerik:RadDatePicker>
                <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
                    <script type="text/javascript">
                        function FromDateSelected(sender, args) {
                            var tableView = $find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");
                            var ToPicker = $find('<%# ((GridItem)Container).FindControl("ToScreeningDatePicker").ClientID %>');
                            var fromDate = FormatSelectedDate(sender);
                            var toDate = FormatSelectedDate(ToPicker);
                            tableView.filter("ScreeningDate", fromDate + " " + toDate, "Between");
                        }
                        function ToDateSelected(sender, args) {
                        var tableView = $find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");
                        var FromPicker = $find('<%# ((GridItem)Container).FindControl("FromScreeningDatePicker").ClientID %>');
                        var fromDate = FormatSelectedDate(FromPicker);
                        var toDate = FormatSelectedDate(sender);
                        var dtfilter = fromDate + "  " + toDate
                        tableView.filter("ScreeningDate", tfilter, "Between");
                    }
                    function FormatSelectedDate(picker) {
                        var date = picker.get_selectedDate();
                        var dateInput = picker.get_dateInput();
                        var formattedDate = dateInput.get_dateFormatInfo().FormatDate(date, "MM/dd/yyyy hh:mm:ss tt");
                        return formattedDate;
                    }
                    </script>
                </telerik:RadScriptBlock>
            </FilterTemplate>
        </telerik:GridBoundColumn>
            <telerik:GridBoundColumn UniqueName="ScreeningType" DataField="ScreeningType" HeaderText="Screening Type">
                <FilterTemplate>
                    <telerik:RadComboBox Width="100px" RenderMode="Lightweight" runat="server" 
                        ID="rcbScreeningType" 
                        SelectedValue='<%# ((GridItem)Container).OwnerTableView.GetColumn("ScreeningType").CurrentFilterValue %>' 
                        OnClientSelectedIndexChanged="ScreeningTypeIndexChanged">
                        <Items>
                            <telerik:RadComboBoxItem runat="server" Text="All"/>
                            <telerik:RadComboBoxItem runat="server" Text="Monthly" Value="Monthly" />
                            <telerik:RadComboBoxItem runat="server" Text="Initial" Value="Initial" />
                            <telerik:RadComboBoxItem runat="server" Text="Update" Value="Update" />
                            <telerik:RadComboBoxItem runat="server" Text="Revalidation" Value="Revalidation" />
                        </Items>
                    </telerik:RadComboBox>
                    <telerik:RadScriptBlock ID="RadScriptBlock3" runat="server">
                        <script type="text/javascript">
                            function ScreeningTypeIndexChanged(sender, args) {
                                var tableView = $find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");
                                tableView.filter("ScreeningType", args.get_item().get_value(), "EqualTo");
                            }
                        </script>
                    </telerik:RadScriptBlock>
                </FilterTemplate>
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn UniqueName="ScreeningSource" DataField="ScreeningSource" HeaderText="Screening Source"  FilterControlWidth="15%">
                <FilterTemplate>
                    <telerik:RadComboBox Width="60px" RenderMode="Lightweight" runat="server" ID="rcbScreeningSource" SelectedValue='<%# ((GridItem)Container).OwnerTableView.GetColumn("ScreeningSource").CurrentFilterValue %>' OnClientSelectedIndexChanged="ScreeningSourceIndexChanged">
                        <Items>
                            <telerik:RadComboBoxItem runat="server" Text="All"/>
                            <telerik:RadComboBoxItem runat="server" Text="SSDMF" Value="SSDMF" />
                            <telerik:RadComboBoxItem runat="server" Text="OIG" Value="OIG" />
                            <telerik:RadComboBoxItem runat="server" Text="SAM" Value="SAM" />
                            <telerik:RadComboBoxItem runat="server" Text="DOH" Value="DOH" />
                        </Items>
                    </telerik:RadComboBox>
                    <telerik:RadScriptBlock ID="RadScriptBlock4" runat="server">
                        <script type="text/javascript">
                            function ScreeningSourceIndexChanged(sender, args) {
                                var tableView = $find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");
                                tableView.filter("ScreeningSource", args.get_item().get_value(), "EqualTo");
                            }
                        </script>
                    </telerik:RadScriptBlock>
                </FilterTemplate>
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn UniqueName="ScreeningResult" DataField="ScreeningResult" HeaderText="Results">
                <FilterTemplate>
                    <telerik:RadComboBox Width="80px" RenderMode="Lightweight" runat="server" ID="rcbScreeningResult" 
                        SelectedValue='<%# ((GridItem)Container).OwnerTableView.GetColumn("ScreeningResult").CurrentFilterValue %>' 
                        OnClientSelectedIndexChanged="ScreeningResultIndexChanged">
                        <Items>
                            <telerik:RadComboBoxItem runat="server" Text="All"/>
                            <telerik:RadComboBoxItem runat="server" Text="Match" Value="Match Found" />
                            <telerik:RadComboBoxItem runat="server" Text="No Match" Value="No Match Found" />
                        </Items>
                    </telerik:RadComboBox>
                    <telerik:RadScriptBlock ID="RadScriptBlock5" runat="server">
                        <script type="text/javascript">
                            function ScreeningResultIndexChanged(sender, args) {
                                var tableView = $find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");
                                tableView.filter("ScreeningResult", args.get_item().get_value(), "EqualTo");
                            }
                        </script>
                    </telerik:RadScriptBlock>
                </FilterTemplate>
            </telerik:GridBoundColumn>
        </Columns>
        </MasterTableView>
    </telerik:RadGrid>

0
Accepted
Eyup
Telerik team
answered on 06 Jun 2017, 06:29 AM
Hello Devang,

Please make sure that you are not using the DataBind() method to bind the grid. Performing complex grid operations such as Inserting, Deleting, Updating, Hierarchy relations, Grouping, Exporting, Paging, Sorting, Filtering, etc. require accommodating appropriate database operations.  Therefore, we suggest you to avoid Simple Databinding and strongly recommend the use of more advanced databinding methods, which automatically handle the aforementioned functions:

Declarative DataSource (DataSourceID property)
Programmatic Data Binding (NeedDataSource event, + DetailTableDataBind for hierarchy). You should set the DataSource property ONLY within these event handlers.


Instead of using a template, you can achieve this requirement using a GridDateTimeColumn with the following built-in properties:
<telerik:GridDateTimeColumn ... EnableRangeFiltering="true" EnableTimeIndependentFiltering="true">

And if you want to access the generated controls in the code-behind, you can check the approach suggested in the following post:
http://www.telerik.com/forums/basic-filtering-datetime-range#J6au2nck4EKUQCxcC-8u9g

I hope this will prove helpful.

Regards,
Eyup
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Devang
Top achievements
Rank 1
answered on 07 Jun 2017, 05:22 PM
Thank You so much for the reply, I am checking it. 
0
Devang
Top achievements
Rank 1
answered on 08 Jun 2017, 04:14 PM

Ok, so I figured out. In my case, data returning from sp was somehow varchar that's y radgrid was not able to filter/compare dates. I changed them to datetime n now it filters. 

 

Also, thank you for your answer. I am now using needdatasource event instead of databind. 

Tags
Grid
Asked by
Devang
Top achievements
Rank 1
Answers by
Devang
Top achievements
Rank 1
Eyup
Telerik team
Share this question
or