jQuery UI Widgets Forums Angular Global search filter in Angular 5

This topic contains 8 replies, has 2 voices, and was last updated by  Martin 6 years ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
  • Global search filter in Angular 5 #100340

    Bhavin
    Participant

    I want to create global search filter of jqwidgets with search every columns of grid.
    So, for search which function I have to call for creating cutsomized filter which search every columns. I have search a lot but not able to find the global search for Angular 5.

    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: "http://localhost:4200/assets/event_log_json.json"
        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', filtertype: 'checkedlist', 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', filtertype: 'checkedlist', 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;

    In HTML :-

    <div class="card-body">
              <div>
                  <div class="col-md-4" style="float: left;padding: 0px;">
                      <input type="text" placeholder="Global Search" class="form-control pull-left global_search" id="usr">
                  </div>                        
              </div>
              <jqxGrid #eventlogGrid 
                  [width]="'100%'" [source]="dataAdapter" [columns]="columns"
                  [sortable]="true" [filterable]="true" [pageable]="true" 
                  [enabletooltips]="true" [columnsautoresize]="true" [columnsresize]="true" [columnsreorder]="true" [autoshowfiltericon]="true"
                  [autoshowfiltericon]="true" [columnmenuopening]="columnmenuopening" (onRowclick)="Rowclick($event)">
              </jqxGrid>
              <br>
    </div>

    Please let me know if you have any confusion with my question.

    • This topic was modified 6 years ago by  Bhavin.
    Global search filter in Angular 5 #100342

    Bhavin
    Participant

    I have tried with adding following function but it’s not working.

    public globalsearchevent(event): void{
    
        console.log('change');
        let search_value = '37'; // 37 value is exists in there in eventLogId column.
        console.log(search_value);
    
        this.myGrid.addfilter('eventLogId',search_value);
        this.myGrid.applyfilters();
        // this.myGrid.updatebounddata();
    
    }

    My Updated HTML :-

    <div class="card-body">
              <div>
                  <div class="col-md-4" style="float: left;padding: 0px;">
                      <input type="text" placeholder="Global Search" class="form-control pull-left global_search" id="usr">
                  </div>                        
              </div>
              <jqxGrid #eventlogGrid 
                  [width]="'100%'" [source]="dataAdapter" [columns]="columns"
                  [sortable]="true" [filterable]="true" [pageable]="true" 
                  [enabletooltips]="true" [columnsautoresize]="true" [columnsresize]="true" [columnsreorder]="true" [autoshowfiltericon]="true"
                  [autoshowfiltericon]="true" [columnmenuopening]="columnmenuopening" (onRowclick)="Rowclick($event)">
              </jqxGrid>
              <br>
    </div>
    Global search filter in Angular 5 #100347

    Martin
    Participant

    Hello Bhavin,

    Here is how to apply a filter which checks if eventLogId column contains 37.

    public globalsearchevent(event): void{
    let search_value = ’37’;
    console.log(search_value);
    
    let filtergroup = new jqx.filter();
    let filter_or_operator = 1;
    let filtervalue = search_value;
    let filtercondition = ‘contains’;
    let filter1 = filtergroup.createfilter(‘stringfilter’, filtervalue, filtercondition);
    filtergroup.addfilter(filter_or_operator, filter1);
    this.myGrid.addfilter(‘eventLogId’, filtergroup, true);
    this.myGrid.applyfilters();
    }

    You can also take a look at this filtering Demo

    Best Regards,
    Martin

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

    • This reply was modified 6 years ago by  Martin.
    • This reply was modified 6 years ago by  Martin.
    Global search filter in Angular 5 #100354

    Bhavin
    Participant

    Hey Martin,

    Thank you for this reply.
    It works for one column but How to I can this filter on each columns.

    It works with single column eventLogId But if I want to search both columns eventLogId and locationName then I have tried below code but it’s not working. Please let me know where I’m wrong for adding second columns.

        let filtergroup = new jqx.filter();
        let filter_or_operator = 1;
        let filtervalue = search_value;
        let filtercondition = 'contains';
        let filter1 = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
        filtergroup.addfilter(filter_or_operator, filter1);
        this.myGrid.addfilter('eventLogId', filtergroup, true);
        this.myGrid.addfilter('locationName', filtergroup, true);
        this.myGrid.applyfilters();
    • This reply was modified 6 years ago by  Bhavin.
    Global search filter in Angular 5 #100370

    Martin
    Participant

    Hi Bhavin,

    I created a Demo, adding the filter to the first three columns.
    If this doesn’t help you fix it, what is the result you are getting and are you sure the filtervalue exists in both your columns?

    Best Regards,
    Martin

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

    Global search filter in Angular 5 #100372

    Bhavin
    Participant

    Hi Martin,

    Thank you for your reply.
    Sorry if I didn’t explained it perfectly.
    But Actually I need a global filter means if value exists in any of the columns then It must show. (OR Condition)

    Example :-

    If I have four columns,

    Column Names   :- eventLogId ,eventType ,areaName ,locationName.
    Row-1's Values :- '37','Disaster','Spartan North','Black Oak'
    Row-2's Values :- '4','Disaster1','Spartan North1','Black Oak1'
    Row-3's Values :- '6','Disaster2','Spartan North2','Black Oak2'

    In global search,

    If I write 37 then It must show Row-1 because 37 is exist in any of the column. if 37 is exist in eventType then also it must return Row-1.

    Please find the below screen shot.Global Search Understanding Image

    • This reply was modified 6 years ago by  Bhavin.
    Global search filter in Angular 5 #100383

    Martin
    Participant

    Hello Bhavin,

    Now I understood what you mean.
    We have this functionality but it is only on the DataTable.
    However, looking at your screenshot, I think you can use it instead of the grid.
    Here is a Demo on how it is used. You should just set the ‘filtermode’ property to ‘simple’.
    I hope that this would help!

    Best Regards,
    Martin

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

    Global search filter in Angular 5 #100390

    Bhavin
    Participant

    Thank you Martin for your reply.

    Ohk So,Is it not supported in JqxGrid?

    Because I have almost completed the project and implemented jqxgrid and it’s rowclick etc. function in approx. 40+ screens.
    So, I have to stick with the JqxGrid. I Can’t change it to Datatable.

    So, Please let me know that if any customization available for it.

    Regards,
    Bhavin

    Global search filter in Angular 5 #100396

    Martin
    Participant

    Hello Bhavin,

    Yes, unfortunately, it is not supported in the JqxGrid..
    You can write some kind of a custom filter by taking the records, checking the rows for the value and then create and pass a new data adapter on each search.
    But this would be quite more complex than changing your grids to dataTables, as most of their functionality is the same.

    Best Regards,
    Martin

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

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

You must be logged in to reply to this topic.