server side rendering in jqx grid in angular

[onkar_anarParticipant]

We are using angular and jqxgrid. We need to implement server side rendering.

I am trying to use rendergridrows function to return data which service fetches from api.
when the rendergridrows function is execute, it does not wait for subscribe to get updated data from service
and shows existing data in gridDataDetails.
Can anyone please update me with this?

Following is snippet for my code till now.

GridServiceComponent.ts

rendergridrows = (params: any): any => {
    var pageNumber= params.startindex / totalRecords;
    if (pageNumber == NaN) {
      pageNumber = 0;
    }

    this._dataService.getDetails('dataId', 'userId', pageNumber, totaRecords)
        .subscribe(res => {
          debugger
          this.gridDataDetails= res.Data;
          this.isUpdateBoundData = true;
        });
    return this.gridDataDetails;
  }

GridServiceComponent.html

<div style="margin-top:2%;margin-left:3%">
    <jqxGrid [width]=" getWidth()" [source]="dataAdapter" [columns]="gridColumns" [columnsresize]="true"
        [enabletooltips]="true" [altrows]="true" [autoheight]="true" [sortable]="true" [pageable]="true"
        [virtualmode]="true" [rendergridrows]="rendergridrows" >
    </jqxGrid>
</div>

[TodorParticipant]

Hello onkar_anar,

Please review the following example whether it fits your needs.

Let us know if you need further assistance.

Best Regards,
Todor

jQWidgets Team
https://www.jqwidgets.com

[onkar_anarParticipant]

Hi,

I tried the approach as per the link you share but i am facing the same issue, what i am trying to do
is, i have written one service and trying to fetch data from api as per paging using rendergridrows function.
Am getting data using service but rendergridrows function is running into loop continuously. what i am expecting is
rendergridrows function should execute as per paging.
is there any way to do server side paging using angular and asp .Net MVC.
Here is the code snippet

rendergridrows = (params: any): any => {
    var pageNumber= params.startindex / totalRecords;
    if (pageNumber == NaN) {
      pageNumber = 0;
    }
    this._dataService.getDetails('dataId', 'userId', pageNumber, totaRecords)
        .subscribe(res => {
          this.gridDataDetails= res.Data;
          this.myGrid.updatebounddata();
        });
    return this.gridDataDetails;
  }

[TodorParticipant]

Hello onkar_anar,

I would suggest you to review the following demo.

Best Regards,
Todor

jQWidgets Team
https://www.jqwidgets.com

[lazzieParticipant]

For me I have the same problem with jqxTree, its not waiting for the subscribe method to finish, hence its not populating my tree.
Here is my ts file

import { Component, OnInit, ViewChild } from ‘@angular/core’;
import { jqxTreeComponent } from ‘jqwidgets-ng/jqxtree’;
import { ApiService } from ‘app/services/api.service’;

@Component({
selector: ‘app-sidebar’,
templateUrl: ‘./sidebar.component.html’
})
export class SidebarComponent {
@ViewChild(‘myTree’, {static: false}) myTree: jqxTreeComponent;
data: any[]= [];
records: any;
constructor(private apiService:ApiService){
let source:any = {
datatype: ‘json’,
datafields: [
{ name: ‘id’ },
{ name: ‘parentid’ },
{ name: ‘text’ },
{ name: ‘value’ }
],
init: this.fnInitializer(),
id: ‘id’,
localdata: this.data
};
// create data adapter & perform Data Binding.
let dataAdapter = new jqx.dataAdapter(source, { autoBind: true });
this.records = dataAdapter.getRecordsHierarchy(‘id’, ‘parentid’, ‘items’, [{ name: ‘text’, map: ‘label’ }]);
}

fnInitializer()
{
this.apiService.getTree2().subscribe((list)=> {
this.data = list;
});
}
}

and here is my view file

<jqxTree #myTree [width]=”230″ [height]=”550″ [source]=”records”
style=”margin-left: 20px; margin-top:73px; float: left”></jqxTree>

[Author]

Posts