1. Home
  2. Forum
  3. Angular - EJ 2
  4. Update row data when we update modal object and How to get all row of selected page in pagination

Update row data when we update modal object and How to get all row of selected page in pagination

Hello,

I am using syncfusion grid in my angular 2 project. I am showing all the model object into rows in ejs-grid. I have real time feeds to update model object. So after updating model I want to update row with real time feeds. I want to feed real time price feeds in ejs grid. And other query I have implemented pagination in grid view. I need a function where I can get all the visible row items when I move to one page to other page in pagination.

11 Replies
VA Venkatesh Ayothi Raman Syncfusion Team August 27, 2018 10:41 AM UTC

Hi Brijesh, 

Thanks for contacting Syncfusion Support. 

Query #1:  after updating model I want to update row with real time feeds. I want to feed real time price feeds in ejs grid 

You can achieve your requirement by using the dataBound event of Grid component. We already have the real-time data binding sample in our Feature Tour. Please refer to the below code example, Documentation link and sample link. 
 
[component.ts] 
@Component({ 
        selector: 'app-root', 
       template: `<ejs-grid #grid [dataSource]='data' [allowSelection]='false' [enableHover]='false' 
    height='300' (queryCellInfo)='queryCellInfo($event)' (dataBound)='dataBound($event)'> 
    <e-columns> 
        . . . 
        <e-column field='Net' headerText='Net' width='120' format='N2' textAlign='Right'></e-column> 
        <e-column field='Rating' headerText='Rating' width='120'></e-column> 
    </e-columns> 
    </ejs-grid>` 
}) 
 
export class AppComponent extends Subject<DataStateChangeEventArgs> implements OnInit { 
    public data: Object[] = []; 
    @ViewChild('grid') 
    public grid: GridComponent; 
 
    ngOnInit() { 
        this.getTradeData(20).then((e: any) => { 
            this.data = e; 
        }); 
    } 
    .  .  . 
    dataBound(args: any): void { 
        clearTimeout(clrIntervalFun1); 
        clearInterval(intervalFun); 
        if (isDataChanged) { 
 
            clrIntervalFun1 = setTimeout(() => { intervalFun = setInterval(() => this.startTimer(), 1000); }, 0); 
        } else { 
            intervalFun = setInterval(() => this.startTimer(), 1000); 
        } 
    } 
 
    startTimer(): void { 
        let oldValue: number; 
        const newValue: any = 0; 
        for (let i: any = 0; i < this.grid.currentViewData.length; i++) { 
            if (this.grid.currentViewData[i] === undefined) { 
                return; 
            } 
            if (i % 2 === 0) { 
                let num: number = Math.floor(Math.random() * 99) + 1; 
                num *= Math.floor(Math.random() * 2) === 1 ? 1 : -1; 
                num = num * 0.25; 
                isDataBound = true; 
                oldValue = this.grid.currentViewData[i]['Net']; 
                this.grid.setCellValue(this.grid.currentViewData[i]['CountryCode'], 'Net', parseFloat(num.toFixed(2)));         //updates the new data to the row cell 
            } 
            . . . 
        } 
    } 
 
    public getTradeData(dataCount?: number): Promise<Object> { 
        . . . 
        for (let i: any = 1; i <= dataCount; i++) { 
            clrIntervalFun2 = setTimeout(() => { 
                tradeData.push({ 
                    'CountryCode': contryNames[Math.floor(Math.random() * contryNames.length)] 
                    + contryNames[Math.floor(Math.random() * contryNames.length)], 
                    'change': (Math.floor(Math.random() * 201) - 90 * 0.96).toFixed(2), 
                    'Net': (Math.floor(Math.random() * 201) - 90 * 2.95).toFixed(2), 
                    'Rating': rating[Math.floor(Math.random() * rating.length)], 
                   }); 
                if (i === dataCount) { 
                    deferred.resolve(tradeData); 
                } 
            }, 500); 
        } 
        return deferred.promise; 
    } 
} 


                              https://ej2.syncfusion.com/angular/documentation/grid/api-gridComponent.html#setcellvalue  

