Ajax Calendar Extender Within Gridview : The Official Microsoft ASP.NET Forums

Reply

Neobonzi

0 Points

Ajax Calendar Extender Within Gridview

Mar 20, 2008 09:57 PM|LINK

I'm tasked with creating an editable gridview which contains several columns for input including a Start Date and End Date column. All columns are created dynamically at runtime based on a user's selection in a dropdown list. I would like to have an Ajax Calendar Extender attached to all text boxes in the Start and End Date Columns but since the table is made dynamically I need to add it in code behind. Most examples I've seen add ajax calendars to a gridview using template columns but i can not do this in my case.

The following is my handling of the rowdatabound event - How do i edit this to attach a calendar extender to columns 1 and 2?

protected void GridView1_RowDataBound(Object sender, GridViewRowEventArgs e)
    {
        TextBox txt;
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            for(int i = 0; i < e.Row.Cells.Count; i++)
            {
                for (int j = 0; j < e.Row.Cells[i].Controls.Count; j++)
                {
                      if (e.Row.Cells[i].Controls[j] is TextBox)
                      {
                          txt = (TextBox)e.Row.Cells[i].Controls[j];
                          if (txt != null && Page.IsPostBack)
                          {
                              txt.Text = Request.Form[txt.UniqueID];
                          }


                      }
                }
            }
        }
    }

Reply

lnwThai

Participant

976 Points

158 Posts

Re: Ajax Calendar Extender Within Gridview

Mar 21, 2008 01:34 AM|LINK

you can set in Column that you want to add Ajax Calendar Extender in template fileds

only click on Gridview Task and choose column that you want to add Calendar in >> EditItem Template

put Calendar Extender , button and TextBox1 for click show Calendar

and set in Calendar Extender

1. TargetControlID = TextBox1

2.format="MM/dd/yyyy" or any format that you want to show in Calendar

3. popupbuttonid="Button1" popupbuttonid its for your button that you want to click show calendar and when you select date in calendar its will show in textbox

add them to

<cc1:CalendarExtender ID="CalendarExtender2" runat="server" TargetControlID="TextBox1"

format="MM/dd/yyyy" popupbuttonid="Button1" ></cc1:CalendarExtender>

so its will work with Calendar and

set Textbox1>>TextBox Task>>set Custom binding>>Code Expression>>Bind("StartDate") in Template Fileds

only this column that you want Calendar its will auto when you click edit Gridview

Mark if its help

If you want a thing well done, do it yourself

Marked as answer by Jin-Yu Yin - MSFT on Mar 26, 2008 10:18 AM

Reply

zcon_sachin@...

Member

581 Points

126 Posts

Re: Ajax Calendar Extender Within Gridview

Sep 10, 2008 12:46 PM|LINK

How can I validate for the date edited by user from text box

Reply

dwhite

Star

8990 Points

1423 Posts

Re: Ajax Calendar Extender Within Gridview

Sep 10, 2008 02:18 PM|LINK

zcon_sachin@hotmail.com
How can I validate for the date edited by user from text box

Add a validator. For example, from here: <asp:CompareValidator id="dateValidator" runat="server" Type="Date" Operator="DataTypeCheck" ControlToValidate="dateTextbox" ErrorMessage="Please enter a valid date."></asp:CompareValidator>

-Damien

Visoft, Inc - Home | Blogs

Latest Blog Post: BDD with ASP.NET MVC and Cucumber

Reply

rishnan

Member

52 Points

28 Posts

Ajax Calendar Extender Within Gridview

Oct 04, 2008 03:54 AM|LINK

<asp:TemplateField HeaderText="Pulled Date" SortExpression="PulledDate">

<asp:TextBox ID="PulledDateTextBox" runat="server" Text='<%# AssetsDBSupport.Utils.DisplayShortDate (Eval("PulledDate")) %>'> </asp:TextBox>

<ajaxToolkit:CalendarExtender ID="CalendarExtender" runat="server" TargetControlID="PulledDateTextBox"

CssClass="MyCalendar" Format="dd/MM/yyyy"/>

</EditItemTemplate>

</asp:TemplateField>

I have the Date Column Like above. When I update in the grid view I am getting null value as date. But i chosen some date in this feild.

The code i written as follows:

