LightSwitch HTML Edition
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/>");

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

    msls.showProgress(msls.promiseOperation(function (operation) {
        $.getJSON(url, function (data) {
        }).error(function (args) {
    }).then(function (result) {
        var json = c1ls.getJsonData(result);
            columnsAutogenerationMode: "none",
            columns: json.Columns,
            data: json.Rows,
            readAttributesFromData: true,
            showSelectionOnRender: false
    }, 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 });


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:

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.
See Also



Copyright (c) GrapeCity, inc. All rights reserved.

Documentation Feedback  |  Product Support Forum