Forums Home / Wijmo / General Discussion
Posted by: sbanerjee on 14 September 2017, 2:48 am EST
sbanerjee
Posted 14 September 2017, 2:48 am EST
I am working on a web application (Angular 2 and Asp.net web API) that expected to update wijmo grid in real time.
What are the technologies can be used to achieve this real-time notification?
Does wijmo support real time programming?can you please provide some application or approach to implement
Thanks
skochan
Posted 14 September 2017, 2:48 am EST
Hi sbanerjee,
Yes, Wijmo 5 does support real time programming. You can use the ObservableArray instead of a regular JavaScript array to achieve your requirement of updating the grid with real time data. An ObservableArray updates the Wijmo Control ( FlexGrid in your case) whenever the underlying data changes.
Here is sample code:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="css/bootstrap.css" /> <link rel="stylesheet" type="text/css" href="css/wijmo.css" /> <link rel="stylesheet" type="text/css" href="css/app.css"/> <!-- Angular 2 --/> <script src="scripts/angular2.dev.js"/></script/> <script src="scripts/wijmo.js" type="text/javascript"/></script/> <script src="scripts/wijmo.input.js" type="text/javascript"/></script/> <script src="scripts/wijmo.grid.js" type="text/javascript"/></script/> <script src="scripts/wijmo.angular2.js" type="text/javascript"/></script/> <!-- Load the root application module --> <script> System.import('./src/app'); </script> </head> <body> <!-- Add root application component --> <app-cmp> <wj-flex-grid [itemsSource]="data"> </wj-flex-grid> </app-cmp> </body> </html>
import { Injectable } from '@angular/core'; // Common data service @Injectable() export class DataSvc { // data used to generate random items getData(count: number): wijmo.collections.ObservableArray { var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','), data = new wijmo.collections.ObservableArray(); for (var i = 0; i < count; i++) { data.push({ id: i, country: countries[i % countries.length], date: new Date(2014, i % 12, i % 28), amount: Math.random() * 10000, active: i % 4 == 0 }); } return data; } ---------------------Component------------------- // Angular import { Component, EventEmitter, Input, Inject, enableProdMode, NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { CommonModule } from '@angular/common'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { BrowserModule } from '@angular/platform-browser'; import { WjGridModule } from 'wijmo/wijmo.angular2.grid'; import { WjInputModule } from 'wijmo/wijmo.angular2.input'; import { TabsModule } from './components/AppTab'; import { DataSvc } from './services/DataSvc'; // The Explorer application root component. @Component({ selector: 'app-cmp' }) export class AppCmp { // generate some random data protected dataSvc: DataSvc; data: wijmo.collections.CollectionView; constructor(@Inject(DataSvc) dataSvc: DataSvc) { this.dataSvc = dataSvc; this.data = new wijmo.collections.CollectionView(this.dataSvc.getData(100)); } } @NgModule({ imports: [WjInputModule, WjGridModule, BrowserModule, FormsModule, TabsModule], declarations: [AppCmp], providers: [DataSvc], bootstrap: [AppCmp] }) export class AppModule { } enableProdMode(); // Bootstrap application with hash style navigation and global services. platformBrowserDynamic().bootstrapModule(AppModule);
You will need to push the data to the ObservableArray from your Service Implementation. You can use SignalR for this purpose. SignalR can be used to push data to your SPA/client app. There are some great articles on the same. You can read some of there from here and here
Thanks,
Abhishek
balabalachandar1999
Posted 6 July 2022, 10:14 pm EST
Hello,
I need to wijmo toastr
rodrigo.calle
Posted 26 December 2023, 1:13 am EST
I’m implementing a table with a component detail for each row containing a form shown when clicking on a specific row. This form updates the item source data of the table when it happens the table is reloaded and closes the details. How can I update the table from the form without getting this performance?. I’m working with react
anirudh.verma
Posted 27 December 2023, 6:31 pm EST
Hi Rodrigo,
Since this query is different from the original issue mentioned in this post(already answered) so, I have created a new case for you. Please refer to this link for the case: https://developer.mescius.com/my-account/my-support/case/CAS-46166-V3K9F4
Here is the copy of the response for further reference:
You can call preventDefault() method on the event argument received in the handler of onSubmit event of the form. Also, to update the data in the FlexGrid, please use the editItem() method of CollectionView instance and perform the required changes on the data item. Then to commit the changes, please call the commitEdit() method of the CollectionView instance. This will display the changed data in the FlexGrid.
Please refer to this sample for reference: https://stackblitz.com/edit/react-sample-detailrow-with-form
Please refer to the following API links for more information:
Also, in case if you have any further queries relate to this issue then please continue on the newly created case(CAS-46166-V3K9F4). You may also create a new case if you face any new issues.
Regards
