How to Implement Paging Using DotNetMushroom RAD

By Ruben Gatt

April 2010

In this tutorial we demonstrate how to add paging functionality using the DotNetMushroom RAD Module.

This article is a continuation of the How to Style the News Application Built with DotNetMushroom RAD article. We will be adding paging controls to the News Application using DotNetMushroom RAD Module.

Introduction

Before attempting this tutorial it is recommended to follow the preceding tutorials regarding the DotNetMushroom RAD module if you are not already familiar with the features and functionality of the module. This article continues from the previous articles so we recommend you install or create the application by following the previous tutorials.

Creating News Items

After creating or installing the Multi-Language News Application you should start by adding a minimum of 7 news items so that when the paging control is implemented the results will be visible.


You will notice that while adding more than 3 news items, even though the news items are created, only 3 are visible to the user. This occurs because in the properties of the “NewsView” form there is a setting which tells the application how many items need to be rendered (shown in the screenshot below).


The value of the property “Items Per Page” is currently set to 3 which will therefore display only 3 news items at a time. Also notice that the “Enable Paging” property is ticked which means that, if available, the form will display the paging control.

Creating the Paging Control

Now that we have added some news items and that we have “Enable Paging” checked (if the property is not checked, please make sure you tick the checkbox before proceeding) the next step will be to add the paging control to the Template.


Click on the template button and navigate to the Footer Template. We need to create the paging control in either the Header and/or the Footer Templates only. This is because the Body and/or Alternate Body Templates are normally repeated to display the items.


In the footer template you should see a group of empty paragraph tags and another group that will contain the “Add New” button.

Add a new paging control by selecting a control of type DNMPAGING and enter the name of the control, in this case “frm_paging”.


Once the control is added to the template, drag it into the empty paragraph tags so that it is contained inside the paragraph tags and press the “Save Template” button.

Setting the Paging Control Properties

Once the paging control is created in the Footer Template we need to modify the paging control properties.
Go back to the properties tab.


Click on the paging control name, in this case the control is named “frm_paging”.


On the right hand side of the DotNetMushroom RAD Module you should be able to see all the properties that can be set for this control.


The paging control is made up of what are called tokens. Each token represents an element from the paging control e.g. the First Page token, the Next Page token, etc…

The tokens’ names are straight forward and are easy to understand. All the tokens accept HTML code as a property, therefore you are free to style the token’s text or even add an image instead, as shown below.


Fill in the properties as shown above. Each Token property can be modified as desired, but in the “Current Page” and in the “Paging Control” Templates, only the tags shown can be used, but they can be ordered as desired.

In the Table CSS Class, Current Page CSS Class and Tokens CSS Class you can specify a CSS class. In this example, all of the CSS Classes were specified to demonstrate their use in this tutorial, but it is not required to specify all of the classes.

Once the paging control properties have been filled in press the “Save” button to save the properties of the paging control.


The paging control should now be visible above the Add New button and underneath the news items since the control was saved in the Footer Template.


Notice that the paging control is displaying "page 1 of 2" which means that there are other items that can be made visible.

The paging control buttons function in the following way:

• First: navigates to the first most item in the list
• Prev: shows the previous items
• Next: shows the next items
• Last: shows the last most item in the list

Adding Two Paging Controls in the Same Form

Earlier in this tutorial we explained that the paging control can be placed in either the Header and/or the Footer Templates, so now we will copy the paging control created in the Footer Template in order to display the paging control at the top of the form too.

Go back to the “NewsView” form and navigate to the Footer Template of the form. Now copy the paging control code (do not delete just copy).
Then click on the Header Template button.


Next paste the paging control in the Header Template and press the “Save Template” button.


Now the paging control should also be visible at the top of the form before the news items. Since we copied the same control in the same form there is no need to reset the properties of the paging control as the same properties will be applied throughout.


If you wish to create two paging controls with different styles, a new paging control should be created by assigning different CSS Classes in the Properties tab to the other paging control.

Styling the Paging Control

Now that the paging control is ready and set in the “NewsView” form, it is time to design the control and smoothly integrate it with the news application design.

Open the news.CSS file which is found in the DotNetMushroom folder within the portal’s root folder.

Add the code below at the end of the file and save news.CSS


Now the paging control should look like the screenshot below.


Finally the paging control is completed.

If you have any problems working with the DNM RAD module you can visit the DotNetMushroom Forums.

Comments