jQWidgets Forums

This topic contains 3 replies, has 2 voices, and was last updated by Peter Stoev 11 years, 7 months ago.

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

Author

how to place the knockoutjs together? Posts

August 17, 2013 at 6:40 am how to place the knockoutjs together? #27026

Member

why i cannot place the code of knockoutjs of two components together. likes grid + dateselection. appears errors likes below.

Error: Unable to parse bindings. Message: ReferenceError: date is not defined; Bindings value: jqxCalendar: {value: date, disabled: disabled, width: ‘250px’, height: ‘250px’, theme: getDemoTheme()}

August 17, 2013 at 7:31 am how to place the knockoutjs together? #27028

Peter Stoev

Keymaster

Hi africanfarmer,

It seems that you missed to add references to required javascript files. Please, make sure that you added all the references to the required files.

Best Regards,
Peter Stoev

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

August 17, 2013 at 12:33 pm how to place the knockoutjs together? #27029

africanfarmer

Member

Dear Peter,
i referenced them.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title id='Description'>义乌货运系统</title>
    <link rel="stylesheet" href="jqwidgets/jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="jqwidgets/jqwidgets/styles/jqx.custom.css" type="text/css" />
    <script type="text/javascript" src="jqwidgets/scripts/jquery-1.10.1.min.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxdata.export.js"></script>
    <script type="text/javascript" src="jqwidgets/scripts/json2.js"></script>
    <script type="text/javascript" src="jqwidgets/scripts/knockout-2.2.1.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxinput.js"></script>
    <script type="text/javascript" src="jqwidgets/scripts/gettheme.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxdatetimeinput.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxcalendar.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/globalization/globalize.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxnumberinput.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxgrid.export.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxknockout.js"></script>
<script>
$(document).ready(function () {
    var viewModel = function (date) {
    this.date = ko.observable(date);
    this.disabled = ko.observable(false);
    this.displayDate = function () {
    alert("Date: " + this.date());
    }
this.setDate = function () {
    var date = new Date();
    date.setFullYear(2012, 11, 11);
    this.date(date);
    }
};
var date = new Date();
date.setFullYear(2012, 10, 10);
ko.applyBindings(new viewModel(date));
 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 () {
            // remove the last item.
            this.items.pop();
        };
        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));
    var viewModel = function (date) {
        this.date = ko.observable(date);
        this.disabled = ko.observable(false);
        this.displayDate = function () {
            alert("Date: " + this.date());
        }
        this.setDate = function () {
            var date = new Date();
            date.setFullYear(2012, 11, 11);
            this.date(date);
        }
    };
    var date = new Date();
    date.setFullYear(2012, 10, 10);
    ko.applyBindings(new viewModel(date));
});
</script>
    <style type="text/css">
        body{font-size:9pt;}
    </style>
</head>
<body class='default'>
<!--<div data-bind="jqxCalendar: {value: date, disabled: disabled, width: '250px', height: '250px', theme: getDemoTheme()}">
</div>
<div style="margin-top: 5px; clear: both;">
    <input id="getButton" data-bind="click: displayDate, jqxButton: {theme: getDemoTheme()}" type="button" value="Get Value" />
    <input id="setButton" data-bind="click: setDate, jqxButton: {theme: getDemoTheme()}" type="button" value="Set Value" />
    <div data-bind="jqxCheckBox: {checked: disabled, width: '100px', theme: getDemoTheme()}" style='margin-top: 5px;' id="checkBox">Disabled</div>
</div>-->
    <div id='jqxWidget'>
        <div style="margin-bottom: 10px;">
            <input id="addButton" type="button" data-bind="click: addItem, jqxButton: {theme: getDemoTheme()}" value="Add Item" />
            <input id="removeButton" type="button" data-bind="click: removeItem, jqxButton: {theme: getDemoTheme()}" value="Remove Last Item" />
            <input id="updateButton" type="button" data-bind="click: updateItem, jqxButton: {theme: getDemoTheme()}" value="Update First Item" />
            <div data-bind="jqxCheckBox: {checked: disabled, theme: getDemoTheme()}" style='margin-top: 5px;' id="checkBox">Disabled</div>
        </div>
        <div data-bind="jqxGrid: {source: items, disabled: disabled, autoheight: true,
                theme: getDemoTheme(),
                editable: true,
                selectionmode: 'singlecell',
                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>

August 18, 2013 at 11:11 am how to place the knockoutjs together? #27058

Peter Stoev

Keymaster

Hi africanfarmer,

I fixed your code for you. Hope this helps.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/globalization/globalize.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/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.js"></script>
   <script type="text/javascript" src="../../scripts/json2.js"></script>
    <script type="text/javascript" src="../../scripts/knockout-2.2.1.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxknockout.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 viewModel = function (items, date) {
            this.date = ko.observable(date);
            this.disabled = ko.observable(false);
            this.displayDate = function () {
                alert("Date: " + this.date());
            }
            this.setDate = function () {
                var date = new Date();
                date.setFullYear(2012, 11, 11);
                this.date(date);
            }
            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 () {
                // remove the last item.
                this.items.pop();
            };
            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);
                }
            };
        };
        var date = new Date();
        date.setFullYear(2012, 10, 10);
        ko.applyBindings(new viewModel(initialData, date));
    });
</script>
</head>
<body class='default'>
<div data-bind="jqxCalendar: {value: date, disabled: disabled, width: '250px', height: '250px', theme: getDemoTheme()}">
</div>
<div style="margin-top: 5px; clear: both;">
    <input id="getButton" data-bind="click: displayDate, jqxButton: {theme: getDemoTheme()}" type="button" value="Get Value" />
    <input id="setButton" data-bind="click: setDate, jqxButton: {theme: getDemoTheme()}" type="button" value="Set Value" />
</div>
    <div id='jqxWidget'>
        <div style="margin-bottom: 10px;">
            <input id="addButton" type="button" data-bind="click: addItem, jqxButton: {theme: getDemoTheme()}" value="Add Item" />
            <input id="removeButton" type="button" data-bind="click: removeItem, jqxButton: {theme: getDemoTheme()}" value="Remove Last Item" />
            <input id="updateButton" type="button" data-bind="click: updateItem, jqxButton: {theme: getDemoTheme()}" value="Update First Item" />
            <div data-bind="jqxCheckBox: {checked: disabled, theme: getDemoTheme()}" style='margin-top: 5px;' id="checkBox">Disabled</div>
        </div>
        <div data-bind="jqxGrid: {source: items, disabled: disabled, autoheight: true,
                theme: getDemoTheme(),
                editable: true,
                selectionmode: 'singlecell',
                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>
    </body>
    </html>

Best Regards,
Peter Stoev

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

Author

Posts

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

You must be logged in to reply to this topic.