DMXzone App Connect Data Traversal: Data View Component

We inserted an empty HTML table on our page. We also added a few simple HTML buttons, which will be used for sorting and paging. Let's setup the dynamic data. Open the server connect panel (1), create a new server action (2) and name it datagrid (3). Right-click steps (4) and add a database connection (5).

Load an existing connection or create a new one (1), right-click the connection step (2) and add a database query (3).

Name your query (1) and setup its options (2).

Select your database table and add it (1). Then add the columns that you need (2) and click OK (3).

Don't forget to save your action file.

Now, open the App Connect panel (1) and add App Connect to your page (2).

Click the add new component button (1) and under data, select server connect (2).

Now, click the select server action button (1), browse the server action (2), which we created and click select (3).

Right-click the server connect component (1) and select data view component (2).

Select the data source for the data view component (1). Under server connect, data, browse your query (2) and click select (3).

Now, let's setup the default sorting options. Click the dynamic data picker (1) in order to select a column to sort the data on. Browse a column (2) and click select (3).

Select the sort direction from the dropdown. We choose ascending (2) and choose 15 numbers of records (2) to be displayed per page. And we are done with the initial setup of the data view component.

Now, let's bind the dynamic data on our page. Select the table row, add a new dynamic attribute (2) and select repeat (3).

Then, select the expression (2) for the repeat (1). In data view, browse data (3) and click select (4).

Click inside your table cell (1) and click the insert data binding button (2).

Choose the data (1) that you want to bind and click select (2). Do the same for the rest of the table cells.

Now, let's setup the dynamic sorting options. We inserted simple HTML buttons in the table header. We want to use them to sort the column in ascending or descending order. In the column, which you want to sort on, click the button (1) which you want to use to sort in ascending order. Add a dynamic event (2) and under mouse, select click (3).

Click the action picker button (1), browse the sort action (2) and enter the name of the column to sort on. We call it make (3). We also add ASC for ascending order (4). If you wish to sort on descending order, add DESC. when you're done, click select (5). Do the same for the button, which you want to use for sorting in descending order.

Now, let's setup the dynamic paging options. We have two buttons below the table for previous page and next page. Select the next page button (1) add a dynamic event (2) and under mouse, select click (3).

Now, click the actions picker button (1), browse the next page action (2) and click select (3).

In this next step, we will show you, how to hide the next button, when the users reaches the last page. With the next page button still selected, click the dynamic attributes button (1) and under display, select show (2).

Click the dynamic data picker (1) to select when to show the next page button. Browse next (2) and click select (3).

Now, our next page button will only be displayed when there is a next page available. Do the same for the previous button, this time selecting the action, called previous and also hide it, when there is no previous page available.

The last thing that we want to show you in this tutorial is how to show the current page status and total pages count. Click anywhere on your page, where you want to show this info and type page (1). Click the insert bindings button (2) and under data view component, browse page (3) and click select (4).

Тhen, we enter of (1) and click the insert binding button (2).

Under the data view component, we browse pages (1) and select it (2).

And we are done. We created a data table, which is sortable and has nice paging buttons, as well as page status info. Let's preview the results.