jQuery UI Widgets › Forums › Angular › Jqxgrid not responsive in Angular theme
This topic contains 3 replies, has 3 voices, and was last updated by Yavor Dashev 3 years, 3 months ago.
-
Author
-
When we have a jqxgrid angular component inside a custom angular theme with sidebar, on collapsing of the sidebar, the grid becomes unresponsive.
Meaning that the width of the grid container is enlarged, but the columns do not adjust accordingly. However when we click somewhere on the grid, columns become as expected.Please suggest some fix or workaround for the above.
Hi uditi0810,
We will require a code example of your situation in order to reproduce your issue and to make a solution that suits you.
Also I would recommend you to take a look at the following demos:
https://www.jqwidgets.com/angular/angular-grid/#https://www.jqwidgets.com/angular/angular-grid/angular-grid-adaptive-layout.htm
https://www.jqwidgets.com/angular/angular-grid/#https://www.jqwidgets.com/angular/angular-grid/angular-grid-fluidsize.htmPlease, do not hesitate to contact us if you have any additional questions.
Best Regards,
Yavor Dashev
jQWidgets team
https://www.jqwidgets.comI going through the following links
https://www.jqwidgets.com/angular/angular-grid/#https://www.jqwidgets.com/angular/angular-grid/angular-grid-adaptive-layout.htm
https://www.jqwidgets.com/angular/angular-grid/#https://www.jqwidgets.com/angular/angular-grid/angular-grid-fluidsize.htmBut I am unable to achieve responsive on jqxgrid. Can you share with me the exact code to achieve responsiveness in angular?
Thank you.
Hi dreamplayer,
I have tested the exact same demos regarding the jqxGrid fluidsize and adaptive layout and they all seem to work.
You can have at all the code needed for them in the demo page you have shared.
However I will share a complete code example that I used to achieve these funcitonalities:
In your app.component.ts file:import { Component, ViewChild,AfterViewInit, ViewEncapsulation, EventEmitter} from '@angular/core'; import { generatedata } from '../sampledata/generatedata' @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], encapsulation: ViewEncapsulation.None }) export class AppComponent implements AfterViewInit{ tComponent; getWidth() : any { if (document.body.offsetWidth < 850) { return '90%'; } return 850; } source2: any = { localdata: generatedata(500, false), datafields: [ { name: 'name', type: 'string' }, { name: 'productname', type: 'string' }, { name: 'available', type: 'bool' }, { name: 'date', type: 'date' }, { name: 'quantity', type: 'number' } ], datatype: 'array' }; dataAdapter2: any = new jqx.dataAdapter(this.source2); columns: any[] = [ { text: 'Name', columntype: 'textbox', datafield: 'name', width: '20%' }, { text: 'Product', datafield: 'productname', width: '35%' }, { text: 'Ship Date', datafield: 'date', filtertype: 'date', width: '30%', cellsalign: 'right', cellsformat: 'd' }, { text: 'Qty.', datafield: 'quantity', width: '15%', cellsalign: 'right' } ];
In your app.module.ts file:
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; import { jqxGridModule } from 'jqwidgets-ng/jqxgrid'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, jqxGridModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
And in your app.component.html file:
<jqxGrid [width]="'100%'" [height]="'90%'" [source]="dataAdapter2" [columns]="columns" [columnsresize]="true" [adaptive]="true" [showfilterrow]="true" [filterable]="true" [selectionmode]="'multiplecellsadvanced'"> </jqxGrid>
If this doesn’t work for you its best to create a code example that reproduces your issue.
Please, do not hesitate to contact us if you have any additional questions.
Best Regards,
Yavor Dashev
jQWidgets team
https://www.jqwidgets.com -
AuthorPosts
You must be logged in to reply to this topic.