Demo link           : https://www.syncfusion.com/products/angular/datagrid  


 
If we misunderstood your requirement then could you please provide more information about your requirement? 
 
 
Query #2: I need a function where I can get all the visible row items when I move to one page to other page in pagination.  
 
You can achieve your requirement by using the ‘actionComplete’ event of Grid component which will be triggered when Grid actions are completed. We have prepared a simple sample based on your query. Please refer to the below code example, Documentation link and sample link. 
 
[component.ts] 
@Component({ 
        selector: 'app-root', 
       template: `<ejs-grid #grid [dataSource]='data' [allowPaging]=’true’ 
    height='300'  (actoinComplete)='complete($event)'> 
    <e-columns> 
    .  .  . 
    </e-columns> 
    </ejs-grid>` 
}) 
 
export class AppComponent extends Subject<DataStateChangeEventArgs> implements OnInit { 
    public data: Object[] = []; 
    @ViewChild('grid') 
    public grid: GridComponent; 
 
    complete (args: any): void { 
   if (e.requestType === 'paging') { 
        console.log(this.grid.getRows());   // gets the Current View row elements 
        console.log(this.grid.getRowsObject());// gets the Current View row objects 
    } 
    } 
 
 
                              https://ej2.syncfusion.com/angular/documentation/grid/api-gridComponent.html#actioncomplete  
 
 
Please let us know if you have any further assistance on this. 
 
Regards, 
Venkatesh Ayothiraman. 


BR Brijesh August 29, 2018 01:10 PM UTC

I have some query on your solution.

1. In demo you are updating cell value directly for every update. We have list of data model and that list we used to draw Grid. No we want to update data into model object only and Grid also using the same model object So UI should refresh automatically. In your samples your "tradeData" for list of objects. If we can single object from tradeData and update some value then on Grid UI same value should reflect.

2. In pagination view how can we get current view data records.  

It will be very helpful if you provide your response ASAP.

Sample Code

<ejs-grid #grid [dataSource]='items.dataset' [allowSorting]='true'[allowPaging]='pagination' [pageSettings]='pageSettings'>
<e-columns>
<e-column *ngFor="let hitem of items.header" field='{{hitem.DisplayBinding}}' headerText='{{hitem.HeaderText}}' >e-column>
e-columns>
<ng-template #rowTemplate let-data>
<tr>
<ng-container *ngTemplateOutlet="gridItemTemplate; context: {$implicit: data}">ng-container>
tr>
ng-template>
ejs-grid>

VA Venkatesh Ayothi Raman Syncfusion Team August 30, 2018 10:02 AM UTC

Hi Brijesh, 
 
Thanks for the update. 

Query #1:’Refresh the Grid UI when we update the Data in server side’ 

We have checked your query and We have prepared a simple sample based on your requirement. In that sample we have send an AJAX request to the server in a button click event to update the data model to the server. And then We have called the grid.refresh() method to refresh the Grid in client side. Please refer to the below code example, Documentation link and sample link. 

[component.ts] 
@Component({ 
    selector: 'fetchdata', 
    template: ` <button ej-button class='e-flat' (click)='click()'>Change Model</button> 
<ejs-grid #grid [dataSource]='data' allowPaging="true" height="320" (actionComplete)='complete($event)'> 
    <e-columns> 
    <e-column *ngFor="let hitem of items" field='{{hitem.DisplayBinding}}' headerText='{{hitem.HeaderText}}'></e-column>> 
    </e-columns> 
</ejs-grid>` 
}) 
export class FetchDataComponent { 
  .  .  . 
  ngOnInit(): void { 
    this.data = new DataManager({ 
      url: 'api/Orders', 
      adaptor: new WebApiAdaptor 
    }); 
  } 
    click(): void {        
        const data:any = { OrderID: this.ID++, CustomerID: "Modified", EmployeeID: 10 }; 
        const keyField = this.grid.getPrimaryKeyFieldNames()[0]; 
        const ajax = new Ajax(); 
        ajax.type = "PUT"; 
        ajax.url = "api/Orders"; 
            ajax.data = JSON.stringify({ 
                value: data, 
                action: 'update', 
                keyColumn: keyField, 
                key: data[keyField] 
            }) 
        ajax.send();  // sending AJAX to change model 
        this.grid.refresh(); 
    }; 
} 
 




Note  : For your information, the Essential JavaScript 2 Grid, We have an option to persist the data in server while modifying the data in client through DataManager. So You can update the data model both in client and server side without calling refresh() method. Please refer to the below Documentation link. 


Query #2:’Get the current page data’  
                                                          
You can get the current view records while paging action by using the gridObj.currentViewDate property or getCurrentViewRecords() method. Please refer to the below code example and documentation. 

[component.ts] 
@Component({ 
    selector: 'fetchdata', 
    template: `<ejs-grid #grid [dataSource]='data' allowPaging="true" height="320" (actionComplete)='complete($event)'> 
    <e-columns> 
    <e-column *ngFor="let hitem of items" field='{{hitem.DisplayBinding}}' headerText='{{hitem.HeaderText}}'></e-column>> 
    </e-columns> 
</ejs-grid>` 
}) 
export class FetchDataComponent { 
  .  .  . 
  @ViewChild('grid') 
  public grid: GridComponent; 
 
