devextreme with mobx

index.html

<!-- Using DevExtreme with mobx outside React. -->


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

<div id="my-button"></div>

<script>
    var data = [
        {
            "ID": 1,
            "CompanyName": "Super Mart of the West",
            "City": "Bentonville",
            "State": "Arkansas"
        },
        {
            "ID": 2,
            "CompanyName": "Electronics Depot",
            "City": "Atlanta",
            "State": "Georgia"
        },
        {
            "ID": 3,
            "CompanyName": "K&S Music",
            "City": "Minneapolis",
            "State": "Minnesota"
        },
        {
            "ID": 4,
            "CompanyName": "Tom's Club",
            "City": "Issaquah",
            "State": "Washington"
        },
        {
            "ID": 5,
            "CompanyName": "E-Mart",
            "City": "Hoffman Estates",
            "State": "Illinois"
        }
    ];

    function bindDxWidget(widget, options) {
        var observableOptions = observable(options);
        observableOptions.onOptionChanged = function (e) {
            console.info("option changed: " + e.fullName + " = " + e.value);

        };
        mobx.autorun(function () {
            for (var n in observableOptions) {
                console.info('item ' + n + ' = ' + observableOptions[n]);
            }
            widget.option(observableOptions);
        });
        return observableOptions;
    }

    var options = {
        //dataSource: data,
        //columns: [],
        disabled: false,
        searchPanel: {
            visible: true,
            text: ""
        }
    };

    var grid = $("#my-grid").dxDataGrid().dxDataGrid('instance');

    grid.option('dataSource', data);

    options = bindDxWidget(grid, options);

    $("#my-button").dxButton({
        text: "click",
        onClick: function () {
            var old = grid.option().searchPanel.visible;
            //grid.option({ searchPanel: { visible: !old } })
            grid.option('searchPanel.visible', !old);

            //options.searchPanel.visible = !options.searchPanel.visible;
            //options.disabled = !options.disabled;
            
            //console.info("obs now: " + obs());
        }
    });

</script>