Filter Row: Scrolling Effect issue

[BennyParticipant]

Hi
I am facing one issue regarding in filter row ,right now I have 16 columns with horizontal scroll in Jqx grid. As I can see that row filter creates input widget against each div ‘.jqx-input-widget’ but only for those in visible area as i scroll to the end of the grid it changes. Is there any property to stop that behavior as I cannot see this kind of behavior for any other jqx grid example.Please help me on this

[HristoParticipant]

Hello Benny,

Could you clarify your issue?
Also, it will be better if you could provide us an example?

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[alevineplusconsultingParticipant]

I’m seeing the same issue. Essentially, a grid is initialized with 100% width, columns that are hidden, and a filter row. Whenever a new column is unhidden and forces the width of the grid to display a horizontal scrollbar, the columns that were not in view have become distorted.

Here is a screenshot of the grid before unhiding columns:

Here is a screenshot after the update and not scolled left (note the new column and scroll position):

Here is a screenshot displaying the issue when the grid is scrolled all the way to the right:

Here is the typescript code (though I don’t think it matters since it appears to be an issue wiht how the grid is rendered when not in view):

import { Component, OnInit, ViewChild, AfterViewInit, Input, EventEmitter, Output, ElementRef, ViewEncapsulation, OnDestroy  } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ActivatedRoute, ParamMap } from '@angular/router';
import { Subject } from 'rxjs/Subject';
import { jqxGridComponent } from '../../../../../libs/jqwidgets/ts/angular_jqxgrid';
import { jqxDropDownListComponent } from '../../../../../libs/jqwidgets/ts/angular_jqxdropdownlist';
import { RateScheduleService, NotificationService } from '../../../../services';
import { PricingRateSchedule, GridSearchRequest, GridSearchFilterRequest, RateDocumentSearchRequest,
    RateDocumentSearchResponse, PricingRateDownload, PricingRate, RateDocumentRateSearchRequest,
    RateDocumentRateSearchResponse } from '../../../../interfaces';
import * as moment from 'moment/moment';
@Component({
    selector: 'rate-schedule-rates-grid-component',
    templateUrl: './rate-schedule-rates-grid.component.html',
    styleUrls: ['./rate-schedule-rates-grid.styles.scss'],
    encapsulation: ViewEncapsulation.None
})

export class RateSchedulesRatesGridComponent implements OnDestroy {
    @ViewChild('gridRatesReference') public gridRef: jqxGridComponent;
    @ViewChild('viewColumnDropDown') public viewColumnDropDown: jqxDropDownListComponent;
    public gridData: PricingRate[];
    public gridSource: any;
    public gridCurrentPageSize: number = 10;
    public gridPageSizes: number[] = [10, 20, 50, 100, 200, 500];
    public controlsInitialized: boolean = false;
    public pagerLabel: string = '';
    public rateSchedule: PricingRateSchedule;
    public breadcrumbs: string = '';
    private ngUnsubscribe: Subject<void> = new Subject<void>();

    constructor(private _rateScheduleService: RateScheduleService, private _activatedRoute: ActivatedRoute, private _notificationService: NotificationService) {    }

    public refreshGrid(): void {
        this.gridRef.updatebounddata();
    }

    public customCellRenderer(index, columnfield, value, defaulthtml, columnproperties, rowdata): string {
        let defaultHTMLObject = jQuery(defaulthtml);
        let customClass = '';
        if (columnfield === 'edit') {
            return '<div class="custom-rendered edit-column"><i class="fa fa-pencil" aria-hidden="true"></i></div>';
        }
        return '<div></div>';
    }

    public updateRateSchedule(newSchedule: PricingRateSchedule) {
        this.rateSchedule = newSchedule;
        this.breadcrumbs = ' > ' + this.rateSchedule.customerName + ' > ' + this.rateSchedule.carrierName + ' > ' + this.rateSchedule.name;
        if (!this.controlsInitialized) {
            this.initializeGrid();
            this.initializeDropDown();
            this.controlsInitialized = true;
        }
        else {
            this.gridRef.updatebounddata();
        }
    }

