JSON Grid

Member Of	Wijmo Custom Control
Base Control	wijgrid
Description	Creates a bar chart for displaying tabular JSON-encoded data.
Usage	Apply to screen content. First add a new custom control bound to the screen, then change its type to Wijmo Custom Control.

Generated Code	Copy Code
myapp.ScreenName.ScreenContent_render = function (element, contentItem) { var table = $("<table/>"); table.appendTo($(element)); // Replace with the URL for your Web API var url = "../Folder/Controller/"; msls.showProgress(msls.promiseOperation(function (operation) { $.getJSON(url, function (data) { operation.complete(data); }).error(function (args) { operation.error(args); }); }).then(function (result) { var json = c1ls.getJsonData(result); table.wijgrid({ columnsAutogenerationMode: "none", columns: json.Columns, data: json.Rows, readAttributesFromData: true, showSelectionOnRender: false }); table.wijgrid("doRefresh"); }, function (args) { if (args.responseText.charAt(0) === "{") { var ex = $.parseJSON(args.responseText); msls.showMessageBox(ex.ExceptionMessage, { title: ex.Message }); } else { msls.showMessageBox(args.statusText, { title: "HTTP Error " + args.status }); } })); };

Generated Code

Copy Code

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

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

    // Replace with the URL for your Web API
    var url = "../Folder/Controller/";

    msls.showProgress(msls.promiseOperation(function (operation) {
        $.getJSON(url, function (data) {
            operation.complete(data);
        }).error(function (args) {
            operation.error(args);
        });
    }).then(function (result) {
        var json = c1ls.getJsonData(result);
        table.wijgrid({
            columnsAutogenerationMode: "none",
            columns: json.Columns,
            data: json.Rows,
            readAttributesFromData: true,
            showSelectionOnRender: false
        });
        table.wijgrid("doRefresh");
    }, function (args) {
        if (args.responseText.charAt(0) === "{") {
            var ex = $.parseJSON(args.responseText);
            msls.showMessageBox(ex.ExceptionMessage, { title: ex.Message });
        }
        else {
            msls.showMessageBox(args.statusText, { title: "HTTP Error " + args.status });
        }
    }));
};

Remarks

This widget will not render unless the getJSON method returns a valid response. You should replace the string constant with the appropriate URL for your Web API Controller. The msls.showProgress wrapper displays the intrinsic LightSwitch progress animation while the Web API is executing, and ensures that the control will not be rendered until this operation completes successfully.

Unlike the Grid widget that binds to screen collections, the JSON Grid widget does not contain any entity properties in the screen designer. The shape of the result set is determined by the Web API Controller.

The utility method c1ls.getJsonData parses the data returned by the Web API Controller 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.
Rows, an array of data rows used to initialize the widget’s data option.
Series, an array of data series objects derived from the result set and optionally used to initialize the seriesList option of a separate JSON Chart widget.
Hint, an object that defines the tooltip to use for a chart. This property is optionally used to initialize the hint option of a separate JSON Chart widget.

The return value from c1ls.getJsonData can also be used to initialize a JSON Chart widget on the same screen. This is how the Wijmo OLAP Screen template implements its Chart View tab.