Popup editing with KO not working

[AndresParticipant]

Hi, I am using the jqwidgets-ver3.5.0 and I saw that this version the control jqxWindow supports knockout.
I am using the knockout examples gird with json, but I am having trouble getting a popup edit(jqxWindow) to work with KO binding, can anyone tell me what is wrong? Or does anyone have an example? Thanks in advance.

This is the javascript.

$(document).ready(initializePage);

function initializePage() {
    var GridModel = function () {

        //Make the self as 'this' reference
        var self = this;
        //Declare observable which will be bind with UI 
        self.CurrencyId = ko.observable("");
        self.Description = ko.observable("");
        self.Symbol = ko.observable("");

        var Currency = {
            CurrencyId: self.CurrencyId,
            Description: self.Description,
            Symbol: self.Symbol,
        };

        self.Currency = ko.observable();
        self.Currencies = ko.observableArray(); // Contains the list of Currencies

        // Initialize the view-model
        $.ajax({
            url: "Currencies/FindCurrency",
            cache: false,
            type: "POST",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                self.Currencies(data); //Put the response in ObservableArray                
            }
        });        
    };
    var model = new GridModel();
    // prepare the data

    var source =
            {                
                datatype: "json",
                datafields: [
                    { name: 'CurrencyId', type: 'number' },
                    { name: 'Description', type: 'string' },
                    { name: 'Symbol', type: 'string' }
                ],
                id: 'CurrencyId',
                localdata: model.Currencies
            };

    var dataAdapter = new $.jqx.dataAdapter(source);
    var editrow = -1;
    $("#grid").jqxGrid({
        width: '100%',
        height: 250,
        source: dataAdapter,
        pageable: true,
        autoheight: true,
        sortable: true,
        altrows: true,
        enabletooltips: true,
        selectionmode: 'singlerow',
        columns: [
            { text: 'CurrencyId', dataField: 'CurrencyId', hidden: true },
            { text: 'Description', dataField: 'Description', width: '50%' },
            { text: 'Symbol', dataField: 'Symbol', width: '30%' },
            {
                text: 'Edit',
                datafield: 'Edit',
                columntype: 'button',
                width: '10%',
                cellsrenderer:
                    function() {
                        return 'Edit';
                    },
                buttonclick:
                    function(row) {
                        // open the popup window when the user clicks a button.
                        editrow = row;
                        var offset = $('#grid').offset();
                        $('#popupWindow').jqxWindow({ position: { x: parseInt(offset.left) + 60, y: parseInt(offset.top) + 60 } });

                        // get the clicked row's data and initialize the input fields.
                        var dataRecord = $('#grid').jqxGrid('getrowdata', editrow);
                        $('#Description').val(dataRecord.Description);
                        //$('#Symbol').val(dataRecord.Symbol);                        

                        // show the popup window.
                        $('#popupWindow').jqxWindow('open');
                    }
            }
        ]
    });

    ko.applyBindings(model);

    //// initialize the popup window and buttons.
    $("#popupWindow").jqxWindow({
        width: 250, resizable: false, isModal: true, autoOpen: false, cancelButton: $("#Cancel"), modalOpacity: 0.01
    });

    $("#popupWindow").on('open', function () {
        $("#Description").jqxInput('selectAll');
    });
}

This is my razor.

<div id="grid" data-bind="jqxGrid: { disabled: false }"> </div>

<div id="popupWindow" >
    <div>Edit</div>
    <div style="overflow: hidden;">
        <table>
            <tr>
                <td align="right">Description:</td>
                <td align="left"><input id="Description" data-bind="jqxInput: { disabled: false }" /></td>
            </tr>
            <tr>
                <td align="right">Symbol:</td>
                <td align="left"><input id="Symbol" data-bind="jqxInput: { disabled: false }" /></td>                
            </tr>            
            <tr>
                <td align="right"></td>
                <td style="padding-top: 10px;" align="right">
                    <input style="margin-right: 5px;" type="button" id="Save" value="Save" />
                    <input id="Cancel" type="button" value="Cancel" />
                </td>
            </tr>
        </table>
    </div>
</div>

[AndresParticipant]

Hi, I was thinking using this library in my project, but I saw the documentation is pretty bad (this is a common case in almost all libraries), the simple question done is not answered (it is a trivial case of using knockout in a popup), so I am not recommending the use of this library at all.

[DimitarParticipant]

Hello Andres,

Sorry for the late reply. Please note, however, that in this community forum, an answer should generally be expected by your forum peers, not by our support team. Customer support response time is specified on the Licensing page.

As for the issue itself: here is an example that shows how to open a jqxWindow from a Knockout-integrated jqxGrid. Further modification would be required for a full pop-up editing functionality.

<!DOCTYPE html>
<html lang="en">
<head>
    <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.sort.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="../../jqwidgets/jqxwindow.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.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 () {
                    var element = "#jqxGrid";
                    var cell = $(element).jqxGrid('getselectedcell');
                    if (cell != null && cell != "") {
                        var selectedrowindex = cell.rowindex;
                        var rowscount = $(element).jqxGrid('getdatainformation').rowscount;
                        if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
                            var id = $(element).jqxGrid('getrowid', selectedrowindex);
                            try {
                                this.items.splice(selectedrowindex, 1);
                            }
                            catch (e) {
                            }
                        }
                    }
                };

                this.updateItem = function () {
                    // update the first item.
                    if (initialData.length) {
                        var item = {};
                        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);
                    }
                };
            };

            var model = new GridModel(initialData);
            var source = {
                localdata: model.items,
                datatype: 'observablearray'
            }

            var dataAdapter = new $.jqx.dataAdapter(source);
            $("#jqxGrid").jqxGrid({
                autoheight: true,
                source: dataAdapter,
                sortable: true,
                editable: true,
                selectionmode: 'singlecell',
                columns: [
                    { text: 'Name', dataField: 'name', width: 200 },
                    { text: 'Sales', dataField: 'sales', width: 150, cellsalign: 'right' },
                    { text: 'Price', dataField: 'price', width: 150, cellsformat: 'c2', cellsalign: 'right' },
                    { text: 'Edit', datafield: 'Edit', columntype: 'button', cellsrenderer: function () {
                        return "Edit";
                    }, buttonclick: function (row) {
                        // open the popup window when the user clicks a button.
                        editrow = row;
                        var offset = $("#jqxGrid").offset();
                        $("#popupWindow").jqxWindow({ position: { x: parseInt(offset.left) + 60, y: parseInt(offset.top) + 60} });
                        // show the popup window.
                        $("#popupWindow").jqxWindow('open');
                    }
                    }
                ]
            });

            ko.applyBindings(model);
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div style="margin-bottom: 10px;">
            <input id="addButton" type="button" data-bind="click: addItem, jqxButton: {}" value="Add Item" />
            <input id="removeButton" type="button" data-bind="click: removeItem, jqxButton: {}"
                value="Remove Item" />
            <input id="updateButton" type="button" data-bind="click: updateItem, jqxButton: {}"
                value="Update Item" />
            <div data-bind="jqxCheckBox: {checked: disabled}" style='margin-top: 5px;' id="checkBox">
                Disabled</div>
        </div>
        <div data-bind="jqxGrid: {disabled: disabled}" 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 id="popupWindow">
            <div>
                Edit</div>
            <div style="overflow: hidden;">
                Window content
            </div>
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[Author]

Posts