protected void ObjectDSCable_ItemUpdating(object sender, ObjectDataSourceMethodEventArgs e)

{

CultureInfo culture = new CultureInfo("en-GB");

DateTime dt1 = Convert.ToDateTime("1-1-1900", culture);

DateTime dt2 = Convert.ToDateTime("1-1-1900", culture); TextBox txtPulledDate = (TextBox)GridViewCable.FindControl("PulledDateTextBox");if (txtPulledDate != null)

{

if (txtPulledDate.Text.Length > 8)

{

dt1 = Convert.ToDateTime(txtPulledDate.Text, culture);

e.InputParameters["PulledDate"] = dt1;

} } }

The same code is works fine in my FormView but in the Grid View not working.Getting only null value..

Please note my calendar extendar is working fine. Update query is also works fine. Also when i use the same format in my FormView its working fine..Only the problem comes when i use gridview.I use C# here. I need some solution for this problem urgently.. Can you give a solution for this?

Regards,
Gobalakrishnan

Reply

vijay_seth

Member

25 Points

13 Posts

Re: Ajax Calendar Extender Within Gridview

Jun 07, 2009 02:23 PM|LINK

Hi Rishan,

Have u got any solution for this problem.

I have stucked with this.

Reply

rishnan

Member

52 Points

28 Posts

Re: Ajax Calendar Extender Within Gridview

Jun 08, 2009 02:14 AM|LINK

Yes. I got a solution. I am passing the datevalue like below in the update query:

if (InstalledDate != null && InstalledDate.DayOfYear != 1)

sqlString += " ,InstalledDate = '" + InstalledDate.Year + String.Format("{0:MM}", InstalledDate) + String.Format("{0:dd}", InstalledDate) + "'";

else

sqlString += " ,InstalledDate = '' ";

Hope this will help you.

Regards,
Gobalakrishnan

Reply

titannguyen

Member

4 Points

4 Posts

Re: Ajax Calendar Extender Within Gridview

Feb 15, 2010 09:29 AM|LINK

Hi , i got a problem when i input calender extender into gridview. Anything is fine but it's lost style

like this http://enbac2.vcmedia.vn/up_new/2010/02/15/item/198/198151/20100215172552_err.png

------------------------------------------------------------

sorry about my english and i can't not upload image in this forum.

Reply

chetan.sarod...

All-Star

65839 Points

11163 Posts

Re: Ajax Calendar Extender Within Gridview

Feb 16, 2010 02:14 AM|LINK

http://www.codeplex.com/AjaxControlToolkit/WorkItem/View.aspx?WorkItemId=8368

Chetan Sarode
Senior Software Engineer,
Approva Systems Pvt Ltd, Pune, India.

Reply

titannguyen

Member

4 Points

4 Posts

Re: Ajax Calendar Extender Within Gridview

Feb 19, 2010 02:26 PM|LINK

i sloved my problem by using css and this is my css file.

.cal_Theme1

.ajax__calendar_container {POSITION: absolute; TEXT-ALIGN: center; PADDING-BOTTOM: 4px; PADDING-LEFT: 4px; WIDTH: 170px; PADDING-RIGHT: 4px; FONT-FAMILY: tahoma, verdana, helvetica; FONT-SIZE: 11px; CURSOR: default; PADDING-TOP: 4px;background-color:White;BORDER-BOTTOM: #646464 1px solid; BORDER-LEFT: #646464 1px solid;BORDER-TOP: #646464 1px solid; BORDER-RIGHT: #646464 1px solid

}

.cal_Theme1.ajax__calendar_body {POSITION: relative; MARGIN: auto; WIDTH: 170px; HEIGHT: 139px; OVERFLOW: hidden

}

.cal_Theme1

.ajax__calendar_days {POSITION: absolute; TEXT-ALIGN: center; MARGIN: auto; WIDTH: 170px; HEIGHT: 139px; TOP: 0px; LEFT: 0px

}

.cal_Theme1

.ajax__calendar_months {POSITION: absolute; TEXT-ALIGN: center; MARGIN: auto; WIDTH: 170px; HEIGHT: 139px; TOP: 0px; LEFT: 0px

}

.cal_Theme1

