[Solved] Grid Virtual Scrolling Bound to Windows Azure Mobile Services

[Stuart]

Hi,

I have an Azure SQL database table that I'm developing a Windows 8 app around using Windows Azure Mobile Services.

I'm having a hard time getting my head around data virtualization and how to connect your Grid component and the Mobile Services back end. You do some fantastic examples for the ASP Grid component, I just wondered if you could give me an example of setting up virtual scrolling using WAMS.

In an ideal world, I would like a Grid with virtual scrolling (100 results per query), linked with your Autocomplete component, so that when you type in the Autocomplete box, it gives you suggestions and filters the Grid simultaneously. I don't know how possible this is, considering that there are 100,000 records to search through.

Any help with this would be greatly appreciated, as I am scratching my head a little.

Thanks,
Stuart

[Tsvetina]

Hello Stuart,

Connecting controls from Telerik UI for Windows 8 is very easy thanks to the DataSource component included in the suite.

To illustrate this, I have prepared a sample application based on the ToDoItem sample table in Azure (containing text and completed fields). To run it, you need to create this table in your account and provide the correct url and key for the Mobile Services connection in default.js. If you are going to try this, make sure you create at least 20 items in the table, so you can test the virtual scrolling and auto-complete filtering.

There are comments in the code that should help you understand the logic but here are the main steps:

1) Create a common Telerik.Data.DataSource for the RadGrid and RadAutoCompleteBox controls. Make sure you enable server filtering and paging, so that these operations are processed remotely and you only get <=pageSize items in the grid.

2) Define transport.read for the DataSource and build your Mobile Services query there including all page, sort and filter logic that you want to apply. If you want to enable editing in your grid, you also need to define transport.create, transport.update and transport.delete methods.

3) Set up RadGrid for virtual scrolling. Instructions are available here: Virtual Scrolling.

4) Define RadAutoCompleteBox and bind it to the same DataSource as RadGrid. This way, when you type in it, both the RadAutoComplete and RadGrid data will be filtered.

You can find the sample application attached to this message. I hope it helps you get started with your scenario.

Regards,
Tsvetina
Telerik

[Stuart]

Hi Tsvetina,

Thank you very much for the sample you provided, it has helped enormously. Can I just ask one thing? Can Autocomplete search more than one column simultaneously? I'm looking to have one search box that covers 3 columns, ie searching by part number, description or bin location. If not, is there any way of performing this without huge performance penalties?

Many thanks again,
Stuart

[Tsvetina]

Hi Stuart,

The filtering is actually determined by you and not the RadAutoCompleteBox in this specific scenario, as you are overwriting the read operation of the DataSource. Therefore, you can change the filtering logic by just modifying the logical expression in the where method. For example, a modification like that will check whether the description or part number of each data item starts with the text of the autocomplete:

read: function (options) {
    //get the text in the RadAutoCompleteBox input if there is such
    ensureSearchText();
    //here you can apply your server-side paging, sorting and filtering,
    //note that options contains any filter and sort expressions applied to the data source as well as paging arguments
    table.skip(options.data.skip)
        .take(options.data.take)
        .orderBy("text")
        .where(function (filter) {
            return (filter.length > 0 && (this.description.indexOf(filter) == 0 || this.partNumber.indexOf(filter) == 0)) || filter.length == 0;
        }, searchText)
        .includeTotalCount()
        .read()
        .done(options.success);
}

You can further modify the expression to fit your needs. You could use this Microsoft blog post as a reference: Playing with the query object in Read operations on Azure Mobile Services.

Regards,
Tsvetina
Telerik