Wijmo Grid for LightSwitch HTML is mainly used with database i.e. in bound mode but many developers have requirement of adding some unbound columns. In Wijmo Grid, every operation say filtering, sorting, paging, scrolling etc. is designed to be a server-side operation. So, for adding unbound columns, we need to make everything work at client side

This blog demonstrates how you can use Local properties in Wijmo Grid for LightSwitch HTML.

To start with, create a LightSwitch HTML application and add a Wijmo Scrolling Grid screen. After that, you can bind the grid with the datasource and make sure that you have turned off paging for the screen query.

SupportPaging

Now, click on the 'Add Data Item' and create a local property say 'Unbound'.

Unbound

Using the column’s cellFormatter, you can display the unbound values in this column and add the unbound values into the grid’s internal data array. Here’s the code you can use:
//access the column and handle the cellFormatter
var unbound = grid.FindColumn("Unbound");
unbound.cellFormatter = function (args) {
if (args.row.type & wijmo.grid.rowType.data) {
var obj = grid.GetRowEntity(args.row.dataRowIndex);
args.formattedValue = args.row.data[1] = obj.ProductID;
}
};

In the above code, GetRowEntity function gives you the LightSwitch entity for a row, so you can access properties by name. The l-value args.row.data[1] stores the unbound value in the appropriate array slot so that client-side filtering and sorting can work.

In order to apply sorting and filtering on this unbound column, you need to disable the server side filtering and sorting by commenting out the following lines in the generated code:
// sorting
allowSorting: true,
// sorting: grid.Sorting,

// filtering
showFilter: true,
// filtering: grid.Filtering,

You may also refer to this sample for complete implementation.

NoteThe only drawback is that turning off paging is impractical for large tables. However, if you want to have unbound columns with large tables, you can still use server-side sorting/paging/scrolling (set allowSort to false on the unbound columns), but you’ll have to disable filtering.