jQWidgets Forums

Tagged: grid ko

This topic contains 4 replies, has 2 voices, and was last updated by stailer 12 years, 1 month ago.

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

Author

Editing + KnockOut + JQWidgets 2.9.1 Posts

June 28, 2013 at 3:00 pm Editing + KnockOut + JQWidgets 2.9.1 #24135

stailer

Member

Hello,

I have a problem with jqxGrid, Knockout and JQWidgets 2.9.1 version :

Checkbox column type open exception on click : null reference on property null.

Column from my grid is simple :

// datas from localdata and observablearray in my ViewModel
{ columntype: 'checkbox', datafield : 'myfield', editable : true }

June 28, 2013 at 3:03 pm Editing + KnockOut + JQWidgets 2.9.1 #24139

Peter Stoev

Keymaster

Hi,

Could you provide a sample about that behavior?

The following code works on my side with that version:

<!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.10.1.min.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/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: true, price: 75.95 },
                { name: "Speedy Coyote", sales: true, price: 190.00 },
                { name: "Furious Lizard", sales: false, price: 25.00 },
                { name: "Indifferent Monkey", sales: true, price: 99.95 },
                { name: "Brooding Dragon", sales: true, price: 6350 },
                { name: "Ingenious Tadpole", sales: true, price: 0.35 },
                { name: "Optimistic Snail", sales: false, 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));
        });
    </script>
</head>
<body class='default'>
    <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', columntype: 'checkbox', 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/

June 28, 2013 at 3:15 pm Editing + KnockOut + JQWidgets 2.9.1 #24142

stailer

Member

Ok my code :

  <div id="grdProjetsValides" data-bind="jqxGrid: {
                    autoheight: true,
                    theme: THEME_CURRENT,
                    source: projets_valides,
                    width: 920,
                    columnsresize:true,
                    filterable: true,
                    editable: true,
                    pageable: true,
                    sortable: true,
                    columns: [
                       { text: 'Nom du projet', dataField: 'nom', filterable: true, width: 640 },
                      { text: 'Retenu ?', dataField: 'is_retenu', columntype: 'checkbox', editable: true }
                    ]
                 }">
                </div>

Sample from my ViewModel :

 $.get(WEBSITEROOT + "/index.php/backoffice/getprojets", function(result) {
                   var mappedProjetsValides = ko.utils.arrayMap(result.projets_valides, function(item) {  return new projetModel(item); });
                   self.projets_valides(mappedProjetsValides);
   });

Sample from my model :


var projetModel = function(values) {
    var self = this;
    
    self.uid = ko.observable(values.uid);
    self.nom = ko.observable(values.nom);
    self.is_retenu = ko.observable(values.is_retenu );
   
    self.remove = function() {
         return $.post(WEBSITEROOT + "/index.php/backoffice/deleteprojet", { projet: ko.toJSON(self) });
    };
};

June 28, 2013 at 3:26 pm Editing + KnockOut + JQWidgets 2.9.1 #24143

Peter Stoev

Keymaster

Hi,

1. Unfortunately, I am still unable to rperoduce that. Please, make sure to clear the browser’s cache and check whether the jqx. scripts are correct.

2. uid is a reserved keyword by the Grid’s row object. Please, use something else for a “datafield” name.

Best Regards,
Peter Stoev

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

July 2, 2013 at 7:10 am Editing + KnockOut + JQWidgets 2.9.1 #24309

stailer

Member

2. uid is a reserved keyword by the Grid’s row object.

I removed “uid” from my Model and now all is ok.

Problem Solved , thank you Peter !

Author

Posts

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

You must be logged in to reply to this topic.