Filter gridview using ajax calendarextender

ive got  a gridview that has an objectdatasource with a parameter to filter by a date.
Also, i ve added an ajax calendar extender.
Id like to click that calendar and my object source to see that it has change and the filter it.

any ideas?
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Bob LearnedCommented:
What type of parameter is the date filter on the ObjectDataSource?  Does clicking on the calendar post-back the page?  Do you have asych post-back triggers?
arcrossAuthor Commented:
no it doesnt post the page back.
What it does it selects the date from the calendar and inserts it into a textbox. All that is implemented by the ajax calendar extender.
So i would need somehow to trigger the selection and postback the page?? or something like that
Bob LearnedCommented:
Can you show me the HTML for the calendar extender, and the ObjectDataSource?
Introduction to R

R is considered the predominant language for data scientist and statisticians. Learn how to use R for your own data science projects.

arcrossAuthor Commented:
It is the third example in this page:

 <asp:TextBox ID="txt_date" runat="server" Height="22px" Width="90px"></asp:TextBox>
        <cc1:CalendarExtender ID="TextBox1_CalendarExtender" 

Open in new window

Bob LearnedCommented:
Here is a demo page VB.NET .aspx page that shows:

1) CalendarExtender
2) UpdatePanel
3) Binding a GridView to an SqlDataSource
4) Setting an SqlDataSource SelectCommand parameter to a control value (TextBox)
5) Filtering data by a text value.
<%@ Page Language="VB" AutoEventWireup="true" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "">
<html xmlns="">
<head runat="server">
  <title>Demo Calendar Extender</title>
  <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
  <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
      <asp:UpdatePanel ID="UpdatePanel1" runat="server">
          <asp:TextBox ID="txt_date" runat="server" Height="22px" Width="91px" AutoPostBack="True" />
          <asp:ImageButton ID="imgbtn_calendar" runat="server" ImageUrl="~/Box32.ico" />
          <asp:LinkButton ID="ClearButton" runat="server" CommandName="Clear" OnClick="ClearButton_Click">Clear</asp:LinkButton>
          <cc1:calendarextender id="TextBox1_CalendarExtender" runat="server" cssclass="Mycalendar"
            enabled="True" targetcontrolid="txt_date" popupbuttonid="imgbtn_calendar">
          <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSource1"
            Font-Names="Tahoma" Font-Size="Small" OnSelectedIndexChanged="GridView1_SelectedIndexChanged"
              <asp:BoundField DataField="FirstName" HeaderText="FirstName" SortExpression="FirstName" />
              <asp:BoundField DataField="MiddleName" HeaderText="MiddleName" SortExpression="MiddleName" />
              <asp:BoundField DataField="LastName" HeaderText="LastName" SortExpression="LastName" />
              <asp:BoundField DataField="StartDate" HeaderText="StartDate" SortExpression="StartDate"
                DataFormatString="{0:yyyy-MM-dd}" />
              <asp:BoundField DataField="EndDate" HeaderText="EndDate" SortExpression="EndDate"
                DataFormatString="{0:yyyy-MM-dd}" />
              <asp:BoundField DataField="Department" HeaderText="Department" SortExpression="Department" />
              <asp:CommandField ShowCancelButton="False" ShowSelectButton="True" SelectText="Filter by start date" />
            <HeaderStyle BackColor="SteelBlue" ForeColor="White" />
            <AlternatingRowStyle BackColor="#FFFFC0" />
          <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:AdventureWorksConnectionString %>"
            SelectCommand="SELECT FirstName, MiddleName, LastName, StartDate, EndDate, Department FROM HumanResources.vEmployeeDepartmentHistory WHERE LEN(ISNULL(@StartDate, '')) = 0 OR DATEDIFF(day, StartDate, @StartDate) = 0"
              <asp:ControlParameter ControlID="txt_date" PropertyName="Text" Name="StartDate" />
          <asp:AsyncPostBackTrigger ControlID="txt_date" />

Open in new window


Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Bob LearnedCommented:

Imports System.Data
Partial Class _Default
    Inherits System.Web.UI.Page
    Protected Sub SqlDataSource1_Selecting(ByVal sender As Object, ByVal e As SqlDataSourceSelectingEventArgs)
        If e.Command.Parameters(0).Value Is Nothing Then
            e.Command.Parameters(0).Value = ""
        End If
    End Sub
    Protected Sub GridView1_SelectedIndexChanged(ByVal sender As Object, ByVal e As EventArgs)
        Dim dv As DataView = TryCast(Me.SqlDataSource1.[Select](DataSourceSelectArguments.Empty), DataView)
        Dim drv As DataRowView = dv(Me.GridView1.SelectedIndex)
        Dim dt As DateTime = DateTime.Parse(drv("StartDate").ToString())
        Me.txt_date.Text = dt.ToShortDateString()
    End Sub
    Protected Sub ClearButton_Click(ByVal sender As Object, ByVal e As EventArgs)
        Me.txt_date.Text = ""
    End Sub
End Class

Open in new window

Bob LearnedCommented:
Bob LearnedCommented:
CSS style sheet:

.Mycalendar .ajax__calendar_container
	color: Blue;
	background-color: White;
	border:1px solid #646464;
.Mycalendar .ajax__calendar_other 
	color:  Green;
	background-color:  Yellow;
.Mycalendar .ajax__calendar_days
	color:  Black;
	background-color:  #f0f0f0;

Open in new window

Bob LearnedCommented:
Points of interest:

1) Set the TextBox.AutoPostBack = True

2) Set the Asynchronous post-back for the UpdatePanel to the TextBox:

          <asp:AsyncPostBackTrigger ControlID="txt_date" />

3) When the TextBox.Text value changes, the page will post back, and rebind the SqlDataSource to the GridView, with the new date value in the SelectCommand's parameters.
arcrossAuthor Commented:
hey thanks! thats looking good.
ill try it tomorrow
arcrossAuthor Commented:
that worked very good!! ...but it gives me a problem..ive got delete and edit commands in that grid and now they are not reacting...

any ideas?
arcrossAuthor Commented:
it does work now after i recreated it.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.