.ajax__calendar_years {POSITION: absolute; TEXT-ALIGN: center; MARGIN: auto; WIDTH: 170px; HEIGHT: 139px; TOP: 0px; LEFT: 0px

}

.cal_Theme1

.ajax__calendar_container TABLE {FONT-SIZE: 11px

}

.cal_Theme1

.ajax__calendar_header {WIDTH: 100%; HEIGHT: 20px

}

.cal_Theme1

.ajax__calendar_prev {BACKGROUND-IMAGE: url(WebResource.axd?d=W1PK3219kPfuIjl9rxZNHjRChk9ynT2eT3zgebRNll6IZvMm_ooMy3Cwi4IUjaCOoJparbBJHeb55AKH-4YTEw2&t=633051113740000000); WIDTH: 15px; BACKGROUND-REPEAT: no-repeat; BACKGROUND-POSITION: 50% 50%; FLOAT: left; HEIGHT: 15px; CURSOR: pointer

}

.cal_Theme1

.ajax__calendar_next {BACKGROUND-IMAGE: url(WebResource.axd?d=W1PK3219kPfuIjl9rxZNHjRChk9ynT2eT3zgebRNll6IZvMm_ooMy3Cwi4IUjaCOm-528ZzAwNznPqFsWvijOQ2&t=633051113740000000); WIDTH: 15px; BACKGROUND-REPEAT: no-repeat; BACKGROUND-POSITION: 50% 50%; FLOAT: right; HEIGHT: 15px; CURSOR: pointer

}

.cal_Theme1

.ajax__calendar_title {CURSOR: pointer; FONT-WEIGHT: bold

}

.cal_Theme1

.ajax__calendar_footer {HEIGHT: 15px

}

.cal_Theme1

.ajax__calendar_today {CURSOR: pointer; PADDING-TOP: 3px

}

.cal_Theme1

.ajax__calendar_dayname {TEXT-ALIGN: right; PADDING-BOTTOM: 0px; PADDING-LEFT: 2px; WIDTH: 9px; PADDING-RIGHT: 2px; HEIGHT: 9px; PADDING-TOP: 0px

}

.cal_Theme1

.ajax__calendar_day {TEXT-ALIGN: right; PADDING-BOTTOM: 0px; PADDING-LEFT: 2px; WIDTH: 8px; PADDING-RIGHT: 2px; HEIGHT: 7px; CURSOR: pointer; PADDING-TOP: 0px

}

.cal_Theme1

.ajax__calendar_month {TEXT-ALIGN: center; WIDTH: 30px; HEIGHT: 34px; OVERFLOW: hidden; CURSOR: pointer

}

.cal_Theme1

.ajax__calendar_year {TEXT-ALIGN: center; WIDTH: 30px; HEIGHT: 34px; OVERFLOW: hidden; CURSOR: pointer

}

.cal_Theme1

}

