jQuery UI Widgets Forums Angular Save and Load Data of Filter

This topic contains 1 reply, has 2 voices, and was last updated by  Martin 6 years, 1 month ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • Save and Load Data of Filter #100230

    Bhavin
    Participant

    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.

    • This topic was modified 6 years, 1 month ago by  Bhavin.
    • This topic was modified 6 years, 1 month ago by  Bhavin.
    • This topic was modified 6 years, 1 month ago by  Bhavin.
    Save and Load Data of Filter #100273

    Martin
    Participant

    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/

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

You must be logged in to reply to this topic.