External DataTable

UI Components for Angular
Post Reply
vhc
Posts: 2
Joined: 04 May 2017, 23:54

05 May 2017, 00:10

I am looking into using DataTable with Filters. However, there is a requirement to have filtering on certain columns with the filters outside the table. In other words, instead of having a filter on the column header, filters need to be outside the table; even be able to be filters for multiple DataTable. Is this even possible?

I've been trying a few things but nothing. Here's what I am trying - simple button outside my DataTable to filter on name column when clicked:

Code: Select all

    <button class="btn btn-outline-primary" (click)="dt.filter('A','name','startsWith')">Filter on A</button>
and my DataTable looks like this:

Code: Select all

 
 <p-dataTable [value]="organizations" [globalFilter]="orgFilter" selectionMode="single" dataKey="name" #dt>
                        <p-column field="name" header="Name" [filter]="true" filterMatchMode="startsWith">
                            <template let-col let-organization="rowData" pTemplate="body">
                                <img src="/dist/assets/images/{{organization.type.replace(' ', '').toLowerCase()}}.png" class="type-icon" /><strong>{{organization[col.field]}}</strong>
                            </template>
                        </p-column
                 </p-dataTable>

User avatar
sudheer
PrimeFaces Core Developer
Posts: 4295
Joined: 16 Oct 2011, 19:19
Location: Singapore

05 May 2017, 10:57

Have you tried it? Mostly we do filtering on header places and good for view port usage too.For external filter you should be in a situation to provide all required fields for filter function.
Author,Speaker
https://twitter.com/sudheerjonna
Github: https://github.com/sudheerj
Website http://sudheerjonna.com/

___________________
Sudheer Jonna

vhc
Posts: 2
Joined: 04 May 2017, 23:54

08 May 2017, 19:46

I am using Angular 2, if that makes a difference(?); waiting on this to get resolved before I can upgrade to using Angular 4: https://github.com/aspnet/JavaScriptServices/issues/800.

The error that I get is trying to reference the DataTable outside of it. Basically, what I am trying to accomplish is the following:
  • User clicks alphabet filter
  • DataTable records are filter
This is my UI: https://drive.google.com/file/d/0B5t626 ... sp=sharing

The problem is that I cannot reference the DataTable object unless the button(or any filter) is created inside the DataTable within a template. Is there a workaround for this? Is there a way I can call a function where I can save a reference to the DataTable?

Otherwise, all I get is this error: " - inline template:7:8 caused by: Cannot read property 'filter' of undefined"

Thanks! I've been trying all sorts of things for days, but can't seem to get anything.

User avatar
sudheer
PrimeFaces Core Developer
Posts: 4295
Joined: 16 Oct 2011, 19:19
Location: Singapore

09 May 2017, 05:48

Not only datatable reference you should get each column reference as well. That makes the implementation bit harder. May be you can try to get through PRO support on possibility.
Author,Speaker
https://twitter.com/sudheerjonna
Github: https://github.com/sudheerj
Website http://sudheerjonna.com/

___________________
Sudheer Jonna

Primaryw
Posts: 7
Joined: 09 Nov 2017, 17:51

17 Nov 2017, 08:01

Any update on this one? I have a similar issue...

paulswan
Posts: 64
Joined: 27 Apr 2017, 08:19

20 Nov 2017, 00:48

The solution I provided in the following post may do what you need:
viewtopic.php?f=35&t=52591

Post Reply
  • Information
  • Who is online

    Users browsing this forum: No registered users and 3 guests