jQWidgets Forums

Tagged: jquery grids, nested grid

This topic contains 6 replies, has 2 voices, and was last updated by Peter Stoev 9 years, 6 months ago.

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

Author

Using ko.computed() with nested grids only works on internal grid! Posts
October 31, 2015 at 3:19 pm Using ko.computed() with nested grids only works on internal grid! #77594
Mr.Moo
Participant
I use two observable arrays to store the data for my nested grid views, one for the master data and the other for the details. In my nested grid object I have:

self.Obj = ko.computed(function() { return ((self.Best() - self.Bound()) / self.Best() * 100).toExponential(3) ;}) ;

This displays the expected result, so with this in mind I though I would add a progress indicator to my master data object to show how far the process had completed, so I wrote this:

self.Progress = ko.computed(function() { return (((self.doneDays.reduce(function(a, b) { return a + b ;}) * self.totalDays())) / 100) ;});

However, this displays in the UI as function g()…, not what I was expecting, so assuming I’d done some thing wrong I then wrote:

self.Progress = ko.computed(function() { return (0 * 0) / 100 ; }) ;

But this also displays in the UI as function g()… to double check my source and column definitions (and that I wasn’t going mad) I then wrote:

(Math.random() * self.totalDays()).toFixed(3) With this producing and displaying the random results you’d expect!

The structure of the dataAdapters sources are near identical for both computed columns, for the Master I have:

{ name: 'Progress', map: 'Progress', type: 'float' },

and for it’s column definitions I use:

{ text: 'Progress', datafield: 'Progress', width: 80, cellsalign: 'center' },

And for the Details I have:
```
{ name: 'Obj', map: 'Obj', type: 'float' },

{ text: 'Error', datafield: 'Obj', width: '80' },
```
To say I’m confused would be a understatement, so if anyone can shed any light on what may be wrong I’d be grateful.

—
Moo
October 31, 2015 at 4:30 pm Using ko.computed() with nested grids only works on internal grid! #77600

Peter Stoev
Keymaster

Hi Mr.Moo,

Nested Grids and Grids are not related to each other at all. Nested Grids are just another widgets displayed within the Row Details of a Grid. If there is some issue in the data binding, then I would suggest you to check your initialization code in the initrowdetails function.

Best Regards,
Peter Stoev

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

October 31, 2015 at 7:36 pm Using ko.computed() with nested grids only works on internal grid! #77603

Mr.Moo
Participant

Thanks Peter,

I’ll have a look tomorrow and post an update.

—
Moo

November 1, 2015 at 12:35 pm Using ko.computed() with nested grids only works on internal grid! #77607

Mr.Moo
Participant

Me again,

Well I’ve re-work the code and reviewed the initrowdetails as suggested, but as this is for the ‘nested’ detail grid that produces the correct results from an existing ko.computed() I could see nothing wrong with it even after changing it to resemble that used in the demo.

I also corrected the code that populated my arrays as reduce() evidently isn’t a function of ko.observableArrays but as I never got any complaints about it I assumed that it was working, but while debugging I realised it was wrong and fixed it.