  ngOnInit(): void { 
    this.data = new DataManager({ 
      url: 'api/Orders', 
      adaptor: new WebApiAdaptor 
    }); 
  } 
    complete(args: any): void { 
        if (args.requestType === 'paging') { 
            console.log(this.grid.currentViewData);   // gets the Current View Data  
            console.log(this.grid.getCurrentViewRecords());   // gets the Current View Data 
        } 
    } 
} 
 



Please let us know if you have any further assistance on this. 
 
Regards, 
Venkatesh Ayothiraman. 


BR Brijesh August 30, 2018 12:47 PM UTC

Query #1:’Refresh the Grid UI when we update the Data in server side’ 

If we call refresh every time then it will be overhead. Suppose we have 25 rows in grid and each row data updates 10 update/second then refresh will not work. We need a option to bind model object with grid. So whenever model property update grid should update automatically. Can we achieve two way binding with model list with grid datasource.

Query #2: I need a function where I can get all the visible row items when I move to one page to another page in pagination. 

We have scenario where we are using custom row template. And in custom row we have some input box in row. So when we update input box and get current view records it gives all records with previous values.

   

VA Venkatesh Ayothi Raman Syncfusion Team August 31, 2018 12:22 PM UTC

Hi Brijesh, 

Thanks for the update. 
 
Query #1: 

In Essential JavaScript 2 Grid component, Currently, we don’t have support for two way binding for dataSource. However, you can achieve your requirement by updating the grid.dataSource property after changing the data model in the server. Please refer to the below code example and sample link. 
 
[component.ts] 
export class FetchDataComponent { 
    .   .   . 
     updateModel(e:any) { 
        const data: any = e; 
        const ajax = new Ajax();         
        ajax.url = "Home/Update"; 
        ajax.data = JSON.stringify(data); 
        ajax.send(); // AJAX request to make change in Data model 
         ajax.onSuccess = function (gridData: any) { 
             grid.dataSource = new DataManager({ 
                 json: JSON.parse(gridData), 
                 adaptor: new RemoteSaveAdaptor 
             }); 
         }        
} 
 
