You may not be authorized to see this content. Please contact Data Access Europe for more information.

Cancel Data Access Europe

You are not authorized to see this content.

Cancel Data Access Europe

Getting the most out of the WebList

Introduction (0m 34s)

Row Layout (3m 26s)

WebListExpandPanel (2m 26s)

Manually filling the list (2m 41s)

Horizontal Scrolling (1m 03s)

Infinite Scrolling (1m 40s)

Client side sorting and Conclusion (2m 01s)

Next lesson:

WebListExpandPanel

Cancel

Getting the most out of the WebList

Lesson 1 - Row Layout

There are a few things you can do to customize the row layout of the weblist:

The first is setting pbNewLine on the column. Setting this to true will result in the current column and all the columns after showing in a new line
Set piListColSpan or piListRowSpan to enlarge the column to span out to more columns or rows
Set pre-defined css for the weblist “MobileList” that styles the list to make it more appealing when used in a mobile drill-down select view
Use some pre-defined css for the columns like the “RowCaption” or “RowDetail”
When a column has data that is too large to show. You could use peWordBreak to either cut-off text with 3 dots, or (pre)wrap text so that lines will be broken at the end and start over at the beginning
Setting pbFixedWidth will result in the piWidth, which is set for each column, to be used as a fixed size instead of a ratio
Setting peAlign will align the value of the column

Now let’s show you how you use these properties on the weblist.

DEMONSTRATION

I have already setup a new workspace. With the tables and data from the WebOrderMobile example
I have setup a new select view with only a weblist in it. Let’s start by adding the Customer Data Dictionary using the DDO Explorer panel
Now I am going to add a few columns to show more information about the customer in the list
This looks just like a standard list
Now let’s start by adding the pbNewLine to the address column
As you can see the Customer Name column is only using 1 column
Now set the piListColSpan to 4 on the Customer Name column. And now it will take up all 4 columns of the list
Now I am going to add an extra column in between the customer name and the address. That will show you the comments of the customer. And set the piListRowSpan to 2. This will use up 2 rows to show the data
To style the row even more I am going to add the MobileList css class to the weblist
As you can see there is less spacing between the columns
Now Let’s add the RowCaption css to the Customer Name column and the RowDetail to the other columns
Now you can see that the Customer Name is a little bigger. And the other columns are smaller and have a different color. As you can see the Comments column is not showing all data from some of the columns
Let's add peWordBreak with wbWrap to the comment’s column
Now all the data from the column is shown
Now let’s add pbFixedWidth to all columns. And set the piWidth of Customer name to 325, Comments to 200, Address to 200, State to 25
Now it will show the columns to the size you set them to
At last lets set peAlign of State and City to alignCenter as this will now align in the center of the column

Alright now let’s go to the next lesson where I will show you the Expandable panel.