    public initializeDropDown(): void {
        let dropdownSource = [];
        dropdownSource.push({ ColumnDisplayName: 'ORIGIN CITY', ColumnName: 'originCity'});
        dropdownSource.push({ ColumnDisplayName: 'ORIGIN STATE', ColumnName: 'originState'});
        dropdownSource.push({ ColumnDisplayName: 'ORIGIN ZIP CODE', ColumnName: 'originZip'});
        dropdownSource.push({ ColumnDisplayName: 'ORIGIN COUNTRY', ColumnName: 'originCountry'});
        dropdownSource.push({ ColumnDisplayName: 'ORIGIN 3-DIGIT ZIP CODE', ColumnName: 'origin3DigitZip'});
        dropdownSource.push({ ColumnDisplayName: 'DESTINATION CITY', ColumnName: 'destinationCity'});
        dropdownSource.push({ ColumnDisplayName: 'DESTINATION STATE', ColumnName: 'destinationState'});
        dropdownSource.push({ ColumnDisplayName: 'DESTINATION ZIP CODE', ColumnName: 'destinationZip'});
        dropdownSource.push({ ColumnDisplayName: 'DESTINATION COUNTRY', ColumnName: 'destinationCountry'});
        dropdownSource.push({ ColumnDisplayName: 'DESTINATION 3-DIGIT ZIP CODE', ColumnName: 'destination3DigitZip'});
        dropdownSource.push({ ColumnDisplayName: 'RANK', ColumnName: 'rank'});
        dropdownSource.push({ ColumnDisplayName: 'RATE', ColumnName: 'rate'});
        dropdownSource.push({ ColumnDisplayName: 'MINIMUM CHARGE', ColumnName: 'minimumCharge'});
        dropdownSource.push({ ColumnDisplayName: 'LANE TYPE', ColumnName: 'laneType'});
        dropdownSource.push({ ColumnDisplayName: 'RATE TYPE', ColumnName: 'rateType'});
        dropdownSource.push({ ColumnDisplayName: 'MODE', ColumnName: 'mode'});

        for (let x = 1; x <= 8; x++) {
            dropdownSource.push({ ColumnDisplayName: 'STOP ' + x + ' CITY', ColumnName: 'stop' + x + 'City'});
            dropdownSource.push({ ColumnDisplayName: 'STOP ' + x + ' STATE', ColumnName: 'stop' + x + 'State'});
            dropdownSource.push({ ColumnDisplayName: 'STOP ' + x + ' ZIP CODE', ColumnName: 'stop' + x + 'Zip'});
            dropdownSource.push({ ColumnDisplayName: 'STOP ' + x + ' COUNTRY', ColumnName: 'stop' + x + 'Country'});
        }

        let dropdownSettings = {
            source: dropdownSource,
            width: '100%',
            height: '35px',
            displayMember: 'ColumnDisplayName',
            valueMember: 'ColumnName',
            checkboxes: true
        };
        this.viewColumnDropDown.createComponent(dropdownSettings);
    }

    public setDefaultDropDownSelection(event: any): void {
        this.viewColumnDropDown.checkIndex(0);
        this.viewColumnDropDown.checkIndex(1);
        this.viewColumnDropDown.checkIndex(2);
        this.viewColumnDropDown.checkIndex(5);
        this.viewColumnDropDown.checkIndex(6);
        this.viewColumnDropDown.checkIndex(7);
        this.viewColumnDropDown.checkIndex(10);
        this.viewColumnDropDown.checkIndex(11);
        this.viewColumnDropDown.checkIndex(12);
        this.viewColumnDropDown.checkIndex(13);
        this.viewColumnDropDown.checkIndex(14);
    }

