jQuery UI Widgets Forums Angular Angular jqxgrid displays empty grid

Tagged: 

This topic contains 4 replies, has 3 voices, and was last updated by  alexisdcarvajaln 4 months, 3 weeks ago.

Viewing 5 posts - 1 through 5 (of 5 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 6 months, 1 week ago by  avivbad.
    • This topic was modified 6 months, 1 week ago by  avivbad.
    • This topic was modified 6 months, 1 week ago by  avivbad.
    • This topic was modified 6 months, 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 6 months, 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

    Angular jqxgrid displays empty grid #108143

    alexisdcarvajaln
    Participant

    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?

    • This reply was modified 4 months, 3 weeks ago by  alexisdcarvajaln. Reason: add details
Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.