Save and Load Data of Filter

[BhavinParticipant]

I want to store filter data to database and when a particular user logged in I want to load that filtered data in jqxgrid with filter options selected in Angular 5.

import { jqxGridComponent } from 'jqwidgets-scripts/jqwidgets-ts/angular_jqxgrid';
@ViewChild('eventlogGrid') myGrid: jqxGridComponent;

source: any =
{
    datatype: 'json',
    datafields: [
        { name: 'eventLogId', type: 'string'  },
        { name: 'eventType', type: 'string'  },
        { name: 'areaName', type: 'string'  },
        { name: 'locationName', type: 'string'  },
        { name: 'eventPriority', type: 'string'  },
        { name: 'locationCd', type: 'string'  },
        { name: 'description', type: 'string'  },
        { name: 'callerContactName', type: 'string'  },
        { name: 'calleeContactName', type: 'string'  },
        { name: 'gasControlContactName', type: 'string'  },
        { name: 'eventDateTimeStr', type: 'string'  },
        { name: 'eventGasDateTimeStr', type: 'string'  },
        
    ],
    id: 'eventLogId',
    url: webserviceurl+'/events'
};

dataAdapter: any = new jqx.dataAdapter(this.source);

cellsrenderer = (row: number, columnfield: string, value: string | number, defaulthtml: string, columnproperties: any, rowdata: any): string => {
    if (value < 20) {
        return <code><span style='margin: 4px; float:${columnproperties.cellsalign}; color: #ff0000;'>${value}</span></code>;
    }
    else {
        return <code><span style='margin: 4px; float:${columnproperties.cellsalign}; color: #008000;'>${value}</span></code>;
    }
};

 
 getColumnData(index) {
        var str_array = index.split(',');
        let percent_of_width = 100/str_array.length;
        var number_table_width = percent_of_width+'%';
        let table_width = number_table_width.toString();
        var column_data:any = [
          { text: 'Event Log Id',  datafield: 'eventLogId', width: table_width,hidden:true},
          { text: 'Event Type',  datafield: 'eventType', width: table_width,hidden:true},
          { text: 'Area Name',  datafield: 'areaName', width: table_width,hidden:true},
          { text: 'Location Name',  datafield: 'locationName', width: table_width,hidden:true},
          { text: 'Priority',  datafield: 'eventPriority', width: table_width,hidden:true},
          { text: 'Location',  datafield: 'locationCd', width: table_width,hidden:true},
          { text: 'Description',  datafield: 'description', width: table_width,hidden:true},
          { text: 'Caller',  datafield: 'callerContactName', width: table_width,hidden:true},
          { text: 'Callee',  datafield: 'calleeContactName', width: table_width,hidden:true},
          { text: 'Controller',  datafield: 'gasControlContactName', width:table_width,hidden:true},
          { text: 'Event Date Time',  datafield: 'eventDateTimeStr', width: table_width,hidden:true},
          { text: 'Recorded Date Time',  datafield: 'eventGasDateTimeStr', width: table_width,hidden:true},
        
        ];
        // columns hide show logic for events starts here
        for(var i=1;i<=12;i++) {
          if(str_array.includes(i.toString())) {
             column_data[i-1].hidden = false;
          }
        }
        // columns hide show logic for events ends here
       return column_data;
  }

columns: any[] = this.column_data;

I have search for Jquery jqwidgets there is a function loadstateand savestate but I’m not able to find any example or code for Angular-5.

Can you please suggest me how I can store and fetch filter data.

[MartinParticipant]

Hello Bhavin,

You can use loadstate and savestate also in Angular5.
Here is some code examples for them from our Angular Grid API page:

savestate:

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: '

        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    '
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myGrid') myGrid: jqxGridComponent; 
 
    ngAfterViewInit(): void 
    {
        let value = this.myGrid.savestate();
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

loadstate:

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: '

        <jqxGrid #myGrid 
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxGrid>
    '
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myGrid') myGrid: jqxGridComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myGrid.loadstate();
    }

    source: any =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
            ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
            ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'ContactName', type: 'string', map: '1' },
            { name: 'Title', type: 'string', map: '2' },
            { name: 'Address', type: 'string', map: '3' },
            { name: 'City', type: 'string', map: '4' },
            { name: 'Country', type: 'string', map: '5' }
        ],
        datatype: 'array'
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
 
    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

Best Regards,
Martin

jQWidgets Team
http://www.jqwidgets.com/

[Author]

Posts