jQuery UI Widgets Forums Angular Angular jqxgrid displays empty grid

Tagged: 

This topic contains 3 replies, has 2 voices, and was last updated by  Hristo 1 month, 1 week ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • Angular jqxgrid displays empty grid #107782

    avivbad
    Participant

    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?

    • This topic was modified 1 month, 1 week ago by  avivbad.
    • This topic was modified 1 month, 1 week ago by  avivbad.
    • This topic was modified 1 month, 1 week ago by  avivbad.
    • This topic was modified 1 month, 1 week ago by  avivbad.
    Angular jqxgrid displays empty grid #107787

    avivbad
    Participant

    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.

    Angular jqxgrid displays empty grid #107788

    avivbad
    Participant

    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.

    • This reply was modified 1 month, 1 week ago by  avivbad.
    Angular jqxgrid displays empty grid #107796

    Hristo
    Participant

    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

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

You must be logged in to reply to this topic.