jQuery UI Widgets Forums Editors Button, RepeatButton, ToggleButton, LinkButton Observable button binding support?

This topic contains 7 replies, has 2 voices, and was last updated by  Mr.Moo 8 years, 7 months ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • Observable button binding support? #76906

    Mr.Moo
    Participant

    Hi,

    According to support for this we being considered some time ago, is there any progress on this?


    Moo

    Observable button binding support? #76908

    Mr.Moo
    Participant

    http://www.jqwidgets.com/community/topic/jqxbutton-enable-binding/

    Link binding did not work so here is the reference.

    Observable button binding support? #76958

    ivailo
    Participant

    Hi Mr.Moo,

    About jqxButton you can have only disabled as an observable property.
    The value can be true or false.

    Best Regards,
    Ivailo Ivanov

    jQWidgets Team
    http://www.jqwidgets.com

    Observable button binding support? #76970

    Mr.Moo
    Participant

    Hello ivailo, that’s great news and all I really want to be honest, but can you tell me how I do this for a button created dynamically as shown in the jqxGrid with Statusbar example as I see no data binding references in the button’s API documentation.

    Observable button binding support? #77076

    ivailo
    Participant

    Hi Mr.Moo,

    This code probably will be helpful:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title id='Description'>This example shows how to integrate jqxGrid with Knockout.js.
        </title>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="../../scripts/json2.js"></script> 
        <script type="text/javascript" src="../../scripts/knockout-3.0.0.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxknockout.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
        <script type="text/javascript" src="../../scripts/demos.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                var initialData = [
                    { name: "Well-Travelled Kitten", sales: 352, price: 75.95 },
                    { name: "Speedy Coyote", sales: 89, price: 190.00 },
                    { name: "Furious Lizard", sales: 152, price: 25.00 },
                    { name: "Indifferent Monkey", sales: 1, price: 99.95 },
                    { name: "Brooding Dragon", sales: 0, price: 6350 },
                    { name: "Ingenious Tadpole", sales: 39450, price: 0.35 },
                    { name: "Optimistic Snail", sales: 420, price: 1.50 }
                ];
    
                var GridModel = function (items) {
                    this.items = ko.observableArray(items);
                    this.disabled = ko.observable(false);
                    this.disabledButtonAdd = ko.observable(false);
                    this.disabledButtonDelete = ko.observable(false);
    
                    this.addItem = function () {
                        // add a new item.
                        if (this.items().length < 20) {
                            this.items.push({ name: "New item", sales: Math.round(Math.random() * 100), price: Math.round(Math.random() * 100) });
                        }
                    };
    
                    this.removeItem = function () {
                        // remove the last item.
                        this.items.pop();
                    };
    
                    this.renderstatusbar = function (statusbar) {
                        // appends buttons to the status bar.
                        var container = $("<div style='overflow: hidden; position: relative; margin: 5px;'></div>");
                        var addButton = $("<div data-bind='click: addItem, jqxButton: { disabled: disabledButtonAdd }' style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;' src='../../images/add.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>Add</span></div>");
                        var deleteButton = $("<div data-bind='click: removeItem, jqxButton: { disabled: disabledButtonDelete }' style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;' src='../../images/close.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>Delete</span></div>");
                        container.append(addButton);
                        container.append(deleteButton);
                        statusbar.append(container);
                        addButton.jqxButton({  width: 60, height: 20 });
                        deleteButton.jqxButton({  width: 65, height: 20 });
                    },
    
                    this.updateItem = function () {
                        // update the first item.
                        var item = {};
                        if (initialData.length > 0) {
                            item.name = initialData[Math.floor(Math.random() * initialData.length)].name;
                            item.sales = Math.floor(Math.random() * 500);
                            item.price = Math.floor(Math.random() * 200);
                            this.items.replace(this.items()[0], item);
                        }
                    };
                };
    
                ko.applyBindings(new GridModel(initialData));
            });
        </script>
    </head>
    <body class='default'>
        <div id='jqxWidget'>
            <div data-bind="jqxGrid: {source: items, disabled: disabled, autoheight: true,
                    editable: true,
                    selectionmode: 'singlecell',
                    showstatusbar: true,
                    renderstatusbar: renderstatusbar,
                columns: [
                { text: 'Name', dataField: 'name', width: 200 },
                { text: 'Sales', dataField: 'sales', width: 200, cellsalign: 'right' },
                { text: 'Price', dataField: 'price', width: 200, cellsformat: 'c2', cellsalign: 'right' }
                ]}" id="jqxgrid">
            </div>
            <table style="margin-top: 20px;">
                <tbody data-bind="foreach: items">
                    <tr>
                        <td data-bind="text: name"></td>
                        <td data-bind="text: sales"></td>
                        <td data-bind="text: price"></td>
                    </tr>
                </tbody>
            </table>
            <div>Disabled status about Add :<span data-bind="text: disabledButtonAdd"></span></div>
            <div>Disabled status about Add :<span data-bind="text: disabledButtonDelete"></span></div>
        </div>
    </body>
    </html>

    Best Regards,
    Ivailo Ivanov

    jQWidgets Team
    http://www.jqwidgets.com

    Observable button binding support? #77525

    Mr.Moo
    Participant

    Hello again,

    apologies for the delay in replying. I have tried the above example but the buttons still work as expected. For example, if you change the initial values thus:

    this.disabledButtonAdd = ko.observable(true);
    this.disabledButtonDelete = ko.observable(true);

    Then load the page you can still add and delete the items when you click what appears to be a disabled button! Also, how would you change the value of this.disabledButtonDelete at runtime?


    Moo

    Observable button binding support? #77565

    ivailo
    Participant

    Hi Mr.Moo,

    Try this code:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title id='Description'>
            This example shows how to integrate jqxGrid with Knockout.js.
        </title>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="../../scripts/json2.js"></script>
        <script type="text/javascript" src="../../scripts/knockout-3.0.0.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxknockout.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
        <script type="text/javascript" src="../../scripts/demos.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                var initialData = [
                    { name: "Well-Travelled Kitten", sales: 352, price: 75.95 },
                    { name: "Speedy Coyote", sales: 89, price: 190.00 },
                    { name: "Furious Lizard", sales: 152, price: 25.00 },
                    { name: "Indifferent Monkey", sales: 1, price: 99.95 },
                    { name: "Brooding Dragon", sales: 0, price: 6350 },
                    { name: "Ingenious Tadpole", sales: 39450, price: 0.35 },
                    { name: "Optimistic Snail", sales: 420, price: 1.50 }
                ];
    
                var GridModel = function (items) {
                    this.items = ko.observableArray(items);
                    this.disabled = ko.observable(false);
                    this.disabledButtonAdd = ko.observable(false);
                    this.disabledButtonDelete = ko.observable(false);
    
                    this.addItem = function () {
                        // add a new item.
                        if (this.items().length < 20) {
                            this.items.push({ name: "New item", sales: Math.round(Math.random() * 100), price: Math.round(Math.random() * 100) });
                        }
                    };
    
                    this.removeItem = function () {
                        // remove the last item.
                        this.items.pop();
                    };
    
                    this.enableDisableButtons = function () {
    
                        if (this.disabledButtonDelete() == false) {
                            this.disabledButtonDelete(true);
                        } else{
                            this.disabledButtonDelete(false);
                        }
                    };
    
                    this.renderstatusbar = function (statusbar) {
                        // appends buttons to the status bar.
                        var container = $("<div style='overflow: hidden; position: relative; margin: 5px;'></div>");
                        var addButton = $("<button data-bind='click: addItem, jqxButton: { disabled: disabledButtonAdd }' style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;' src='../../images/add.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>Add</span></button>");
                        var deleteButton = $("<button data-bind='click: removeItem, jqxButton: { disabled: disabledButtonDelete }' style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;' src='../../images/close.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>Delete</span></button>");
                        var enableDisableButton = $("<button data-bind='click: enableDisableButtons' style='float: left; margin-left: 5px;'>Enable/Disable Delete</button>");
                        container.append(addButton);
                        container.append(deleteButton);
                        container.append(enableDisableButton);
                        statusbar.append(container);
                        addButton.jqxButton({ width: 100, height: 25 });
                        deleteButton.jqxButton({ width: 100, height: 25 });
                        enableDisableButton.jqxButton({ width: 200, height: 25 });
                    },
    
                    this.updateItem = function () {
                        // update the first item.
                        var item = {};
                        if (initialData.length > 0) {
                            item.name = initialData[Math.floor(Math.random() * initialData.length)].name;
                            item.sales = Math.floor(Math.random() * 500);
                            item.price = Math.floor(Math.random() * 200);
                            this.items.replace(this.items()[0], item);
                        }
                    };
                };
    
                ko.applyBindings(new GridModel(initialData));
            });
        </script>
    </head>
    <body class='default'>
        <div id='jqxWidget'>
            <div data-bind="jqxGrid: {source: items, disabled: disabled, autoheight: true,
                    editable: true,
                    selectionmode: 'singlecell',
                    showstatusbar: true,
                    renderstatusbar: renderstatusbar,
                columns: [
                { text: 'Name', dataField: 'name', width: 200 },
                { text: 'Sales', dataField: 'sales', width: 200, cellsalign: 'right' },
                { text: 'Price', dataField: 'price', width: 200, cellsformat: 'c2', cellsalign: 'right' }
                ]}" id="jqxgrid">
            </div>
            <table style="margin-top: 20px;">
                <tbody data-bind="foreach: items">
                    <tr>
                        <td data-bind="text: name"></td>
                        <td data-bind="text: sales"></td>
                        <td data-bind="text: price"></td>
                    </tr>
                </tbody>
            </table>
            <div>Disabled status about Add :<span data-bind="text: disabledButtonAdd"></span></div>
            <div>Disabled status about Add :<span data-bind="text: disabledButtonDelete"></span></div>
        </div>
    </body>
    </html>

    Best Regards,
    Ivailo Ivanov

    jQWidgets Team
    http://www.jqwidgets.com

    Observable button binding support? #77590

    Mr.Moo
    Participant

    Hello Ivailo,

    This works for me thank you very much. I’ll make some changes to my code so I can hopefully make use of this approach.


    Moo

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.