You are here:   Blog
Register   |  Login

 

Sep 29

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

image

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

image

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.

image

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

image

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);
            }
        }
    }

 

image

The query shows in the Solution Explorer.

The Screen

image

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

image

The collection will show up in the View Model.

image

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

image

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).

image

 

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

image

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

image

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";
    }
};

 

image

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)

7 comment(s) so far...


Gravatar

Re: Paging and Sorting in LightSwitch HTML Client

Nice job Michael. Very easy to follow, and very useful examples that can be applied to many html client forms.

The quality, and detail to your examples have just been getting better and better. Keep up the great work. It is appreciated.

By DanGleason on   10/4/2013 1:25 PM
Gravatar

Re: Paging and Sorting in LightSwitch HTML Client

@DanGleason - Thank you for the feedback, it is appreciated.

By Michael Washington on   10/4/2013 1:37 PM
Gravatar

Re: Paging and Sorting in LightSwitch HTML Client

Very nice job. You're doing a lot of work for everyone. Thanks for that.

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";
}
};


In your code [screen.SortButton = "City";] and [screen.SortButton = "Company Name";] has no effect so it is also not necessary.
If I'm wrong, would you please explain what effect does it have.

By Faruk on   5/3/2014 1:59 PM
Gravatar

Re: Paging and Sorting in LightSwitch HTML Client

@Faruk - it is suppose to change the label on the sort button.

By Michael Washington on   5/3/2014 1:59 PM
Gravatar

Re: Paging and Sorting in LightSwitch HTML Client

Thank you very much Michael for your great website.
I applied the process you talked about here.
my issue is that my screen of CustomersByPage shows just 10 customer per page. how can I change that to for example 15 customer per page?

By fatima on   7/16/2014 9:57 AM
Gravatar

Re: Paging and Sorting in LightSwitch HTML Client

@Fatima - In the code change "Take(10);" to "Take(15);"

By Michael Washington on   7/16/2014 9:58 AM
Gravatar

Re: Paging and Sorting in LightSwitch HTML Client

Thank you
great

By fatima on   7/16/2014 3:35 PM

Your name:
Gravatar Preview
Your email:
(Optional) Email used only to show Gravatar.
Your website:
Title:
Comment:
Security Code
CAPTCHA image
Enter the code shown above in the box below
Add Comment   Cancel 

Microsoft Visual Studio is a registered trademark of Microsoft Corporation / LightSwitch is a registered trademark of Microsoft Corporation