Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Filter gridview using ajax calendarextender

Posted on 2009-07-08
12
Medium Priority
?
1,967 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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
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 2000 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

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

Question has a verified solution.

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

I recently went through the process of creating a Calendar Control of events with the basis of using a database to keep track of the dates that are selectable, one requirement was to have the selected date pop-up in a simple lightbox.  At first this…
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this video, Percona Solution Engineer Dimitri Vanoverbeke discusses why you want to use at least three nodes in a database cluster. To discuss how Percona Consulting can help with your design and architecture needs for your database and infras…
In this video, Percona Director of Solution Engineering Jon Tobin discusses the function and features of Percona Server for MongoDB. How Percona can help Percona can help you determine if Percona Server for MongoDB is the right solution for …

636 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