Grid

Member Of	Wijmo Collection Control
Base Control	wijgrid
Description	Creates a customizable multi-column data grid that supports selection, editing, sorting, filtering, scrolling, and grouping.
Usage	Apply to a collection with at least one visible entity property. The order and visibility of the entity properties determine the display order and bindings of individual columns.

Generated Code	Copy Code
myapp.ScreenName.EntityName_render = function (element, contentItem) { var table = $("<table/>"); table.appendTo($(element)); contentItem.value.oncollectionchange = function () { var grid = c1ls.getGridContent(table, contentItem); table.wijgrid({ // initialization columns: grid.Columns, data: grid.Rows(), // editing allowEditing: false, afterCellUpdate: grid.OnCellUpdate, currentCellChanged: grid.OnCellChanged, // sorting allowSorting: true, sorting: grid.Sorting, // filtering showFilter: false, filtering: grid.Filtering, // selection selectionMode: "singleRow", showRowHeader: grid.ShowRowHeader, showSelectionOnRender: false, cellClicked: grid.OnCellClicked, cellStyleFormatter: grid.OnCellFormat }); }; c1ls.renderControl(contentItem); };

Generated Code

Copy Code

myapp.ScreenName.EntityName_render = function (element, contentItem) {

    var table = $("<table/>");
    table.appendTo($(element));

    contentItem.value.oncollectionchange = function () {
        var grid = c1ls.getGridContent(table, contentItem);

        table.wijgrid({
            // initialization
            columns: grid.Columns,
            data: grid.Rows(),

            // editing
            allowEditing: false,
            afterCellUpdate: grid.OnCellUpdate,
            currentCellChanged: grid.OnCellChanged,

            // sorting
            allowSorting: true,
            sorting: grid.Sorting,

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

            // selection
            selectionMode: "singleRow",
            showRowHeader: grid.ShowRowHeader,
            showSelectionOnRender: false,
            cellClicked: grid.OnCellClicked,
            cellStyleFormatter: grid.OnCellFormat
        });
    };

    c1ls.renderControl(contentItem);
};

Remarks

This widget will not render until the screen collection to which it is bound is loaded (that is, when the oncollectionchange event fires). If the underlying query is re-executed with different sort or filter criteria, then the widget will re-render accordingly. The final line of code calls the c1ls.renderControl method to ensure proper rendering in tabs and popups, and to handle collections that have already been loaded.

The utility method c1ls.getGridContent parses the child properties defined in the screen designer and returns an object used to initialize the wijgrid control. This object has the following properties:

Columns, an array of column descriptor objects used to initialize the widget’s columns option. The bindings, data types, format strings, and headers are all derived from the control’s contentItem.
Rows, a function that returns an array of data rows to display. This function automatically adjusts to any end-user operations that have been performed, including paging, scrolling, sorting, and filtering.
Sorting, a function that translates end-user sorting operations into server-side queries. This property is used to initialize the widget’s sorting option, effectively replacing the default Wijmo client-side sorting behavior with the appropriate LightSwitch server-side operation.
Filtering, a function that translates end-user filtering operations into server-side queries. This property is used to initialize the widget’s filtering option, effectively replacing the default Wijmo client-side filtering behavior with the appropriate LightSwitch server-side operation.
NextPage, a function that retrieves the next page of data from the server or cache. This is only used in conjunction with the Wijmo Grid Screen (Paging) template.
PreviousPage, a function that retrieves the previous page of data from the cache. This is only used in conjunction with the Wijmo Grid Screen (Paging) template.
ShowRowHeader, a boolean used to initialize the widget’s showRowHeader option. This will be true if a Tap handler was associated with the control’s Columns Layout element.
OnCellChanged, a function used to initialize the widget’s currentCellChanged option. This function ensures that the in-cell editor remains visible when allowEditing is true.
OnCellClicked, a function used to initialize the widget’s cellClicked option. This function implements the widget’s default row selection behavior.
OnCellFormat, a function used to initialize the widget’s cellStyleFormatter option. This function controls the mouse cursor and entity state icons for row header cells when ShowRowHeader is true.
OnCellUpdate, a function used to initialize the widget’s afterCellUpdate option. This function implements the widget’s default in-cell editing behavior when allowEditing is true.
FindColumn, a function that accepts an entity property name and returns the corresponding entry from the Columns array. Use this function if you need to specify additional column options such as format strings or aggregates.
EntityChanged, a function used to notify the grid when the application code modifies or deletes the selected item, or creates a new item. For an example, see the generated code for the Wijmo Grid Screen (Editing) template.
GetRowEntity, a function that accepts a row index and returns the underlying LightSwitch entity. It is useful for implementing custom cell formatters, as it provides direct access to entity properties that may not be derivable from grid columns.
Redraw, a function that redisplays the entire grid to ensure proper column rendering. You may need to call this function in the afterClosed option of a custom navigation operation.

Note that you cannot substitute your own array for the Columns array returned by c1ls.getGridContent. However, you can modify this array prior to calling the wijgrid constructor, as in the following example:

Code	Copy Code
var grid = c1ls.getGridContent(table, contentItem); var qty = grid.FindColumn("Qty"); qty.dataFormatString = "n0"; qty.aggregate = "sum"; qty.footerText = "Total={0}"; table.wijgrid({ // initialization columns: grid.Columns, data: grid.Rows(), showFooter: true, // remaining options... });

Code

Copy Code

var grid = c1ls.getGridContent(table, contentItem);

var qty = grid.FindColumn("Qty");
qty.dataFormatString = "n0";
qty.aggregate = "sum";
qty.footerText = "Total={0}";

table.wijgrid({
    // initialization
    columns: grid.Columns,
    data: grid.Rows(),
    showFooter: true,

    // remaining options...
});

Note that the widget's showFooter option needs to be explicitly enabled for the column option footerText to have any effect.