.ajax__calendar .ajax__calendar_container {BACKGROUND-COLOR: #ffffff; COLOR: #000000;

.cal_Theme1

.ajax__calendar .ajax__calendar_footer {/*BORDER-TOP: #f5f5f5 1px solid*/

}

.cal_Theme1

.ajax__calendar .ajax__calendar_dayname {/*BORDER-BOTTOM: #f5f5f5 1px solid*/

}

.cal_Theme1

.ajax__calendar .ajax__calendar_day {/*BORDER-BOTTOM: #ffffff 1px solid; BORDER-LEFT: #ffffff 1px solid; BORDER-TOP: #ffffff 1px solid; BORDER-RIGHT: #ffffff 1px solid*/

}

.cal_Theme1

.ajax__calendar .ajax__calendar_month {/*BORDER-BOTTOM: #ffffff 1px solid; BORDER-LEFT: #ffffff 1px solid; BORDER-TOP: #ffffff 1px solid; BORDER-RIGHT: #ffffff 1px solid*/

}

.cal_Theme1

.ajax__calendar .ajax__calendar_year {/*BORDER-BOTTOM: #ffffff 1px solid; BORDER-LEFT: #ffffff 1px solid; BORDER-TOP: #ffffff 1px solid; BORDER-RIGHT: #ffffff 1px solid*/

}

.cal_Theme1

.ajax__calendar .ajax__calendar_active .ajax__calendar_day {/*BORDER-BOTTOM-COLOR: #0066cc; BACKGROUND-COLOR: #edf9ff; BORDER-TOP-COLOR: #0066cc; COLOR: #0066cc; BORDER-RIGHT-COLOR: #0066cc; BORDER-LEFT-COLOR: #0066cc*/

}

.cal_Theme1

.ajax__calendar .ajax__calendar_active .ajax__calendar_month {BORDER-BOTTOM-COLOR: #0066cc; BACKGROUND-COLOR: #edf9ff; BORDER-TOP-COLOR: #0066cc; COLOR: #0066cc; BORDER-RIGHT-COLOR: #0066cc; BORDER-LEFT-COLOR: #0066cc

}

.cal_Theme1

.ajax__calendar .ajax__calendar_active .ajax__calendar_year {BORDER-BOTTOM-COLOR: #0066cc; BACKGROUND-COLOR: #edf9ff; BORDER-TOP-COLOR: #0066cc; COLOR: #0066cc; BORDER-RIGHT-COLOR: #0066cc; BORDER-LEFT-COLOR: #0066cc

}

.cal_Theme1

.ajax__calendar .ajax__calendar_other .ajax__calendar_day {/*BORDER-BOTTOM-COLOR: #ffffff; BACKGROUND-COLOR: #ffffff; BORDER-TOP-COLOR: #ffffff; COLOR: #646464; BORDER-RIGHT-COLOR: #ffffff; BORDER-LEFT-COLOR: #ffffff*/

}

.cal_Theme1

.ajax__calendar .ajax__calendar_other .ajax__calendar_year {BORDER-BOTTOM-COLOR: #ffffff; BACKGROUND-COLOR: #ffffff; BORDER-TOP-COLOR: #ffffff; COLOR: #646464; BORDER-RIGHT-COLOR: #ffffff; BORDER-LEFT-COLOR: #ffffff

}

.cal_Theme1

.ajax__calendar .ajax__calendar_hover .ajax__calendar_day {/*BORDER-BOTTOM-COLOR: #daf2fc; BACKGROUND-COLOR: #edf9ff; BORDER-TOP-COLOR: #daf2fc; COLOR: #0066cc; BORDER-RIGHT-COLOR: #daf2fc; BORDER-LEFT-COLOR: #daf2fc*/

}

.cal_Theme1

.ajax__calendar .ajax__calendar_hover .ajax__calendar_month {BORDER-BOTTOM-COLOR: #daf2fc; BACKGROUND-COLOR: #edf9ff; BORDER-TOP-COLOR: #daf2fc; COLOR: #0066cc; BORDER-RIGHT-COLOR: #daf2fc; BORDER-LEFT-COLOR: #daf2fc

}

.cal_Theme1

.ajax__calendar .ajax__calendar_hover .ajax__calendar_year {BORDER-BOTTOM-COLOR: #daf2fc; BACKGROUND-COLOR: #edf9ff; BORDER-TOP-COLOR: #daf2fc; COLOR: #0066cc; BORDER-RIGHT-COLOR: #daf2fc; BORDER-LEFT-COLOR: #daf2fc

}

.cal_Theme1

.ajax__calendar .ajax__calendar_hover .ajax__calendar_title {COLOR: #0066cc

}

.cal_Theme1

.ajax__calendar .ajax__calendar_hover .ajax__calendar_today {COLOR: #0066cc

}

Ajax Calendar Extender Within Gridview RSS

10 replies

Neobonzi

Ajax Calendar Extender Within Gridview

lnwThai

Re: Ajax Calendar Extender Within Gridview

zcon_sachin@...

Re: Ajax Calendar Extender Within Gridview

dwhite

Re: Ajax Calendar Extender Within Gridview

zcon_sachin@hotmail.com

rishnan

Ajax Calendar Extender Within Gridview

vijay_seth

Re: Ajax Calendar Extender Within Gridview

rishnan

Re: Ajax Calendar Extender Within Gridview

titannguyen

Re: Ajax Calendar Extender Within Gridview

chetan.sarod...

Re: Ajax Calendar Extender Within Gridview

titannguyen

Re: Ajax Calendar Extender Within Gridview

This site is managed for Microsoft by Neudesic, LLC. | © 2013 Microsoft. All rights reserved.

Follow Us On:

Microsoft