Solved

Filter gridview using ajax calendarextender

Posted on 2009-07-08
12
1,927 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
SharePoint Admin?

Enable Your Employees To Focus On The Core With Intuitive Onscreen Guidance That is With You At The Moment of Need.

 
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

Salesforce Made Easy to Use

On-screen guidance at the moment of need enables you & your employees to focus on the core, you can now boost your adoption rates swiftly and simply with one easy tool.

Question has a verified solution.

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

Suggested Solutions

Today is the age of broadband.  More and more people are going this route determined to experience the web and it’s multitude of services as quickly and painlessly as possible. Coupled with the move to broadband, people are experiencing the web via …
Introduction This article shows how to use the open source plupload control to upload multiple images. The images are resized on the client side before uploading and the upload is done in chunks. Background I had to provide a way for user…
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…
How to Install VMware Tools in Red Hat Enterprise Linux 6.4 (RHEL 6.4) Step-by-Step Tutorial

732 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