[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

[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.

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

[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>

[BhavinParticipant]

Thank you Martin.
It worked.

[BhavinParticipant]

Great. It’s perfectly working. Thank you for this Perfect To the point answer.

Cheers,
Bhavin

[BhavinParticipant]

It was my bad it’s working.

Tried with

 <jqxGrid #myGrid 
              [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">
          </jqxGrid>

[width]=”‘100%'” works fine.

[BhavinParticipant]

Hey Jqwidgets Team.

Thank you for your fast reply.
Problem is solved when I install angular-5 app using create-jqwidgets-angular-app and then I have used the installed app’s components then it works.

But may be the issues is that when I install your package from npm server.
It make a folder which is created under node_modules it’s named as “jqwidgets-framework” but from create-jqwidgets-angular-app the folder which is created under node_modules is jqwidgets-scripts.

So, I have literally copy – paste from create-jqwidgets-angular-app and it worked.

So, May be I’m wrong but why both folder name is different from npm install and create-jqwidgets-angular-app.

[BhavinParticipant]

Thank you for your answer.

As per your suggestion,

I have imported,

import { jqxGridComponent } from 'jqwidgets-framework/jqwidgets-ts/angular_jqxgrid';
import { jqxPanelComponent } from 'jqwidgets-framework/jqwidgets-ts/angular_jqxpanel';

I have installed “jqwidgets-framework”.
So, I have to change the import path but it’s working it doesn’t show error in sublime.

And in dashboard.component.ts file I have put this code,

// Jqwidgets code starts here

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’],
[‘Around the Horn’, ‘Thomas Hardy’, ‘Sales Representative’, ‘120 Hanover Sq.’, ‘London’, ‘UK’],
[‘Berglunds snabbkp’, ‘Christina Berglund’, ‘Order Administrator’, ‘Berguvsvgen 8’, ‘Lule’, ‘Sweden’],
[‘Blauer See Delikatessen’, ‘Hanna Moos’, ‘Sales Representative’, ‘Forsterstr. 57’, ‘Mannheim’, ‘Germany’],
[‘Blondesddsl pre et fils’, ‘Frdrique Citeaux’, ‘Marketing Manager’, ’24, place Klber’, ‘Strasbourg’, ‘France’],
[‘Blido Comidas preparadas’, ‘Martn Sommer’, ‘Owner’, ‘C\/ Araquil, 67’, ‘Madrid’, ‘Spain’],
[‘Bon app’, ‘Laurence Lebihan’, ‘Owner’, ’12, rue des Bouchers’, ‘Marseille’, ‘France’],
[‘Bottom-Dollar Markets’, ‘Elizabeth Lincoln’, ‘Accounting Manager’, ’23 Tsawassen Blvd.’, ‘Tsawassen’, ‘Canada’],
[‘B`s Beverages’, ‘Victoria Ashworth’, ‘Sales Representative’, ‘Fauntleroy Circus’, ‘London’, ‘UK’],
[‘Cactus Comidas para llelet’, ‘Patricio Simpson’, ‘Sales Agent’, ‘Cerrito 333’, ‘Buenos Aires’, ‘Argentina’],
[‘Centro comercial Moctezuma’, ‘Francisco Chang’, ‘Marketing Manager’, ‘Sierras de Granada 9993’, ‘Mxico D.F.’, ‘Mexico’],
[‘Chop-suey Chinese’, ‘Yang Wang’, ‘Owner’, ‘Hauptstr. 29’, ‘Bern’, ‘Switzerland’],
[‘Comrcio Mineiro’, ‘Pedro Afonso’, ‘Sales Associate’, ‘Av. dos Lusadas, 23’, ‘Sao Paulo’, ‘Brazil’],
[‘Consolidated Holdings’, ‘Elizabeth Brown’, ‘Sales Representative’, ‘Berkeley Gardens 12 Brewery’, ‘London’, ‘UK’],
[‘Drachenblut Delikatessen’, ‘Sven Ottlieb’, ‘Order Administrator’, ‘Walserweg 21’, ‘Aachen’, ‘Germany’],
[‘Du monde entier’, ‘Janine Labrune’, ‘Owner’, ’67, rue des Cinquante Otages’, ‘Nantes’, ‘France’],
[‘Eastern Connection’, ‘Ann Devon’, ‘Sales Agent’, ’35 King George’, ‘London’, ‘UK’],
[‘Ernst Handel’, ‘Roland Mendel’, ‘Sales Manager’, ‘Kirchgasse 6’, ‘Graz’, ‘Austria’]
],
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’ }
];

// Jqwidgets code ends here

And in My html (dashboard.component.html) file, I have put following code,

<jqxGrid #myGrid
                [width]="850" [source]="dataAdapter" [columns]="columns"
                [columnsresize]="true" [editable]="true" [selectionmode]="'multiplecellsadvanced'">
            </jqxGrid>

But it still showing me error that,

ERROR ReferenceError: jqx is not defined
at new DashboardComponent (dashboard.component.ts:55)

Am I missing something the import error has gone. I have import script or css files in index.html ?

[Author]

Posts