jQWidgets Forums

Forum Replies Created

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

Author

Posts
January 7, 2013 at 3:35 pm in reply to: Howto bind jxqTree to observable collection with DataAdapter ? Howto bind jxqTree to observable collection with DataAdapter ? #13238

isv485
Member

Thanks, Peter!

Where may I find requirements and jqxTree items supported fields?

I see that currently supported are following item fields:
“label”, “items”, “icon”, “iconsize”. Does jqxTree supports something else?

Regards

January 7, 2013 at 1:24 pm in reply to: Howto bind jxqTree to observable collection with DataAdapter ? Howto bind jxqTree to observable collection with DataAdapter ? #13232

isv485
Member

Thanks, Peter!

Names of my source items properties are “Title” and “Groups” instead of “label” and “items” which are required for the jqxTree.

How can I populate jqxTree without jqxAdapter if my items properties do not match?

Thanks!

December 25, 2012 at 11:48 pm in reply to: Grid Export to Excel problem Grid Export to Excel problem #12800

isv485
Member

Thanks, Peter!

Setting field type corrects the problem.

December 21, 2012 at 1:27 pm in reply to: Grid Export to Excel problem Grid Export to Excel problem #12725

isv485
Member

Hi Dimitar!

Do you mean demo with grid spreadsheet does not set datafields correctly?
I used demo on jqWidgets web site.

Thanks!

December 19, 2012 at 4:00 pm in reply to: jqxGird + Knockoutjs + Breeze.js jqxGird + Knockoutjs + Breeze.js #12601

isv485
Member

Hi Andrew!

It’s correct assumption and Peter confirmed the problem with bindings.

At this time I do not see any other problem with breeze-knockout-jqWidgets integration.
My final testing will be completed as soon as jqxGrid update will be available with next release.

I can drop some test project with breeze but at this time I did not find any way to upload project code to the forum.

What did not work for me is direct jqxGrid source to knockout observableArray (created from breeze entities) binding. I’ve got exactly the same type of errors as you did and fixed it with simple use of the jqxDataAdapter.

I am expecting that fixing binding problem may resolve this issue also, but not 100% sure about this.

Regards,

Serge

December 19, 2012 at 3:20 pm in reply to: jqxGrid field update replaces binded object 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.

December 19, 2012 at 5:32 am in reply to: jqxGird + Knockoutjs + Breeze.js jqxGird + Knockoutjs + Breeze.js #12548

isv485
Member

Hi andrewcb!

I succeed to avoid “rawAccessorFn is not a function” and similar binding errors with use of the jqxDataAdapter as a source for the jqxGrid.
jqxGrid was bound and got notifications from breeze updating its properties successfully.

The only observed problem was propagating changes from Grid to breeze entities.

I am not sure if this is done by design, but jqxGrid replaces knockout object on any grid row field modification. See my reported issue “JqxGrid field update replaces bound object “.

Original knockout/breeze bindings can be lost.

Hopefully Peter can clarify this issue.

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

isv485
Member

Hi!

Do you have any update on this issue?

Thanks!

December 15, 2012 at 5:37 am in reply to: Grouping items with possible null field Grouping items with possible null field #12365

isv485
Member

Hi Dimitar!

I saw that you accepted this issue, but forum was reset and I can not see last messages. Do you have any vision on when this issue can be fixed?

Thanks!

December 15, 2012 at 5:32 am in reply to: jqxGrid field update replaces binded object 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 14, 2012 at 3:32 am in reply to: Grouping items with possible null field Grouping items with possible null field #12308

isv485
Member

Hi Dimitar!

Attached is test code that reproduces reported behavior.
If first item in the row has group parameter that is null (undefined), jqxGrid grouping does not work correctly.

Thanks!

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

$(document).ready(function () {

function Person(data) {
this.name = ko.observable(data.name);
this.sales = ko.observable(data.sales);
this.price = ko.observable(data.price);
};

var initialData = [
new Person({ name: “Person 1”, sales: undefined, price: 1 }),
new Person({ name: “Person 2”, sales: 222, price: 2}),
new Person({ name: “Person 3”, sales: 11, price: 3 }),
new Person({ name: “Person 4”, sales: 43, price: 4 })
];

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,
groupable: true,
groups: ['Sales'],
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' }
]
});

ko.applyBindings(model);
});

Disabled

December 12, 2012 at 5:22 pm in reply to: Two way grid binding with knockoutjs Two way grid binding with knockoutjs #12250

isv485
Member

Thanks, Peter!

I had problem with initialization sequence between knockout and jqx widgets.

All is resolved now.

December 6, 2012 at 2:59 am in reply to: Hierarchical data binding to jqxGrid Hierarchical data binding to jqxGrid #11966

isv485
Member

Thanks, Peter!

December 5, 2012 at 2:14 am in reply to: Hierarchical data binding to jqxGrid Hierarchical data binding to jqxGrid #11900

isv485
Member

Thanks, Peter!

Is there a way to use JqxDataGrid as a TreeTable? Similar, for example, to Vaadin TreeTable?
Or may be jqxTree is more suitable for these purposes?

Thanks!

December 3, 2012 at 1:20 pm in reply to: Re-sizing floating window Re-sizing floating window #11839

isv485
Member

Hi Peter!

Thanks, for your response!
Author

Posts

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