jqx-grid – column data issue

[aigleborgneParticipant]

Hello,

I’m trying the last version with angular directives and I have a big issue with data.
I have this settings:
<jqx-grid jqx-settings="settings"></jqx-grid>

In my controller:

		$scope.columns = [ {
			text : $translate.instant('PARAMETER.FIELDS.NAME'),
			dataField : 'name',
			width : 300
		}, {
			text : $translate.instant('PARAMETER.FIELDS.LABEL'),
			dataField : 'label',
			width : 200
		}, {
			text : $translate.instant('PARAMETER.FIELDS.VALUE'),
			dataField : 'value',
			width : 300
		}
		];

		$scope.settings = {
				altrows : true,
				width : 900,
				height : 400,
				source : $scope.parameters,
				columns : $scope.columns,
				rowselect: function(event) {
					$scope.selectedRow = event.args.row;
				}
		};

Value column can hold several types: number, string, boolean.
String and boolean work fine but numbers are simply missing from DOM. I have inspected it closely and there is nothing in the <div> container.
It reminded me an old issue with grid filter that weren’t working with numbers but this one is more annoying since I can’t even properly display my table.
I don’t know where to start because there is no strong documentation on angular directives and in a classic grid, we must use a data-adapter in between.

Of course, my datasource is correct, no doubt on that.
Any idea?

[Peter StoevKeymaster]

Hi aigleborgne,

Try with a jqxDataAdapter for a data source. The documentation should be strong enough because you have multiple help topics about jqxGrid and hundreds of showcase examples and hundreds of API Documentation examples. The angularjs documentation clearly shows how a widget should be created and the widget’s API is the same as in the provided documentation on our site.

Best Regards,
Peter Stoev

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

[aigleborgneParticipant]

I will try your suggestion but still, it doesn’t explain why it doesn’t work properly in my case as I exactly used the same code I found in your example.
It looks like a bug or something close.

It should work with a data-adapter as I was using this in the past, along with my own grid directive which was internally using a data-adapter to set datasource.
Angular’s documentation shows how to use directives to control one widget but it can be ambiguous when using several widgets all-together.
For example, in jqx-grid, I could try to add jqx-data-adapter in my directive, but then, I have to connect it with jqx-grid directive.

Or eventually, I have to use a direct call to data-adapter object in my controller and affects it to columns.
When I look to jq-grid documentation, there is no columns properties, this one is excluvisely used by jqx-grid directive.

So yes, there are plenty examples and a strong documentation, but it doesn’t cover anything, especially in angulation direction.

Regards

[Peter StoevKeymaster]

Hi aigleborgne,

You can’t find the columns property in the jqxGrid’s Documentation. Ok, open http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid-api.htm, type columns in the search field and you will find it. jqx-data-adapter – I don’t know what is this because there is no such property in any widget. There is jqx-source because there is source property. Everything is documented, but there is a learning curve and careful reading.

Best Regards,
Peter Stoev

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

[aigleborgneParticipant]

Okay, I finally managed to do it with the following code. While it is working, it is quite tedious for a simple grid, I guess I could do a wrapper for settings parameters. Thank you!

		var source = {
					localdata: $scope.creatures,
					datafields: [
					   { name: 'resource', type: 'string' },
					   { name: 'game', type: 'string' }
					],
					datatype: "array"
			};
			
			var dataAdapter = new $.jqx.dataAdapter(source);

			var columns = [ {
				text : $translate.instant('CREATURE.FIELDS.RESOURCE'),
				dataField : 'resource',
				width : 100
			}, {
				text : $translate.instant('CREATURE.FIELDS.NAME'),
				dataField : 'game',
				width : 200
			}
			];
			
			$scope.settings = {
					altrows : true,
					width : 900,
					height : 400,
					source : dataAdapter,
					columns : columns,
					rowselect: function(event) {
						$scope.selectedRow = event.args.row;
					}
			};

[Author]

Posts