This is a migrated thread and some comments may be shown as answers.

Dynamic Expand and Contract News Story

1 Answer 37 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Anthony
Top achievements
Rank 1
Anthony asked on 26 Jun 2011, 07:22 AM

Hi,

We are creating an application that allows users to enter and view news stories. In the news listing screen, we are using a radgrid to display the news stories. Each row shows the news headline and the first two lines of the body of the story. We would like to allow users to click on an icon beside a row to dynamically expand and contract the body of the new story so that the first two lines expands to the full story and then collapses back to the first two lines.

On the initial load of the news listing, we will not load the full body of each story, just the first two lines. So, the expand function will have to retrieve the body. We would prefer to use a Webservice call to retrieve the body of the story.

When the body of the content is expanded, we would like to show some minor animation effects to make the presentation of the story a little more interesting - e.g. have the panel expand downwards a little slower.

What is the best way to accomplish this? We have been using the RadXmlHttpPanel to call the Webservice to get the body of the story, but this control does not provide any effects in displaying the content.

So, in summary, we would like to do the following:

1. Show a list of news stories with the first two lines of the body displayed.
2. The user clicks a button (or "More..." link) to expand the body.
3. A Web Service is called to full body of the story.
4. Once retrieved, the body of the story slowly opens up
5. The user clicks a button (or "Less...") link to contract the body of the story

Any thoughts?

1 Answer, 1 is accepted

Sort by
0
Pero
Telerik team
answered on 30 Jun 2011, 07:01 AM
Hi Anthony,

The RadXmlHttpPanel control does not have any built-in animations for showing the content, but it could easily be implemented with a bit of custom JavaScript. My suggestion is to initially hide the XmlHttpPanel, and after the content from the WebService has arrived show it using some jQuery animation. For this purpose you should handle the RadXmlHttpPanel.responseEnded client-side event and start the animation.

Greetings,
Pero
the Telerik team

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

Tags
General Discussions
Asked by
Anthony
Top achievements
Rank 1
Answers by
Pero
Telerik team
Share this question
or