jqxGrid Stripping Object Properties From localdata/source

[chuckmParticipant]

Hello everyone!

I’ve imported the jqwidgets-ng library into an angular 13 project and am attempting to use the grid with limited success. One of the issues I’m seeing is that properties on the JS objects I’m utilizing for the grid data seemed to be stripped off if they’re not directly associated with a column.

Below is a picture from visual studio that shows and example of an object passed vs an object retrieved from the grid with many of the properties missing. Again, it appears that only the properties that correlate with a column displayed in the grid are kept.

Before/After

Is there a way to access the original properties on the object? If not, is there a definitive way to match each item in my array with the item in the grid (without having to do things like create but hide columns)?

I’m a newbie with jqwidgets so any help is appreciated!
Thanks
Chuck

• This topic was modified 1 year, 5 months ago by  chuckm.

[svetoslav_borislavovParticipant]

Hi,

You can bind the object data to the data adapter, but not bind the data from the adapter to any column.
Here is an example:

import { AfterViewInit, Component, ViewChild } from '@angular/core';
import { jqxGridComponent } from 'jqwidgets-ng/jqxgrid';

const data = [
  { id: 1, someProp: 'someValue', name: 'Hydrogen' },
  { id: 2, someProp: 'someValue', name: 'Helium' },
  { id: 3, someProp: 'someValue', name: 'Lithium' },
  { id: 4, someProp: 'someValue', name: 'Beryllium' },
  { id: 5, someProp: 'someValue', name: 'Boron' },
  { id: 6, someProp: 'someValue', name: 'Carbon' },
  { id: 7, someProp: 'someValue', name: 'Nitrogen' },
  { id: 8, someProp: 'someValue', name: 'Oxygen' },
  { id: 9, someProp: 'someValue', name: 'Fluorine' },
  { id: 10, someProp: 'someValue', name: 'Neon' },
  { id: 11, someProp: 'someValue', name: 'Sodium' },
  { id: 12, someProp: 'someValue', name: 'Magnesium' },
  { id: 13, someProp: 'someValue', name: 'Aluminum' },
  { id: 14, someProp: 'someValue', name: 'Silicon' },
  { id: 15, someProp: 'someValue', name: 'Phosphorus' },
  { id: 16, someProp: 'someValue', name: 'Sulfur' },
  { id: 17, someProp: 'someValue', name: 'Chlorine' },
  { id: 18, someProp: 'someValue', name: 'Argon' },
  { id: 19, someProp: 'someValue', name: 'Potassium' },
  { id: 20, someProp: 'someValue', name: 'Calcium' }
];

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements AfterViewInit{

  @ViewChild('grid') grid!: jqxGridComponent; 

  columns = [
    { text: 'Id', datafield: 'id' },
    { text: 'Name', datafield: 'name' }
  ];

  source = new jqx.dataAdapter({
    localData: data,
    dataFields: [
      { name: 'id', type: 'string' },
      { name: 'name', type: 'string' },
      { name: 'someProp', type: 'string' },
    ]
  });

  ngAfterViewInit() {

    console.log(this.grid.getrowdata(0));

  }
}

The logged data is the following:

{
    boundindex: 0,
    id: "1",
    name: "Hydrogen",
    someProp: "someValue",
    uid: 0,
    uniqueid: "2319-27-29-17-301719",
    visibleindex: 0
}

You can see that my extra property stays in the object.
If you have any additional questions, do not hesitate to contact us!

Best regards,
Svetoslav Borislavov
jQWidgets Team
https://www.jqwidgets.com

[chuckmParticipant]

Hello Svetoslav Borislavov!

Thank you for your response. So, if I understand you correctly, I have to declare every other property in the datafields to ensure they’re not stripped off, is that correct?

I have a LOT of grids with an unknown number of properties coming from many different tables. I supposed I could do this programmatically though it seems best to have an option that would allow you to keep the properties intact.

Thanks again, I appreciate the information!
Chuck

[svetoslav_borislavovParticipant]

Hi,

Unfortunately, there is no such option, you can do it programmatically.

Best regards,
Svetoslav Borislavov
jQWidgets Team
https://www.jqwidgets.com

[svetoslav_borislavovParticipant]

Hi,

Have a look at this example of binding the data programmatically:

import { Component} from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {

  data = [
    { id: 1, someProp: 'someValue', name: 'Hydrogen' },
    { id: 2, someProp: 'someValue', name: 'Helium' },
    { id: 3, someProp: 'someValue', name: 'Potassium' },
    { id: 4, name: 'Calcium' },
    { id: 5, another: 'someValue', name: 'Calcium' },
    { id: 5, another: 'someValue', date: new Date() },

  ];

  columns = [
    { text: 'Id', datafield: 'id' },
    { text: 'Name', datafield: 'name' }
  ];

  datafields: any[] = [];

  dataSource;

  constructor() {

    this.data.forEach(element => {

      for (const key in element) {

        if (!this.datafields.some((field) => field.name == key)) {

          let type;

          if (typeof element[key as keyof typeof element] == 'number') {
            type = 'number';
          } else if (typeof element[key as keyof typeof element] == 'string') {
            type = 'string'
          } else if (typeof element[key as keyof typeof element] == 'boolean') {
            type = 'boolean'
          } else if (element[key as keyof typeof element]! > 0) { //Check for a date
            type = 'date'
          }

          const field: any = {
            name: key
          }

          if (type) {

            field.type = type;

          }

          this.datafields.push(field);
        }
      }

    });

    this.dataSource = new jqx.dataAdapter({
      localData: this.data,
      dataFields: this.datafields,
      beforeLoadComplete: (records: any[]) => {

        records.map(record => {

          for (const key in record) {
            if (!record[key]) {
              delete record[key];
            }
          }
        });

        return records;
      }
    });
  }
}

Should you have any questions, please don’t hesitate to contact us.

Best regards,
Svetoslav Borislavov

jQWidgets Team
https://www.jqwidgets.com

• This reply was modified 1 year, 5 months ago by  svetoslav_borislavov.

[Author]

Posts