Angular jqxgrid displays empty grid

[avivbadParticipant]

I’m trying to use the jqwidgets-grid to display data loaded via http inside a grid. The problem is that the grid is rendered empty with my current code regardless of the data that is loaded.

<jqxGrid #grid [selectionmode]='"multiplerowsadvanced"' [showheader]='false'
     [autoheight]='true' [width]="525" [sortable]='true' [rtl]='true' [autoshowloadelement]="true">  
        <tr *ngFor="let telegram of telegrams$ | async">  
          <app-telegram-row [telegram]="telegram"></app-telegram-row>
        </tr>  
      </jqxGrid>

The <table> is in this HTML just to prove that the data is filled correctly in the telegrams$ observable. The table does present the contents of the telegrams correctly.

.scss

::ng-deep .jqx-grid-cell-left-align {
        text-align: right;
    }

Component:

@Component({
      selector: 'app-folder-telegrams',
      templateUrl: './folder-telegrams.component.html',
      styleUrls: ['./folder-telegrams.component.scss']
    })
    export class FolderTelegramsComponent implements OnInit, OnDestroy {
      @ViewChild('grid', {static: false}) myGrid: jqxGridComponent;
      telegrams$: Observable<Telegram[]>;
      currentFolder: number;
      subscription: Subscription;
    
      constructor(
        private telegramsService: TelegramsService
      ) { }
    
      ngOnInit() {
        this.subscription = this.telegramsService.currentFolder$.subscribe(
          currentFolder => {
            this.currentFolder = currentFolder;
            this.telegrams$ = this.telegramsService.getTelegrams(currentFolder);
          });
      }
    
      ngOnDestroy(): void {
        // tslint:disable-next-line: no-unused-expression
        this.subscription && this.subscription.unsubscribe();
      }
    }

Child component html:

<p>{{telegram.subject}}</p>

What do I need to add in order for the jqxGrid to generate the data as expected?

[avivbadParticipant]

I could not edit to delete the following sentence from my question: “The <table> is in this HTML just to prove that the data is filled correctly in the telegrams$ observable. The table does present the contents of the telegrams correctly.”

It should be ignored. The data is loaded into the telegrams observable, yet it does not work when using it inside the jqxGrid.

[avivbadParticipant]

I figured out the problem finally 🙂
I was just missing the <td> tags inside the <tr>’s.

Now I’m facing another problem and that is when displaying texts like “text 1” it displays a date instead.

[HristoParticipant]

Hello avivbad,

Please, provide us with more details.
Meanwhile, I could suggest you try to transform the data to be in the right format.
I try to create one example that could be useful.
Please, take a look at this example.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[alexisdcarvajalnParticipant]

Is it possible to set the identifier of a grid generated by code ?, for example in my html I have the following:
<jqxGrid #GridReference [width]=200 [columns]="columns></jqxGrid>
so I can access the properties and methods of the grid through its identifier that is GridReference, but if I create my grid using code,
in my html I would have:
<div id"spaceGrid"></div>
In my ts file I would create it as follows:

ngAfterViewInit(){
    let xd : jqwidgets.jqxGrid =  jqwidgets.createInstance("#spaceGrid",'jqxGrid', this.settingGrid);
  }

files = [
              {
                name:'Juan',
                address: "abc"
              },
              {
                name:'Camilo',
                address: "xyz"
              }
            ]
  source =
        {
          datafields: [
              { name: 'name' },
              { name: 'address' }
          ],
          localdata: this.files
        };

  dataAdapterGrid = new jqx.dataAdapter(this.source);
  settingGrid : jqwidgets.GridOptions = {
    source: this.dataAdapterGrid,
    width: 300,
    columns: [
      { text: 'Name', datafield: 'name', width: "60%"},
      { text: 'Address', datafield: 'address', width:"40%"},
    ]
  }

In this case I put the properties in the settingGrid variable, but how do I set this #GridReference identifier inside the settingGrid variable?
I know that I could access through the variable xd and would have to put it as global, but in one case I might have a certain number of Grids and I would not want to place an identifier for each of them. Is there a more dynamic way to do it?

[Author]

Posts