Solved

Filter gridview using ajax calendarextender

Posted on 2009-07-08
12
1,875 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
 
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
Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

 
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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

AJAX ModalPopupExtender has a required property "TargetControlID" which may seem to be very confusing to new users. It means the server control that will be extended by the ModalPopup, for instance, if when you click a button, a ModalPopup displays,…
Problem Hi all,    While many today have fast Internet connection, there are many still who do not, or are connecting through devices with a slower connect, so light web pages and fast load times are still popular.    If your ASP.NET page …
This video discusses moving either the default database or any database to a new volume.
This tutorial demonstrates a quick way of adding group price to multiple Magento products.

747 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

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now