Perma Link

JQUERY why didn't any one tell me about this?

 

You are looking at a jquery page now. Here's the line of code the calendar uses to scroll when you click on a highlighted date.

$.scrollTo($get(f), { duration: 2500 });

 

Here's what I found out in summary.

1. The ASP. Net calendar doesn't work well with the always visible control but you can wrap a panel around it.

1. J query is incredibly easy to use.

2. J query has some really cool plug ins.

3. Ajax extenders are moderately difficult to make.

4. Ajax Control Toolkit Timespan is an easy way to work with dates in javascript.

5. I couldn't get the ID function on my extender to work with $find so I implemented the behavior name and was able to use

1.  

   1. var b = Sys.UI.Behavior.getBehaviorByName($get(a), a);. I

 

JQUERY with ASP.NET AJAX.

 

Snipits:

 

In your script manager put a reference to the main jquery library and any plugs in you are using.

 

<asp:ScriptManager EnablePartialRendering="true" id="MasterScriptManager" EnableScriptGlobalization="false" runat="Server">

<Scripts>

<asp:ScriptReference Path="~/scripts/jquery/jquery-1.3.min.js" />

<asp:ScriptReference Path="~/scripts/jquery/jquery.scrollTo-min.js" />

<asp:ScriptReference Assembly="AjaxControlToolkit" Name="AjaxControlToolkit.Common.DateTime.js" />

</Scripts>

</asp:ScriptManager>

 

 

The javascript to scroll a page with jquery and the scrollto plugin. F is the controlclientID.

$.scrollTo($get(f), { duration: 2500 });

 

 

Get control Ids into the calendar.

Protected Sub Calendar1_DayRender(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.DayRenderEventArgs) Handles Calendar1.DayRender

e.Cell.ID = "c" + e.Day.Date.ToString("yyyyMMdd")

DE1.LastDate = e.Day.Date.Date.ToString("yyyyMMdd")

If DE1.FirstDate = "" Then

DE1.FirstDate = e.Day.Date.Date.ToString("yyyyMMdd")

End If

End Sub

 

 

Iterate through the dates in the calendar in java script. I use the Ajax Control Toolkit timespan in a for loop I send send down the first and last days in the calendar.

 

var dt = new Date();

var de = new Date();

dt.setFullYear(parseInt(this.get_FirstDate().substring(0, 4)), parseInt(this.get_FirstDate().substring(4, 6)) - 1, parseInt(this.get_FirstDate().substring(6, 8)));

de.setFullYear(parseInt(this.get_LastDate().substring(0, 4)), parseInt(this.get_LastDate().substring(4, 6)) - 1, parseInt(this.get_LastDate().substring(6, 8)));

var ts = new AjaxControlToolkit.TimeSpan(AjaxControlToolkit.TimeSpan.TicksPerDay);

for (dx = dt; dx < de; dx = dx.add(ts)) {

ele = $get("c" + dx.format("yyyyMMdd"));

ele.innerHTML = ele.id.substring(7, 9);

}

 

 

A collapsible panel in a gridview.

<%@ Page Title="" Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="false" CodeFile="blog.aspx.vb" Inherits="Default2" %>

<%@ Register Namespace="DWS.AJAX.Behaviors" TagPrefix="DWS" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

 

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">

 

 

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

<asp:UpdatePanel ID="up1" runat="server">

<ContentTemplate>

<asp:ScriptManager EnablePartialRendering="true" id="MasterScriptManager" EnableScriptGlobalization="false" runat="Server">

<Scripts>

<asp:ScriptReference Path="~/scripts/jquery/jquery-1.3.min.js" />

<asp:ScriptReference Path="~/scripts/jquery/jquery.scrollTo-min.js" />

<asp:ScriptReference Assembly="AjaxControlToolkit" Name="AjaxControlToolkit.Common.DateTime.js" />

</Scripts>

</asp:ScriptManager>

 

<asp:GridView ID="GridView1"

runat="server"

AutoGenerateColumns="False">

<Columns>

<asp:TemplateField>

<ItemTemplate>

 

 

<asp:Panel OnLoad="xds" ID="TitlePanel" runat="server" CssClass="collapsePanelHeader">

 

<cc1:CollapsiblePanelExtender ID="cpe" runat="Server"

TargetControlID="ContentPanel"

ExpandControlID="TitlePanel"

CollapseControlID="TitlePanel"

Collapsed="true"

ImageControlID="Image1"

ExpandedImage="~/images/collapse_blue.jpg"

CollapsedImage="~/images/expand_blue.jpg"

SuppressPostBack="true">

</cc1:CollapsiblePanelExtender>

<asp:Image ID="Image1" runat="server" />

<asp:Label ID="Postit" runat="server" Text = '<%#Eval("Posted").ToString()%>'></asp:Label>

 

<%# Eval("Title").ToString() %>

 

</asp:Panel>

 

<asp:Panel ID="ContentPanel" runat="server" CssClass="collapsePanel">

<h1>

<br />

<%# Eval("Title").ToString() %>

</h1>

 

 

<%# Eval("Entry").ToString() %></asp:Panel>

 

</ItemTemplate>

</asp:TemplateField>

 

</Columns>

</asp:GridView>

 

<asp:Panel ID="CalendarPanel" runat="server">

<asp:Calendar ID="Calendar1" runat="server" BackColor="#4FD9C8"

ShowNextPrevMonth="false">

</asp:Calendar>

 

 

<cc1:AlwaysVisibleControlExtender ID="Calendar1_AlwaysVisibleControlExtender"

runat="server" Enabled="True" HorizontalSide="Right"

HorizontalOffset="25"

TargetControlID="CalendarPanel" VerticalOffset="100">

</cc1:AlwaysVisibleControlExtender>

 

</asp:Panel>

 

<DWS:DataExtender TargetControlID="CalendarPanel"

ID="DE1" runat="server" />

 

</ContentTemplate>

</asp:UpdatePanel>

 

 

 

</asp:Content>

 

 

 

More later

Danny

 

Good Luck

 

Comments Perma Link