Deliver superior customer experiences with an AI-driven platform for creating and deploying cognitive chatbots
Deliver Awesome UI with the most complete toolboxes for .NET, Web and Mobile development
Automate UI, load and performance testing for web, desktop and mobile
A complete cloud platform for an app or your entire digital business
Detect and predict anomalies by automating machine learning to achieve higher asset uptime and maximized yield
Automate decision processes with a no-code business rules engine
Optimize data integration with high-performance connectivity
Connect to any cloud or on-premises data source using a standard interface
Build engaging multi-channel web and digital experiences with intuitive web content management
Personalize and optimize the customer experience across digital touchpoints
Build, protect and deploy apps across any platform and mobile device
The content you're reading is getting on in years
This post is on the older side and its content may be out of date.
Be sure to visit our blogs homepage for our latest news, updates and information.
Recently, we’ve seen a lot of people asking how to implement a NewsView control that would behave as a ExpandableList. After a short deliberation, jQuery came as a most natural solution. In this post I will explain how to modify current List & Page mode of the News View control to make it behave as an expandable list, but in one of the coming posts we’ll take it a step further and see how can we add a brand new PresentationMode to NewsView control.
The basic idea is to have NewsView control initially display only titles. When user clicks on a title, summary and the rest of information (including the link to the full story) should appear under it. You can see how the final results should look like in the Figure 1.
Figure 1: NewsView control with everything collapsed except news title. When news title is clicked date, summary and full story link expands
First, download the sample project that comes with post from here. Copy the Scripts folder from the project to the root of your website. Scripts folder contains only one file – jQuery.js file which is jQuery framework.
Now that you have jQuery on your site, open following template: ~/Sitefinity/ControlTemplates/News/Modes/ListPageMaster.ascx
This is the template for the NewsView control when in List & Page presentation mode and in Master behavior mode. Once you’ve opened the file, the first thing we need to do is to reference the jQuery framework. We can do that with a helper JsLinkFile control. Please paste this code at the beginning of the template (after the registration statements):
The next thing we need to do is wrap all the controls (except the title) in the repeater ItemTemplate in a wrapper control, so that we can reference them all at once when hiding or showing them. We will do so by wrapping them in a div. We’ll also make div invisible by default. The modified ItemTemplate of the repeater should look like this:
View all posts from The Progress Team on the Progress blog. Connect with us about all things application development and deployment, data integration and digital business.
Copyright © 2018 Progress Software Corporation and/or its subsidiaries or affiliates.
All Rights Reserved.
Progress, Telerik, and certain product names used herein are trademarks or registered trademarks of Progress Software Corporation and/or one of its subsidiaries or affiliates in the U.S. and/or other countries. See Trademarks for appropriate markings.