Sep 29

Written by: Michael Washington
9/29/2013 6:01 AM 

This article demonstrates one method to implement paging and sorting in the LightSwitch HTML Client. This example uses a PreprocessQuery that takes parameters.

Note that LightSwitch automatically handles paging, however it uses infinite scrolling. This means that as you scroll through a list of records, it automatically loads more.

The PreprocessQuery

For sample data we use the Northwind ODATA sample data service at:

http://services.odata.org/Northwind/Northwind.svc/

We import only the Customer table as read only.

We right-click on the Customer table and select Add Query.

We create a query called CustomersByPage that takes paramPage and paramSort parameters.

We then select the PreprocessQuery method to write our custom query.

We use the following code:

 

        partial void CustomersByPage_PreprocessQuery
            (
            int? paramPage, string paramSort, ref IQueryable<Customer> query)
        {
            // Set the Sort
            if (paramSort == "CompanyName")
            {
                query = query.OrderBy(x => x.CompanyName);
            }
            if (paramSort == "City")
            {
                query = query.OrderBy(x => x.City);
            }
            // Paging must be set last
            if (paramPage != null)
            {
                int intStartingRecord = (Convert.ToInt32(paramPage) * 10);
                query = query.Skip(intStartingRecord).Take(10);
            }
        }
    }

 

The query shows in the Solution Explorer.

The Screen

We create a screen and add the PreprocessQuery to to the screen.

The collection will show up in the View Model.

In the Properties for the collection we uncheck Support paging because we will handle it ourselves.

We create two parameters using the Add Data Item button and connect them to the the parameters in the collection (see: Server Side Search using the LightSwitch HTML Client for an example of how to connect collection parameters to  View Model properties).

 

To set the default values when the application loads, we select Write Code then the created method and use the following code:

 

myapp.BrowseCustomers.created = function (screen) {
    // Set defaults
    screen.Page = 0;
    screen.Sort = "CompanyName";
};

 

Previous and Next Buttons

Next we create Previous and Next buttons and use the following code:

 

myapp.BrowseCustomers.PreviousPage_execute = function (screen) {
    // If we are not on the first page...
    if (screen.Page !== 0) {
        // Go back one page
        screen.Page = screen.Page - 1;
        // Refresh the collection
        screen.CustomersByPage.load();
    }
};
myapp.BrowseCustomers.NextPage_execute = function (screen) {
    // Go forward one page
    screen.Page = screen.Page + 1;
    // Refresh the collection
    screen.CustomersByPage.load();
    // See if we have gone too far
    if (screen.CustomersByPage.count == 0) {
        // Go back one page
        screen.Page = screen.Page - 1;
        // Refresh the collection
        screen.CustomersByPage.load();
    }
};

 

Sort Button

We create a Sort button and use the following code:

 

myapp.BrowseCustomers.SortButton_execute = function (screen) {
    if (screen.Sort == "CompanyName") {
        screen.Sort = "City";
        // Refresh the collection
        screen.CustomersByPage.load();
        screen.SortButton = "City";
    }else{
        screen.Sort = "CompanyName";
        // Refresh the collection
        screen.CustomersByPage.load();
        screen.SortButton = "Company Name";
    }
};

 

To dynamically change the text on the button, we click on the button and use the following code in the PostRender method:

 

myapp.BrowseCustomers.SortButton_postRender = function (element, contentItem) {
    // Set up a databind that will be raised when the Sort value is changed
    contentItem.dataBind("value.details.screen.Sort", function (sortValue) {
        if (sortValue !== 'undefined' && sortValue !== null) {
            if (sortValue == "CompanyName") {
                element.innerHTML = "<u>Click to sort by City</u>";
            } else {
                element.innerHTML = "<u>Click to sort by Company Name</u>";
            }
        }
    });
};

 

Other Methods

You can perform paging and sorting using pure JavaScript. This would be required if you wanted to implement dynamic code, for example in a custom control.

See:

HUY Volume II - Visual Studio LightSwitch Advanced JavaScript Examples

LightSwitch HTML Client For The Desktop Web Browser

 

Links

HUY Volume II - Visual Studio LightSwitch Advanced JavaScript Examples

LightSwitch HTML Client For The Desktop Web Browser

Top 10 things to know about the LightSwitch HTML Client

Understanding The LightSwitch HTML Client Visual Collection

Dynamically Creating Records In The LightSwitch HTML Client

Download Code

The LightSwitch project is available at http://lightswitchhelpwebsite.com/Downloads.aspx

(you must have Visual Studio 2012 (or higher) installed to run the code)