Now when I call my corrected Percent() function from the debug console I get the result I would expect, however, I still get `function g()’ appearing in the UI.

What I have noticed is that if I change the values used in calculating the Percent() then call the function the returned value does not change! I simply cannot see what I am doing wrong and it’s driving me to distraction.

—
Moo

November 1, 2015 at 3:18 pm Using ko.computed() with nested grids only works on internal grid! #77614
Mr.Moo
Participant
An update to the above post. I did some reading and when I use the replace method on the observableArray to change a daysDone value and call the Percent method from the CLI I get new updated value, so this is progress, but I still have the function g()… in the UI. To see what the ellipse (…) were referring to I expanded the column and I can now see “function g(){if(0”.

In an attempt to track this issue down, I decided to do a minimal grid, the code of which is below. However, to add insult to injury this version displays the Percent complete data but doesn’t display the values from either an observable or observableArray, but the standard HTML element data-bind displays their values!

If you want to use this file, you will need to modify the paths in the <script> and <link>s
```
<!DOCTYPE html>
<html>
	<head>
		<title>Widget Test</title>
		<meta charset="UTF-8">
		<link type="text/css" href="./jqwidgets/styles/jqx.base.css" rel="stylesheet" />
		<link type="text/css" href="./jqwidgets/styles/jqx.black.css" rel="stylesheet" />
		<script src="https://code.jquery.com/jquery-2.1.4.js" type="text/javascript" ></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js" type="text/javascript" ></script>
		<script src="./jqwidgets/jqxcore.js" type="text/javascript" ></script>
		<script src="./jqwidgets/jqxdata.js" type="text/javascript" ></script>
		<script src="./jqwidgets/jqxgrid.js" type="text/javascript" ></script>
		<script src="./jqwidgets/jqxgrid.selection.js" type="text/javascript" ></script>
		<script src="./jqwidgets/jqxscrollbar.js" type="text/javascript" ></script>
		<script src="./jqwidgets/jqxbuttons.js" type="text/javascript" ></script>
		<script>
		var TestItem = function(item) {
			var self = this ;
			self.Title = "Test Item" ;
			self.doneDays = ko.observableArray() ;
			ko.utils.arrayForEach(item.doneDays.split(','), function(i) { self.doneDays.push(i -0) ; });
			self.totalDays = ko.observable(item.totalDays) ;
			self.Percent = ko.computed(function() { 
				var p = 0 ; 
				ko.utils.arrayForEach(self.doneDays(), function(i) { p += i ; }); 
				return ((p / self.totalDays()) * 100).toFixed(2) ; 
			});
		} ;
		
		var Item = new TestItem({"doneDays": "1,2,3,4", "totalDays": 369 }) ;
		
		var data = ko.observableArray() ;
		data.push(Item) ;
		
		$(document).ready( function() {
				try {
				var source = {
					datatype: 'observableArray', localdata: data, datafields: [
					{ name: 'Title', type: 'string'},
					{ name: 'Total', type: 'int' },
					{ name: 'Done', type: 'string' },
					{ name: 'Percent', type: 'float' }
					],
				};
				var dataAdapter = new $.jqx.dataAdapter(source) ;
				$("#grid").jqxGrid({
					source: dataAdapter,
					columns: [
					{ text: 'Legend', datafield: 'Title'},
					{ text: 'Total Days', datafield: 'totalDays' },
					{ text: 'Done Days', datafield: 'doneDays' },
					{ text: '% Complete', datafield: 'Percent' }
					]
				}) ;
			}
			catch (err) {
				console.log(err) ;
			}
			ko.applyBindings(Item) ;
		});
		</script>
	</head>
	<body>
		<div style="width: 100%; height: 100%; margin-top: 10px;" id="test">
		Legend : <span data-bind="text: Title"></span></br>
		Total Days : <span data-bind="text: totalDays"></span></br>
		Done Days : <span data-bind="text: doneDays"></span></br>
		Percent % : <span data-bind="text: Percent"></span>
		</div>
		<div id="grid"></div>
	</body>
</html>
```
November 2, 2015 at 11:28 am Using ko.computed() with nested grids only works on internal grid! #77647

Mr.Moo
Participant

OK, I now know why this version of the code displays my Percent() value, and that is because it is using a ko.observableArray(), if this is changed to a $.jqx.observableArray() ‘function() g()’ is displayed instead, is there an explanation for this?

So I made the same change to my project code and it now all works as expected, with one exception and that is the display of a ko.observableArray‘s values in a grid; is this even possible?

—
Moo

November 2, 2015 at 4:42 pm Using ko.computed() with nested grids only works on internal grid! #77658

Peter Stoev
Keymaster

Hi Moo,

$.jqx.observableArray() has nothing common with ko.observableArray(). The only common is the name.

Best Regards,
Peter Stoev

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

Posts

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

You must be logged in to reply to this topic.