    public initializeGrid(): void {
        this.gridSource = {
            datafields:
            [
                { name: 'id', type: 'number '},
                { name: 'active', type: 'bool' },
                { name: 'rateScheduleKey', type: 'string'},
                { name: 'originCity', type: 'string' },
                { name: 'originState', type: 'string' },
                { name: 'originZip', type: 'string' },
                { name: 'originCountry', type: 'string' },
                { name: 'origin3DigitZip', type: 'string' },
                { name: 'destinationCity', type: 'string' },
                { name: 'destinationState', type: 'string' },
                { name: 'destinationZip', type: 'string' },
                { name: 'destinationCountry', type: 'string' },
                { name: 'destination3DigitZip', type: 'string' },
                { name: 'rank', type: 'number' },
                { name: 'rate', type: 'number' },
                { name: 'minimumCharge', type: 'number' },
                { name: 'laneType', type: 'string' },
                { name: 'rateType', type: 'string' },
                { name: 'mode', type: 'string' }
            ],
            datatype: 'json',
            async: true,
            pagesize: this.gridCurrentPageSize,
            url: '/tlrg', // value required to kickoff loadServerData. w/o, grid assumes data is local.
            sort: () => {
                this.gridRef.updatebounddata('sort');
            },
            filter: () => {
                this.gridRef.updatebounddata('filter');
            }
        };
        for (let x = 1; x <= 8; x++) {
            this.gridSource.datafields.push({ name: 'stop' + x + 'City', type: 'string' });            
            this.gridSource.datafields.push({ name: 'stop' + x + 'State', type: 'string' });
            this.gridSource.datafields.push({ name: 'stop' + x + 'Zip', type: 'string' });
            this.gridSource.datafields.push({ name: 'stop' + x + 'Country', type: 'string' });
        }
        let gridDataAdapter = new jqx.dataAdapter(this.gridSource, {
            loadError: (xhr, status, error) => {
                // alert(error);
            },
            loadServerData: (serverdata, source, callback) => {
                let reqInner = new GridSearchRequest(this.gridCurrentPageSize, serverdata['pagenum'], '', '', serverdata['recordstartindex'], serverdata['recordendindex'], serverdata['filterscount'], []);
                let req = new RateDocumentSearchRequest(reqInner);
                if (serverdata['sortdatafield']) {
                    req.SearchRequest.SortDataFieldColumn = serverdata['sortdatafield'];
                    req.SearchRequest.SortDataOrder = serverdata['sortorder'];
                }
                for (let x = 0; x < req.SearchRequest.FilterCount; x++) {
                    req.SearchRequest.Filters.push(new GridSearchFilterRequest(serverdata['filtervalue' + x], serverdata['filtercondition' + x], serverdata['filterdatafield' + x], serverdata['filteroperator' + x]));
                }
                req.SearchRequest.Filters.push(new GridSearchFilterRequest(this.rateSchedule.rateScheduleKey, '', 'rateScheduleKey', 0));
                req.SearchRequest.FilterCount++;
                let searchReq = new RateDocumentRateSearchRequest(req);
                this._rateScheduleService.SearchRateDocumentRates(searchReq).takeUntil(this.ngUnsubscribe).subscribe((x) => {
                    if (x.rates.length === 0) {
                        this.pagerLabel = 'No Records Found';
                    }
                    else {
                        this.pagerLabel = (req.SearchRequest.RecordStartIndex + 1).toString() + '-' + (req.SearchRequest.RecordStartIndex + x.rates.length).toString() + ' OF ' + x.rateCount;
                    }
                    callback({ records: x.rates, totalrecords: x.rateCount });
                }, (error) => {
                    callback({ records: [], totalrecords: 0 });

                });
            }
        });
        let gridConfig = {
            source: gridDataAdapter,
            width: '100%',
            pageable: true,
            autoheight: true,
            sortable: true,
            editable: true,
            filterable: true,
            enabletooltips: true,
            showsortmenuitems: false,
            showfilterrow: true,
            showfiltercolumnbackground: false,
            showsortcolumnbackground: false,
            columnsheight: 45,
            rowsheight: 45,
            filterrowheight: 45,
            pagerheight: 50,
            pagermode: 'simple',
            selectionmode: 'singlecell',
            virtualmode: true,
            rendergridrows: (args) => {
                return args.data;
            },
            columns: [
                { text: 'Enabled', datafield: 'active', align: 'center', width: '5%', cellsalign: 'left', columntype: 'checkbox', filterable: false },
                { text: 'Origin City', datafield: 'originCity', width: '12%', align: 'left', cellsalign: 'left' },
                { text: 'Origin State', datafield: 'originState', align: 'left', width: '8%', cellsalign: 'left' },
                { text: 'Origin Zip Code', datafield: 'originZip', align: 'left', width: '8%', cellsalign: 'left' },
                { text: 'Origin Country', datafield: 'originCountry', align: 'left', width: '8%', cellsalign: 'left', hidden: true },
                { text: 'Origin 3-Digit Zip Code', datafield: 'origin3DigitZip', align: 'left', width: '8%', cellsalign: 'left', hidden: true },
                { text: 'Destination City', datafield: 'destinationCity', align: 'left', width: '12%', cellsalign: 'left' },
                { text: 'Destination State', datafield: 'destinationState', align: 'left', width: '8%', cellsalign: 'left' },
                { text: 'Destination Zip Code', datafield: 'destinationZip', align: 'left', width: '8%', cellsalign: 'left' },
                { text: 'Destination Country', datafield: 'destinationCountry', align: 'left', width: '8%', cellsalign: 'left', hidden: true },
                { text: 'Destination 3-Digit Zip Code', datafield: 'destination3DigitZip', align: 'left', width: '8%', cellsalign: 'left', hidden: true },
                { text: 'Rank', datafield: 'rank', align: 'center', width: '6%', cellsalign: 'center' },
                { text: 'Lane Type', datafield: 'laneType', align: 'center', width: '8%', cellsalign: 'center' },
                { text: 'Rate Type', datafield: 'rateType', align: 'center', width: '8%', cellsalign: 'center' },
                { text: 'Rate', datafield: 'rate',  align: 'center', width: '6%', cellsalign: 'center', cellsformat: 'c2' },
                { text: 'Minimum Charge', datafield: 'minimumCharge',  align: 'center', width: '6%', cellsalign: 'center', cellsformat: 'c2' },
                { text: '', datafield: 'edit', align: 'center', width: '5%',  cellsalign: 'center', cellsrenderer: this.customCellRenderer, filterable: false, editable: false }
            ]
        };
        for (let x = 1; x <= 8; x++) {
            gridConfig.columns.push({ text: 'Stop ' + x + ' City', datafield: 'stop' + x + 'City', width: '12%', align: 'left', cellsalign: 'left', hidden: true });
            gridConfig.columns.push({ text: 'Stop ' + x + ' State', datafield: 'stop' + x + 'State', width: '8%', align: 'left', cellsalign: 'left', hidden: true });
            gridConfig.columns.push({ text: 'Stop ' + x + ' Zip Code', datafield: 'stop' + x + 'Zip', width: '8%', align: 'left', cellsalign: 'left', hidden: true });
            gridConfig.columns.push({ text: 'Stop ' + x + ' Country', datafield: 'stop' + x + 'Country', width: '8%', align: 'left', cellsalign: 'left', hidden: true });
         }
        this.gridRef.createComponent(gridConfig);
    }

