var __extends = (this && this.__extends) || (function () {
    var extendStatics = Object.setPrototypeOf ||
        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
var NullValues = /** @class */ (function (_super) {
    __extends(NullValues, _super);
    function NullValues() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.state = {
            data: Util.getData(),
        };
        return _this;
    }
    NullValues.prototype.render = function () {
        return React.createElement("div", null,
            React.createElement("h2", null, "Handling Null Values"),
            React.createElement("p", null, "By default, FlexGrid allows you to enter empty values in columns of the type string, and will not allow empty/null values in columns of any other type."),
            React.createElement("p", null,
                "You can change this behavior using the ",
                React.createElement("b", null, "isRequired"),
                " property on grid columns. If you set the ",
                React.createElement("b", null, "isRequired"),
                " property to false, the grid will allow you to enter empty values in that column, regardless of type. Conversely, if you set the ",
                React.createElement("b", null, "isRequired"),
                " property to true, the grid will not allow empty values even in string columns."),
            React.createElement("p", null,
                "Setting ",
                React.createElement("b", null, "isRequired"),
                " to null reverts to the default behavior in FlexGrid (nulls are allowed only in string columns)."),
            React.createElement("p", null,
                "The grid below reverts the default behavior. It sets ",
                React.createElement("b", null, "isRequired"),
                " to true for the first column and to false for the others. You can delete the content that is not required by entering an empty string, or simply by pressing the delete key."),
            React.createElement("div", { className: "row" },
                React.createElement("div", { className: "col-md-6" },
                    React.createElement("ul", { className: "nav nav-tabs", role: "tablist" },
                        React.createElement("li", { className: "active" },
                            React.createElement("a", { href: "#nvJsx", role: "tab", "data-toggle": "tab" }, "JSX")),
                        React.createElement("li", null,
                            React.createElement("a", { href: "#nvJs", role: "tab", "data-toggle": "tab" }, "JS"))),
                    React.createElement("div", { className: "tab-content" },
                        React.createElement("div", { className: "tab-pane active pane-content", id: "nvJsx" },
                            ' <Wj.FlexGrid itemsSource={this.state.data} >\n',
                            '     <Wj.FlexGridColumn header="Country" binding="country" width="*" isRequired={true} />\n',
                            '     <Wj.FlexGridColumn header="Date" binding="date" isRequired={false} />\n',
                            '     <Wj.FlexGridColumn header="Revenue" binding="amount" format="n0" isRequired={false} />\n',
                            '     <Wj.FlexGridColumn header="Active" binding="active" isRequired={false} />\n',
                            ' </Wj.FlexGrid>\n'),
                        React.createElement("div", { className: "tab-pane pane-content", id: "nvJs" },
                            'state =\n',
                            '{\n',
                            '    data: Util.getData()\n',
                            '}\n',
                            'function getCountries() {\n',
                            '    return \'US,Germany,UK,Japan,Italy,Greece\'.split(\',\');\n',
                            '}\n',
                            'function getData() {\n',
                            '    var countries = getCountries(),\n',
                            '        data = [];\n',
                            '    for (var i = 0; i < 100; i++) {\n',
                            '        data.push({\n',
                            '            id: i,\n',
                            '            country: countries[i % countries.length],\n',
                            '            date: new Date(2014, i % 12, i % 28),\n',
                            '            amount: Math.random() * 10000,\n',
                            '            active: i % 4 == 0\n',
                            '        });\n',
                            '    }\n',
                            '    return data;\n',
                            '}'))),
                React.createElement("div", { className: "col-md-6" },
                    React.createElement("h4", null, "Result (live):"),
                    React.createElement(Wj.FlexGrid, { itemsSource: this.state.data },
                        React.createElement(Wj.FlexGridColumn, { header: "Country", binding: "country", width: "*", isRequired: true }),
                        React.createElement(Wj.FlexGridColumn, { header: "Date", binding: "date", isRequired: false }),
                        React.createElement(Wj.FlexGridColumn, { header: "Revenue", binding: "amount", format: "n0", isRequired: false }),
                        React.createElement(Wj.FlexGridColumn, { header: "Active", binding: "active", isRequired: false })))));
    };
    return NullValues;
}(React.Component));
//# sourceMappingURL=NullValues.js.map