jQWidgets Forums

Tagged: jqxgrid. knockout grid control, knockout grid

This topic contains 4 replies, has 2 voices, and was last updated by isv485 12 years, 3 months ago.

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

Author

jqxGrid field update replaces binded object Posts
December 13, 2012 at 10:48 pm jqxGrid field update replaces binded object #12297

isv485
Member

Hi!

My project has an ko observable collection of objects.
Each object has some binded functions that allow to manipulate this object upon its properties modifications.

Collection is binded to the jqxGrid that exposes it to User.

After jqxGrid row field modifications, original object bindings were lost.

It looks like the problem comes from the fact that upon jqxGrid field update original object in the collection was replaced with new jqxGrid object.

Is there a way to prevent object replacement during jqxGrid fields updates and keep existing bindings?
Or may be some additional steps are required to restore original bindings?

Thanks!

Attached is slightly modified griddataadapter.htm jqxGrid demo that allows to observe this problem.

For example, 3 Person objects are correct, but Person 4 object was replaced with new object from jqxGrid

0: Person
1: Person
2: Person
name: function c(){if(0<arguments.length){if(!c.equalityComparer||!c.equalityComparer(d,arguments[0]))c.I(),d=arguments[0],c.H();return this}a.U.La(c);return d}
price: function c(){if(0<arguments.length){if(!c.equalityComparer||!c.equalityComparer(d,arguments[0]))c.I(),d=arguments[0],c.H();return this}a.U.La(c);return d}
sales: function c(){if(0<arguments.length){if(!c.equalityComparer||!c.equalityComparer(d,arguments[0]))c.I(),d=arguments[0],c.H();return this}a.U.La(c);return d}
__proto__: Person

3: Object
_koindex: 0
name: "Person 4"
price: 4
sales: 5656566

Here is the code that was used for testing:

This example shows how to integrate jqxGrid using jqxDataAdapter with Knockout.js.

$(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 () {
// 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'
}

ko.applyBindings(model);

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);
});

Disabled

December 15, 2012 at 5:32 am jqxGrid field update replaces binded object #12364

isv485
Member

Hi!

Attached is code to reproduce the problem.

1. Go to list and update sales or price values. Observe that Grid fields were updated correctly and summary in the list reflect correct values.

2. Go to the Grid and change sales or price values. Observe that List values for sales and/or price are updated correctly, but summary field can not be updated anymore. Attached to item computed property lost.

3. Click on update Item button. Observe that new item was inserted to the List.

Binding on next item is not working anymore…

Thanks!

<!DOCTYPE html>

<html lang=”en”>

<head>

<title id=’Description’>This example shows problem with JqxGrid rows bindings.

</title>

<link rel=”stylesheet” href=”../../jqwidgets/styles/jqx.base.css” type=”text/css” />

<style>

</style>

<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=”../../jqwidgets/jqxgrid.grouping.js”></script>

<script type=”text/javascript” src=”../../scripts/gettheme.js”></script>

<script type=”text/javascript”>

$(document).ready(function () {

function Person(data) {

this.name = ko.observable(data.name);

this.sales = ko.observable(data.sales);

this.price = ko.observable(data.price);

this.summary = ko.computed(function() {

return this.sales() * this.price();

}, this);

};

var initialData = [

new Person({ name: “Person 1”, sales: null, price: 1, summary: 0 }),

new Person({ name: “Person 2”, sales: 222, price: 2, summary: 0}),

new Person({ name: “Person 3”, sales: 11, price: 3, summary: 0 }),

new Person({ name: “Person 4”, sales: 43, price: 4, summary: 0 })

];

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( new Person({ 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, cellsalign: ‘right’ },

{ text: ‘Summary’, dataField: ‘summary’, width: 200, 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>

<div style=”margin-top: 20px;”>

<ul data-bind=”foreach: items”>

<li>

<input type=”text” data-bind=”value: name” />

<input type=”text” data-bind=”value: sales” />

<input type=”text” data-bind=”value: price” />

<input type=”text” data-bind=”value: summary” />

</li>

</ul>

</div>

</div>

</body>

</html>

December 18, 2012 at 1:32 pm jqxGrid field update replaces binded object #12510

isv485
Member

Hi!

Do you have any update on this issue?

Thanks!

December 19, 2012 at 10:40 am jqxGrid field update replaces binded object #12576

Peter Stoev
Keymaster

Hi isv485,

We found an issue in our cells editing when the edited item is an observable in an observableArray. The issue will be resolved in the next version – jQWidgets 2.6 scheduled for 26 December.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

December 19, 2012 at 3:20 pm jqxGrid field update replaces binded object #12599

isv485
Member

Thanks, Peter!

We are looking forward to make jqWidgets as part of our development toolbox and your support is really valuable for us.
Author

Posts

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

You must be logged in to reply to this topic.