    public onRateSelect(event: any): void {
        if (event.args.datafield === 'active') {}
    };

    public onDropDownColumnChange(event: any): void {
        if (event.args && event.args.item) {
            let column = event.args.item;
            this.gridRef.beginupdate();
            if (column.checked) {
                this.gridRef.showcolumn(column.value);
            }
            else {
                this.gridRef.hidecolumn(column.value);
            }
            this.gridRef.endupdate();
            this.gridRef.refresh();
        }
    }

    public updateGridPageSize(newSize: number) {
        if (newSize !== this.gridCurrentPageSize) {
            this.gridCurrentPageSize = Number(newSize);
            this.gridRef.setOptions({ pagesize: this.gridCurrentPageSize});
        }
    }

    public ngOnDestroy(): void {
        this.ngUnsubscribe.next();
        this.ngUnsubscribe.complete();
    }
}

And the html:

<div class="row rate-schedule-rates-container">
    <div class="col-md-12">
        <div class="row">
            <div class="col-md-10">
                <h1>Rates</h1>
                <h3>{{ breadcrumbs }}</h3>
            </div>
            <div class="col-md-2">
                <jqxDropDownList #viewColumnDropDown (onSelect)="onDropDownColumnChange($event)" (onBindingComplete)="setDefaultDropDownSelection($event)" [auto-create]="false">
                </jqxDropDownList>
            </div>
        </div>
    </div>
    <div class="col-md-12" [hidden]="rateSchedule != null">
        <div class="row">
            <div class="col-md-12 no-rate-container">
                <span class="no-rate-selected">Please Select A Rate Schedule</span>
            </div>
        </div>
    </div>
    <div class="col-md-12" [hidden]="rateSchedule == null">
        <div class="rate-grid-container grid-styling">
            <jqxGrid #gridRatesReference [auto-create]="false" (onCellselect)="onRateSelect($event)">
            </jqxGrid>
            <div class="grid-custom-pager" *ngIf="gridInitialized">
                <div class="grid-pagesize">
                    <div>SHOW</div>
                    <select (change)="updateGridPageSize($event.target.value)">
                        <option *ngFor="let size of gridPageSizes" [selected]="gridCurrentPageSize === size">{{ size }}</option>
                    </select>
                </div>
                <div class="grid-pagelabel">
                    {{ pagerLabel }}
                    <div>
                    </div>
                </div>
            </div>
        </div>
    </div>

Any help would be greatly appreciated as we are planning to go live shortly and have purchased a license. Thank you.

[alevineplusconsultingParticipant]

I apologize, I used the same link for the last 2 image examples. The second example shouold be this:

https://imgur.com/a/LDG0H

[alevineplusconsultingParticipant]

I was able to fix this issue by editing the CSS.

[HristoParticipant]

Hello alevineplusconsulting,

Thank you for the example. It is a huge amount of code there.
I tested this demo below (with “setcolumnproperty” method I extend one column to have horizontal scrollbar) and it seems to work fine:
https://www.jqwidgets.com/angular/angular-grid/angular-grid-autosizecolumns.htm
(and with [filterable]=”true” [showfilterrow]=”true”)
Could you provide us simple example that could demonstrate this issue?
Also, I saw where you use the function to initialize the Grid but it is not correct to reuse it because the Grid should be created just once.
If you want to update something you should use the reference to it.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts