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

Filter radgrid based on datepicker

1 Answer 204 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Fulufhelo
Top achievements
Rank 1
Fulufhelo asked on 30 Sep 2015, 07:12 AM

Hi Telerik team,

 

I am trying to filter date column on my radgrid by the following RadDatePicker:

<label>Start Date:</label>
        </div>
                                        <telerik:RadDatePicker ID="RadDatePicker1" Runat="server" AutoPostBack="True" Culture="en-ZA" MinDate="2015-01-01" SelectedDate="2015-01-01" Skin="BlackMetroTouch">
<Calendar UseRowHeadersAsSelectors="False" UseColumnHeadersAsSelectors="False" EnableWeekends="True" FastNavigationNextText="&amp;lt;&amp;lt;" Skin="BlackMetroTouch"></Calendar>

<DateInput DisplayDateFormat="yyyy/MM/dd" DateFormat="yyyy/MM/dd" LabelWidth="40%" AutoPostBack="True" DisplayText="2015/01/01" SelectedDate="2015-01-01" value="2015/01/01">
<EmptyMessageStyle Resize="None"></EmptyMessageStyle>

<ReadOnlyStyle Resize="None"></ReadOnlyStyle>
<FocusedStyle Resize="None"></FocusedStyle>
<DisabledStyle Resize="None"></DisabledStyle>
<InvalidStyle Resize="None"></InvalidStyle>
<HoveredStyle Resize="None"></HoveredStyle>
<EnabledStyle Resize="None"></EnabledStyle>
</DateInput>
<DatePopupButton ImageUrl="" HoverImageUrl=""></DatePopupButton>
            </telerik:RadDatePicker>
        <div class="form-group">
        <label>End Date</label>
            </div>

                            <telerik:RadDatePicker ID="RadDatePicker2" Runat="server" AutoPostBack="True" Culture="en-ZA" MinDate="2015-01-01" SelectedDate="2015-01-01" Skin="BlackMetroTouch">
<Calendar UseRowHeadersAsSelectors="False" UseColumnHeadersAsSelectors="False" EnableWeekends="True" FastNavigationNextText="&amp;lt;&amp;lt;" Skin="BlackMetroTouch"></Calendar>

<DateInput DisplayDateFormat="yyyy/MM/dd" DateFormat="yyyy/MM/dd" LabelWidth="40%" AutoPostBack="True" DisplayText="2015/01/01" SelectedDate="2015-01-01" value="2015/01/01">
<EmptyMessageStyle Resize="None"></EmptyMessageStyle>

<ReadOnlyStyle Resize="None"></ReadOnlyStyle>
<FocusedStyle Resize="None"></FocusedStyle>
<DisabledStyle Resize="None"></DisabledStyle>
<InvalidStyle Resize="None"></InvalidStyle>
<HoveredStyle Resize="None"></HoveredStyle>
<EnabledStyle Resize="None"></EnabledStyle>
</DateInput>

 And the following is my RadGrid:

 

<telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="SqlSalesReport" Skin="BlackMetroTouch" AllowFilteringByColumn="True">
                <MasterTableView  EnableHierarchyExpandAll="true" AutoGenerateColumns="False" DataSourceID="SqlSalesReport" DataKeyNames="Vin">
                    <DetailTables>
                        <telerik:GridTableView  EnableHierarchyExpandAll="true" runat="server" DataSourceID="SqlParts" DataKeyNames="Vin" AutoGenerateColumns="False" AllowFilteringByColumn="False">
                            <ParentTableRelation>
                                <telerik:GridRelationFields DetailKeyField="Vin" MasterKeyField="Vin" />
                            </ParentTableRelation>
                                <Columns>
                                    <telerik:GridBoundColumn SortExpression="PartNumber" HeaderText="Part Number" HeaderButtonType="TextButton"
                                        DataField="PartNumber" UniqueName="PartNumber">
