Solved

Filter gridview using ajax calendarextender

Posted on 2009-07-08
12
1,920 Views
Last Modified: 2012-05-07
Hello,
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?
0
Comment
Question by:arcross
  • 7
  • 5
12 Comments
 
LVL 96

Expert Comment

by:Bob Learned
ID: 24809979
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?
0
 
LVL 8

Author Comment

by:arcross
ID: 24812315
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
0
 
LVL 96

Expert Comment

by:Bob Learned
ID: 24813592
Can you show me the HTML for the calendar extender, and the ObjectDataSource?
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 8

Author Comment

by:arcross
ID: 24814689
It is the third example in this page:
http://www.asp.net/AJAX/AjaxControlToolkit/Samples/Calendar/Calendar.aspx


 <asp:TextBox ID="txt_date" runat="server" Height="22px" Width="90px"></asp:TextBox>
        <cc1:CalendarExtender ID="TextBox1_CalendarExtender" 
            runat="server" 
            CssClass="Mycalendar" 
            Enabled="True" 
            TargetControlID="txt_date"
            PopupButtonID="imgbtn_calendar">
        </cc1:CalendarExtender>

Open in new window

0
 
LVL 96

Accepted Solution

by:
Bob Learned earned 500 total points
ID: 24815822
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" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title>Demo Calendar Extender</title>
  <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
    <div>
      <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
          <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">
        </cc1:calendarextender>
          <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSource1"
            Font-Names="Tahoma" Font-Size="Small" OnSelectedIndexChanged="GridView1_SelectedIndexChanged"
            Width="800px">
            <Columns>
              <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" />
            </Columns>
            <HeaderStyle BackColor="SteelBlue" ForeColor="White" />
            <AlternatingRowStyle BackColor="#FFFFC0" />
          </asp:GridView>
          <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"
            OnSelecting="SqlDataSource1_Selecting">
            <SelectParameters>
              <asp:ControlParameter ControlID="txt_date" PropertyName="Text" Name="StartDate" />
            </SelectParameters>
          </asp:SqlDataSource>
        </ContentTemplate>
        <Triggers>
          <asp:AsyncPostBackTrigger ControlID="txt_date" />
        </Triggers>
      </asp:UpdatePanel>
    </div>
  </form>
</body>
</html>

Open in new window

0
 
LVL 96

Expert Comment

by:Bob Learned
ID: 24815825
Code-behind:  


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

0
 
LVL 96

Expert Comment

by:Bob Learned
ID: 24815840
0
 
LVL 96

Expert Comment

by:Bob Learned
ID: 24815844
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

0
 
LVL 96

Expert Comment

by:Bob Learned
ID: 24815862
Points of interest:

1) Set the TextBox.AutoPostBack = True

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

        <Triggers>
          <asp:AsyncPostBackTrigger ControlID="txt_date" />
        </Triggers>

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.
0
 
LVL 8

Author Comment

by:arcross
ID: 24818462
hey thanks! thats looking good.
ill try it tomorrow
0
 
LVL 8

Author Comment

by:arcross
ID: 24821579
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?
0
 
LVL 8

Author Comment

by:arcross
ID: 24838394
it does work now after i recreated it.
thanks!
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In an ASP.NET application, I faced some technical problems. In this article, I list them out and show the solutions that I found.  I hope it will be useful. Problem: After closing a pop-up window, the parent page should be refreshed automaticall…
In .NET 2.0, Microsoft introduced the Web Site.  This was the default way to create a web Project in Visual Studio 2005.  In Visual Studio 2008, the Web Application has been restored as the default web Project in Visual Studio/.NET 3.x The Web Si…
I've attached the XLSM Excel spreadsheet I used in the video and also text files containing the macros used below. https://filedb.experts-exchange.com/incoming/2017/03_w12/1151775/Permutations.txt https://filedb.experts-exchange.com/incoming/201…

756 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question