jQWidgets Forums

Tagged: grid

This topic contains 1 reply, has 2 voices, and was last updated by Peter Stoev 12 years, 4 months ago.

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

Author

Null values and knockout grid Posts

November 21, 2012 at 5:53 pm Null values and knockout grid #11327

Participant

I am wondering how I should be handling null values in an object that is being displayed in a grid when using knockout? I have made one minor change to the code from the samples jqxknockout/griddataadapter, where I have set the value to be null instead of a value. When I do this I get a JavaScript error – cannot call method toString of null.

I was wondering if there is another way to approach nulls? I don’t want to make every property a knockout object.

Sample code is below.

Cheers Glen

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This example shows how to integrate jqxGrid using jqxDataAdapter with Knockout.js.
    </title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="../../scripts/json2.js"></script> 
    <script type="text/javascript" src="../../scripts/knockout-2.1.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/gettheme.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var initialData = [
                { name: "Well-Travelled Kitten", sales: null, 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 = {};
                    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,
                theme: getTheme(),
                source: dataAdapter,
                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' }
                ]
            });

            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: {theme: getTheme()}" value="Add Item" />
            <input id="removeButton" type="button" data-bind="click: removeItem, jqxButton: {theme: getTheme()}" value="Remove Item" />
            <input id="updateButton" type="button" data-bind="click: updateItem, jqxButton: {theme: getTheme()}" value="Update Item" />
            <div data-bind="jqxCheckBox: {checked: disabled, theme: getTheme()}" 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>
</body>
</html>

November 22, 2012 at 7:13 am Null values and knockout grid #11346

Peter Stoev

Keymaster

Hi Glen Edwards,

Thank you for the feedback. We will use the provided code to reproduce the reported behavior. In case we find an issue, we will do our best to resolve it for the upcoming release.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

Author

Posts

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

You must be logged in to reply to this topic.