<ColumnValidationSettings>
<ModelErrorMessage Text=""></ModelErrorMessage>
</ColumnValidationSettings>
                           
                                    </telerik:GridBoundColumn>
                                    <telerik:GridBoundColumn SortExpression="CaptureDate" HeaderText="Capture Date" HeaderButtonType="TextButton"
                                        DataField="CaptureDate" UniqueName="CaptureDate"  DataFormatString="{0:D}">
                                    <ColumnValidationSettings>
                                    <ModelErrorMessage Text=""></ModelErrorMessage>
                                    </ColumnValidationSettings>
                                        <FilterTemplate>
                            From
                        <telerik:RadDatePicker ID="FromOrderDatePicker" runat="server" Width="140px" ClientEvents-OnDateSelected="FromDateSelected"
                            MinDate="07-04-1996" MaxDate="05-06-1998" FocusedDate="07-04-1996" DbSelectedDate='<%# startDate %>' />
                            to
                        <telerik:RadDatePicker ID="ToOrderDatePicker" runat="server" Width="140px" ClientEvents-OnDateSelected="ToDateSelected"
                            MinDate="07-04-1996" MaxDate="05-06-1998" FocusedDate="05-06-1998" DbSelectedDate='<%# endDate %>' />
                            <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
                                <script type="text/javascript">
                                    function FromDateSelected(sender, args) {
                                        var tableView = $find("<%# TryCast(Container,GridItem).OwnerTableView.ClientID %>");
                                        var ToPicker = $find('<%# TryCast(Container, GridItem).FindControl("ToOrderDatePicker").ClientID %>');

                                        var fromDate = FormatSelectedDate(sender);
                                        var toDate = FormatSelectedDate(ToPicker);

                                        tableView.filter("CaptureDate", fromDate + " " + toDate, "Between");

                                    }
                                    function ToDateSelected(sender, args) {
                                        var tableView = $find("<%# TryCast(Container,GridItem).OwnerTableView.ClientID %>");
                                        var FromPicker = $find('<%# TryCast(Container, GridItem).FindControl("FromOrderDatePicker").ClientID %>');

                                        var fromDate = FormatSelectedDate(FromPicker);
                                        var toDate = FormatSelectedDate(sender);

                                        tableView.filter("CaptureDate", fromDate + " " + toDate, "Between");
                                    }
                                    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>
                                    <telerik:GridBoundColumn SortExpression="Quantity" HeaderText="Quantity" HeaderButtonType="TextButton"
                                        DataField="Quantity" UniqueName="Quantity">
<ColumnValidationSettings>
<ModelErrorMessage Text=""></ModelErrorMessage>
</ColumnValidationSettings>
                                    </telerik:GridBoundColumn>
                                    <telerik:GridBoundColumn SortExpression="PartSoldPrice" HeaderText="Part Sold Price" HeaderButtonType="TextButton"
                                        DataField="PartSoldPrice" UniqueName="PartSoldPrice"  DataFormatString="{0:C}">
<ColumnValidationSettings>
<ModelErrorMessage Text=""></ModelErrorMessage>
</ColumnValidationSettings>
                                    </telerik:GridBoundColumn>
                                    <telerik:GridBoundColumn SortExpression="TotalPrice" HeaderText="Total Price" HeaderButtonType="TextButton"
                                        DataField="TotalPrice" UniqueName="TotalPrice"  DataFormatString="{0:C}">
                                            <ColumnValidationSettings>
                                            <ModelErrorMessage Text=""></ModelErrorMessage>
                                            </ColumnValidationSettings>
                                    </telerik:GridBoundColumn>
                                    <telerik:GridBoundColumn SortExpression="Commission" HeaderText="Commission" HeaderButtonType="TextButton"
                                        DataField="Commission" UniqueName="Commission"  DataFormatString="{0:C}">
<ColumnValidationSettings>
<ModelErrorMessage Text=""></ModelErrorMessage>
</ColumnValidationSettings>
                                    </telerik:GridBoundColumn>
                                </Columns>
                        </telerik:GridTableView>
                    </DetailTables>
                    <Columns>
                        <telerik:GridBoundColumn DataField="Vin" FilterControlAltText="Filter Vin column" HeaderText="Vin" SortExpression="Vin" UniqueName="Vin">
                            <ColumnValidationSettings>
                                <ModelErrorMessage Text="" />
                            </ColumnValidationSettings>
                        </telerik:GridBoundColumn>
                    </Columns>
                </MasterTableView>
            </telerik:RadGrid>‚Äč

 Note: i dont want to use the radgrid template i want to use the first two RadDatePickers to filter inside the radgrid.

 

thanks

 

 

 

1 Answer, 1 is accepted

Sort by
0
Eyup
Telerik team
answered on 02 Oct 2015, 09:07 AM
Hi Fulufhelo,

What is the problem exactly? You can achieve this requirement by using the filter() method with Between function?
http://docs.telerik.com/devtools/aspnet-ajax/controls/grid/client-side-programming/gridtableview-object/methods/filter

You can check this live sample:
http://demos.telerik.com/aspnet-ajax/grid/examples/functionality/filtering/filter-templates/defaultcs.aspx

Also, are you aware that RadGrid provides built-in range filtering?
Copy Code
<telerik:GridDateTimeColumn DataField="OrderDate" DataType="System.DateTime"
    FilterControlAltText="Filter OrderDate column" HeaderText="OrderDate"
    SortExpression="OrderDate" UniqueName="OrderDate" EnableRangeFiltering="true">
</telerik:GridDateTimeColumn>

Regards,
Eyup
Telerik
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 Feedback Portal and vote to affect the priority of the items
Tags
Grid
Asked by
Fulufhelo
Top achievements
Rank 1
Answers by
Eyup
Telerik team
Share this question
or