    click(): void { 
       .  .  .      
        this.updateModel(data); 
    }; 
     
} 



Query #2: 

If you update the input box present in the custom rowTemplate, then the grid should be updated with the modified value. You can achieve your requirement by using the JSON property of the DataManager with RemoteSaveAdaptor like the above-stated way. Please refer to the below code example. 

[component.ts] 
@Component({ 
    selector: 'fetchdata', 
    template: '<button ej-button class='e-flat' (click)='click()'>Change Model</button> 
<ejs-grid #grid [dataSource]='data' (created)='created($event)' (actionFailure)='fail($event)' allowPaging="true" [editSettings]='editSettings' height="320" (actionComplete)='complete($event)'> 
    <e-columns> 
        <e-column *ngFor="let hitem of items" field='{{hitem.DisplayBinding}}' headerText='{{hitem.HeaderText}}'></e-column>> 
    </e-columns> 
    <ng-template #rowTemplate let-data> 
        <tr class="e-row"> 
             .  .  . 
            <td class="e-rowcell"><input value="{{data.EmployeeID}}" />  <button ejs-button (click)="update($event)" cssClass="e-success">Update</button></td> 
        </tr> 
                     
    </ng-template> 
</ejs-grid>' 
}) 
export class FetchDataComponent { 
      .  .  . 
       
     
    update(e: any): void { 
        . .  .            
        this.updateModel(Object.assign(data, {EmployeeID:val})); 
    } 
 
     updateModel(e:any) { 
        .  .  . 
         ajax.onSuccess = function (gridData: any) { 
             const grid = (document.getElementsByClassName('e-grid')[0] as any).ej2_instances[0]; 
             grid.dataSource = new DataManager({ 
                 json: JSON.parse(gridData), 
                 adaptor: new RemoteSaveAdaptor 
             }); 
         }        
} 
 
     


Please let us know if you have any further assistance on this. 
 
Regards, 
Venkatesh Ayothiraman. 


BR Brijesh September 3, 2018 02:51 PM UTC

In Essential JavaScript 2 Grid component, Currently, we don’t have support for two way binding for dataSource

When can we expect release for two way binding in ejs-grid?

VA Venkatesh Ayothi Raman Syncfusion Team September 4, 2018 09:55 AM UTC

Hi Brijesh, 
 
Thanks for the update. 
 
In Essential JS2 we have used object reference (Inner property changes does not reflect the control) instead of deep watch to prevent the performance issue. We suggest you to use the below solution for overcome this problem, 
 
In such cases, we can enforce change detection, similar to the way followed by OnPush Change detection strategy, by changing the reference using the below simple line.    
   
   
onClickMe():void{   
    this.data[0]['CustomerID'] = "SUPRD";    
    this.data = [...this.data]   
  }   
   
   
Please check below links on more info using OnPush change detection strategy and enforcing change detection with after data change.   
   
   
 
Regards, 
Venkatesh Ayothiraman. 


BR Brijesh December 25, 2018 10:41 AM UTC

Hi Venkatesh,

Can we accept that now syncfusion grid support real time updated. As per your suggestion to use push technology for updates. But in our scenario we have list of model object which are receiving continue update from websocket. In push technique we have to notify when object model is changed but we need a approach where we update model in update the Grid UI same time.  



PS Pavithra Subramaniyam Syncfusion Team December 26, 2018 05:08 AM UTC

 
Query: In push technique we have to notify when object model is changed but we need a approach where we update model in update the Grid UI same time.   
 
We have already logged “Need to provide pipeline support” as a feature and this support will be available in any of our upcoming release.  
 
Regards, 
Pavithra S. 


BR Brijesh replied to Pavithra Subramaniyam September 16, 2019 07:25 AM UTC

 
Query: In push technique we have to notify when object model is changed but we need a approach where we update model in update the Grid UI same time.   
 
We have already logged “Need to provide pipeline support” as a feature and this support will be available in any of our upcoming release.  
 
Regards, 
Pavithra S. 


Hi Pavithra,

As you said it will be part of upcoming release. Can you please let us know it is released?

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team September 17, 2019 07:25 AM UTC

Hi Brijesh,  

We have already the Async Support to the Grid DataSource. Refer to the following documentation and demo. 


Regards,  
Seeni Sakthi Kumar S 


Loader.
Up arrow icon