Grid fxGrid, fxDataGrid (fx.grid.js)

2015-08-24

Applies To: Windows Azure Pack

Display a list of items. There are two types of grids: fxGrid for simply showing a table of data (includes column formatting), and fxDataGrid which is built on top of fxGrid and includes support for data binding, pagination, searching within the list, and other features.

Windows Azure Pack fxGrid

Supported Services

Service	Supported
Undo/Redo	Not Applicable
Validation	Not Applicable

Widgets

$("Selector").fxGrid()

Properties

Name	Type	Description
fx.fxGrid.options.columns	Array	Available columns. Each column can contain one of the following: name : Column name to put in the header (default "") field : Property of the data context to bind to from the data (default "") formatter : Function responsible for rendering the contents of a cell. Signature: function formatter(value, { dataItem, rowMetadata, columnDefinition, rowNumber, columnNumber, filter }) { } (default function default 'return value \|\| ""'). For more information, see $.fxGridFormatter.bundle(...) and $.fxGridFormatter.default(...). sortFormatter : Used to format a cell value in order to sort its containing row. Signature: function sortFormatter(value, { dataItem, columnDefinition }). filterFormatter : Used for filtering cells in the grid. Signature: function filterFormatter(value, { dataItem, columnDefinition }). cssClass : A CSS class to add to the cells, the class will be added to the header and body cells (default "")
fx.fxGrid.options.data	Array	Array of data from which rows are rendered.
fx.fxGrid.options.groups	Array	The available groups. Each group can contain one of the following: key : Key of the group (default "") text : Text of the group displayed (default "") expanded : Indicate if the group is expanded (default true)
fx.fxGrid.options.maxHeight	Number	Indicates that the header will be fixed allowing only the data to be scrollable. This creates 2 tables. The data height must be set in pixels. Set to null if this behavior is not desired.
fx.fxGrid.options.noRows	String	Message showing when no data is available in the table.
fx.fxGrid.options.retainRowMetadata	Boolean	Indicates whether row metadata is retained for data items when they are removed from the 'data' array (the array of data items rendered as grid rows).
fx.fxGrid.options.rowMetadata	Array	Metadata for data items as they are rendered in the grid. Each row can contain one of the following: * dataItem : Data item to be displayed in the cells, based on columns.field (default {}) * group : Attach the row to a group key, see groups option (default "") * cssClass : A CSS class to add on the row (default "")
fx.fxGrid.options.text	Object	Text used in the widget.
fx.fxGrid.options.url	String	Image URLs used in this widget.
fx.fxGrid._references.columns	Boolean
fx.fxGrid._references.data	Boolean	Data references
fx.fxGrid._references.groups	Boolean	Groups references
fx.fxGrid._references.rowMetadata	Boolean	Row metadata references

Methods

Name	Description	Returns	Parameters
fx.fxGrid.destroy	Destroys the widget	Nothing	None
fx.fxGrid.getAllRowMetadata	Gets the current row metadata used by the grid.	Object	item (Object): A data item.
fx.fxGrid.refresh	Refreshes the header size.	Nothing	None

Sample

<!DOCTYPE HTML>

<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta charset="utf-8"/>
        <title>Simple Grid Examples</title>
        <!-- Style Links -->
        <link href="/Content/_oss/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" /> 
        <link href="/Content/UxFxCss.css" rel="stylesheet" type="text/css" />
        <link href="/Extensions/Samples/ControlsPlayground/Styles/ControlsPlaygroundExtension.Samples.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <div id="scriptLinksContainer">
            <!-- JQuery scripts-->
            <script src="/Scripts/_oss/jquery-1.7.1.js"></script>
            <script src="/Scripts/_oss/jquery-ui-1.8.18.js"></script>

            <!-- Knockout script -->
            <script src="/Scripts/_oss/knockout-2.1.0.js"></script>

            <!-- fx shell scripts -->
            <script src="/Scripts/UxFxScript.js"></script>
        </div>

        <!-- Sample HTML Code -->
        <div id="sampleHTMLCodeContainer">
            <div id="render">
            </div>

            <div class="options">
                <button id="add">Add row</button>
                <button id="remove">Remove row</button>
            </div>
            <div class="options">
                <label><input type="checkbox" id="selectable"/> Selectable</label>
                <label><input type="checkbox" id="multiselect"/> Multiselect</label>
            </div>

            <div id="grid"></div>
        </div>

        <div id="sampleScriptCodeContainer">
            <!-- Sample Script Code -->
            <script type="text/javascript">
                //Initialize our grid
                var numbers = 10;
                publicrows = rows = [];
                for (var i = 1; i <= numbers; i++) {
                    rows.push({ type: "Type " + i, status: "Status " + i, subscription: "Subscription " + i, ___location: "Field " + i });
                }
                rows[3].selected = true; //Default with row selected
                rows[4].disabled = true; //disable this row

                //Add a new row
                $("#add").click(function() {
                    var rows2 = $("#grid").fxGrid("option", "data");
                    $.observable(rows2).insert(rows2.length, { type: "New Row Added", status: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum rhoncus accumsan eros, volutpat laoreet ligula porta", subscription: "Subscription Just Added", ___location: "Location Just Added" });
                });

                //Remove a row
                $("#remove").click(function() {
                    var rows2 = $("#grid").fxGrid("option", "data");
                    $.observable(rows2).remove(rows2.length - 1, 1);
                });

                //Make the grid selectable
                $("#selectable").click(function() {
                    $("#grid").fxGrid("option", "selectable", $(this).prop("checked"));
                });

                //Enable multi-selection in the grid
                $("#multiselect").click(function() {
                    $("#grid").fxGrid("option", "multiselect", $(this).prop("checked"));
                });

                //Initialize our grid
                $("#grid")
                    .fxGrid({
                        columns: [ //list of columns to display
                            { name: "Type", field: "type" },
                            { name: "Status", field: "status" },
                            { name: "Subscription", field: "subscription" },
                            { name: "Location", field: "___location" }
                        ],
                        rowSelect: function() {
                            //Bind an event when a row is selected
                        },
                        data: rows, //data for the grid
                        selectable: false, //default value
                        multiselect: false, //default value
                        maxHeight: 400 //max height in pixels
                    });
            </script>
        </div>
    </body>
</html>

Share via