Global search filter in Angular 5

[BhavinParticipant]

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.

[BhavinParticipant]

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>

[MartinParticipant]

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/

[BhavinParticipant]

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();

[MartinParticipant]

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/

[BhavinParticipant]

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.

[MartinParticipant]

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/

[BhavinParticipant]

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

[MartinParticipant]

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/

[Author]

Posts