jQuery UI Widgets Forums Angular Jqxgrid not responsive in Angular theme

Tagged: ,

This topic contains 3 replies, has 3 voices, and was last updated by  Yavor Dashev 1 month, 3 weeks ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author

  • uditi0810
    Participant

    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.


    Yavor Dashev
    Participant

    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.htm

    Please, do not hesitate to contact us if you have any additional questions.

    Best Regards,
    Yavor Dashev
    jQWidgets team
    https://www.jqwidgets.com


    dreamplayer
    Participant

    I 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.htm

    But I am unable to achieve responsive on jqxgrid. Can you share with me the exact code to achieve responsiveness in angular?

    Thank you.


    Yavor Dashev
    Participant

    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

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.