firing IE transition effects to smooth classic DataGrid paging events?

[Guest]

Is it possible to use IE transition effects (e.g.
progidXImageTransform.Microsoft.Fade(Duration=2)">) to smooth "classic"
(IE non-ATLAS) datagrid paging? How do you wire up the transition effect to
fire with each paging event, (versus page load, which won't show on paging
event.)

I'm pretty sure this is possible: unless Jeff Prosise dummied up his entire
demo, he had something like this miming ATLAS-ish effects at the Tech Ed
preconference in early June.

Any suggestions out there (besides bugging Jeff?

Thanks,
-KF

 

[Walter Wang [MSFT]]

Hi,

Thank you for your post.

Since I didn't see Jeff's demo, I'm not sure whether or not it's a feature
using Atlas or just ASP.NET and javascript. I agree with you that this is
possible if we're building the control from ground up, here's some idea on
how to achieve this:
1) Whenever page index is changed, render the previous page into a DIV and
render the current page into anther DIV
2) Register a startup javascript to do the transition

I'm currently still doing some research on this and will get back to you as
soon as possible. Thank you for your patience and understanding.


Regards,
Walter Wang ([email protected], remove 'online.')
Microsoft Online Community Support

==================================================
When responding to posts, please "Reply to Group" via your newsreader so
that others may learn and benefit from your issue.
==================================================

This posting is provided "AS IS" with no warranties, and confers no rights.

 

[Walter Wang [MSFT]]

Hi,

I've done some test on the idea I suggested in my last mail. To do this, we
need to create a custom server control which inherits from DataGrid:

public class MyDataGrid3: DataGrid
{
private int _pendingIndex = -1;

protected override void
OnPageIndexChanged(DataGridPageChangedEventArgs e)
{
DataBind();
_pendingIndex = e.NewPageIndex;
CurrentPageIndex = e.NewPageIndex;
base.OnPageIndexChanged(e);
}

protected override void Render(HtmlTextWriter writer)
{
if (_pendingIndex != -1)
{
writer.Write("<div id='oTransContainer'
style='position:absolute; left:10px; top:10px; width:500px; height:500px;
filterrogidXImageTransform.Microsoft.Fade(duration=1.0,overlap=0.5)'>");
writer.Write("<div id='oDIV1' style='position:absolute;
left:10px; top: 10px;'>");
base.Render(writer);
writer.Write("</div>");

DataBind();

writer.Write("<div id='oDIV2' style='visibility:hidden;
position:absolute; left:10px; top:10px;'>");
base.Render(writer);
writer.Write("</div>");
writer.Write("</div>");

writer.Write(@"
<script>
function showDiv(divIndex) {
oTransContainer.filters[0].Apply();
if (divIndex == 0) {
oDIV1.style.visibility='visible';
oDIV2.style.visibility='hidden';

}
else {
oDIV1.style.visibility='hidden';
oDIV2.style.visibility='visible';
}
oTransContainer.filters[0].Play();
}

showDiv(1);
</script>
");
} else
{
base.Render(writer);
}
}
}

Some notes:
1) Because the object that the fade filter is applied to must have "layout"
before the filter effect displays, we need to give the object "layout" by
setting the height and width property, setting the position property to
"absolute".
2) Currently the three DIVs have hard-coded ID, you may need to generate
some unique IDs using the DataGrid's ClientID property.

If you have difficulty to run this customized DataGrid, I can email the
project to you.

Hope this helps. Please feel free to post here if anything is unclear.

Regards,
Walter Wang ([email protected], remove 'online.')
Microsoft Online Community Support

==================================================
When responding to posts, please "Reply to Group" via your newsreader so
that others may learn and benefit from your issue.
==================================================

This posting is provided "AS IS" with no warranties, and confers no rights.