Table buttons and check box columns not working

[stephenad]

Hi

I am new to Angular 2 and have got your demo table working but have a few points I want to clarify:
I have taken over a project from a previous developer and so am having to learn angular 2 but have some issues still lingering which I would like to solve:

1. When i run ngserve for the project I get:
   A number of same error as shown below for "has no exported member 'Renderer2'."
   [default] C:\wamp\www\nationalgrid\public_cli\node_modules@ng-bootstrap\ng-bootstrap\buttons\radio.d.ts:1:10
   Module '"C:/wamp/www/nationalgrid/public_cli/node_modules/@angular/core/index"' has no exported member 'Renderer2'.

I do not want to use render 2 as that is angular 4 and this clients system has to be on angular 2 for the time being. What have I imported or done to be getting this error?

Package.json
{
"name": "a2-cli-app",
"version": "0.0.0",
"license": "MIT",
"angular-cli": {},
"scripts": {
"start": "ng serve",
"lint": "tslint "src/**/*.ts"",
"test": "ng test",
"pree2e": "webdriver-manager update",
"e2e": "protractor"
},
"private": true,
"dependencies": {
"@angular/common": "^2.2.1",
"@angular/compiler": "^2.2.1",
"@angular/core": "^2.2.1",
"@angular/forms": "^2.2.1",
"@angular/http": "^2.2.1",
"@angular/platform-browser": "^2.2.1",
"@angular/platform-browser-dynamic": "^2.2.1",
"@angular/router": "^3.2.1",
"angular2-cookie": "^1.2.5",
"bootstrap": "^3.3.7",
"chart.js": "^2.4.0",
"core-js": "^2.4.1",
"ng2-bs3-modal": "^0.10.4",
"ng2-charts": "1.4.1",
"ng2-file-upload": "1.1.4-2",
"ng2-pagination": "1.0.1",
"ng2-toastr": "1.3.2",
"rxjs": "5.0.0-beta.12",
"ts-helpers": "^1.1.1",
"zone.js": "^0.6.23"
},
"devDependencies": {
"@angular/compiler-cli": "^2.2.1",
"@types/jasmine": "2.5.38",
"@types/node": "^6.0.42",
"angular-cli": "1.0.0-beta.21",
"codelyzer": "~1.0.0-beta.3",
"jasmine-core": "2.5.2",
"jasmine-spec-reporter": "2.5.0",
"karma": "1.2.0",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.0.2",
"karma-remap-istanbul": "^0.2.1",
"protractor": "4.0.9",
"ts-node": "1.2.1",
"tslint": "3.13.0",
"typescript": "~2.0.3",
"webdriver-manager": "10.2.5",
"webpack": "^3.4.1"
}
}

If you need more details to help on this just let me know what you need.

2. In relation to your filtering on your simple data table how can I set the filtering to be case in-sensative?

3. I can see you get your data from the table-data.ts as Array I have my data coming into this project from a mysql database base as an Array, but how do I assign it to the data variable.

As you have private data:Array = TableData;, but if I try and change the "TableData" to anything else the code just give me errors and does not load, even once I have update the columns Array definition to match my incoming data.

4. Finally to make my file clearer, is it possible to move the columns array into a new file and reference it as my columns array is much larger than yours?

columns:Array = [
{title: 'Name', name: 'name'},
{title: 'Position', name: 'position', sort: ''},
{title: 'Office', className: ['office-header', 'text-success'], name: 'office', sort: 'asc'},
{title: 'Extn.', name: 'ext', sort: ''},
{title: 'Start date', className: 'text-warning', name: 'startDate'},
{title: 'Salary ($)', name: 'salary'},
];

Thanks in advance hope I have not asked over dumb questions

[themese]

Hi, I'm currently at the airport, I may be able to give you a more detailed answer tomorrow or so.

For the time being, in regards to 2).
You can have a regular expression to check those things, I did that with ease, it's a trivial thing, there's even websites that check those things for you and give you the correct regexp for that.

In regards to 4), I have never tried that, but you can have an external class that exports a constant. This constant variable can be an array of strings that would be your columns.
The export/import itself is also trivial, but I'm unaware if there are any issues with ng-table (I can't see why).
Hope I could help you a bit.

Mese

[stephenad]

Hi Themese,

Thanks for the reply, as I say I am new to angular so still trying to get my head around how it all works and integrates.

I fully understand creating and using Regular Expressions but in the code how would I apply this to the filter? Would it not be simpler to have a pipe converting the passed in data and the table data to a single case?

I am going to try the export const and see how I go, my array however does not only contain strings.

Thanks
Again

[stephenad]

Hi Folks

Solved Point 4:

I created a file called MyColumns.ts as shown below:

export const MyColumns:Array =
[
{title: 'Name', name: 'name'},
{title: 'Position', name: 'position', sort: ''},
{title: 'Office', className: ['office-header', 'text-success'], name: 'office', sort: 'asc'},
{title: 'Extn.', name: 'ext', sort: ''},
{title: 'Start date', className: 'text-warning', name: 'startDate'},
{title: 'Salary ($)', name: 'salary'},
];

Then in my
TableDemo.component.ts file where I originally had
the all list I now have at the top:
import { MyColumns } from './mycolumns';

and then where I had the columns definitions before I have:
columns = MyColumnsDef;

Hope this helps others.

[stephenad]

Point 2 -filtering you convert both string to lowercase as stated in #152 ?

Point 3 - The problem was that was I was trying to assign the value or function to their variable was wrong and also it needed a boolean function to stop it calling the data variable before I had done the assignment.

// private data:Array<any> = TableData; - replaced with lines below
private data: Array<any>;
private initialConfiguration: boolean;

In
constructor
(.. . ){
//Added
this.initialConfiguration = false;

Moved
this.length = this.data.length; //moved into getUserList() funnction if statement below

public ngOnInit(): void {
Moved
this.onChangeTable(this.config); //moved into getUserList() funnction if statement below

Then in my getUserList() funnction

getUserList() {
this.isloading = true;
this.userAuthService.getUserList()
.subscribe(mydata => {
//Changed this… to be this.data as it is declared above
this.data = mydata;
//added if statement to check if we have data assigned to this.data before calling any other functions
if (!this.initialConfiguration) {
this.length = this.data.length;
this.onChangeTable(this.config);
this.initialConfiguration = true;
}
}, //Bind to view
error => {
// Log errors if any
console.log("Thorwing error");
this.aMS.messageLog("Errors", "Error", "Error - retrieving users", "Error loading user list.");
this.isloading = false;
console.log(error);
},
() => {
this.isloading = false;
});
}

Points 2-4 are now solved

[themese]

I solved myself point 2 with a similar solution to the issue you noted.

In regards to 1) I honestly can´t help you much with it, I'm not an experte and I can´t see what is wrong with your json. Sorry for that.

Mese

[stephenad]

Hi Themese,

Thank you for your reply and help, Angular is now starting to make more sense.

I can see that angularJS has export functionality, but the next thing I am looking at is giving the users the ability to export the table as csv or excel as well as a pdf documents, do we have an example on h ow this can be done with NG2-table, as part of this I would also need to be able to allow the users to select the columns to view prior to just exporting the on screen view.

Thanks
Andy

[stephenad]

I have made some progress in the html file I have a button that is a drop down and I want to populate it using and *ngfor loop so people can select the columns using a check box to show which columns are visible on the table. My code is populating the drop down list but I cannot work out how to get the check box to be visible in my drop down list.

 <div class="keep-open btn-group" title="Columns">
               <button type="button" aria-label="columns" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><i class="glyphicon glyphicon-th icon-th"></i> <span class="caret"></span></button>
                   <ul class="dropdown-menu" role="menu">    
                       <option *ngFor="let column of columns" [value]="column.title">{{column.title}} </option>
                   </ul>
           </div>

Secondly I have followed https://github.com/jdelgadoalfonso/ng2-table/tree/master/demo/components/buttons to add buttons to my table and the table compiles and I get no console or compile errors but the buttons do not appear on my table, apart from his 3 files and the import statements do I need anything else?

Thanks

[themese]

Can´t help you with the csv export functionality, but probably you can find another plugin that will help you.

In regards to the button, are you sure you are not missing any css or something like that? I can´t see why it won't work.

[stephenad]

Thanks Themese, all help is greatly appreciated.

My columndefs file:
`
import {TableButtons} from './tablebuttons';

export const MyColumnsDef:Array =
[
{title: 'ID', name: 'id'},
{title: 'Full Name', name: 'full_name'},
{title: 'User Name', name: 'username'},
{title: 'Email', name: 'email'},
{title: 'Company', name: 'company'},
...
{title: '', name: 'id', component: TableButtons, init: this._func, sort: false, filter: false }
];
tablebuttons.html file:

`

tablebuttons.css file:
`div.wrapper {
width: 100%;
overflow:hidden;
white-space: nowrap;
}

div.ok_button {
display: inline-block;
content: url(assets/imgs/ic_done_black_24px.svg);
width: 24px;
height: 24px;
cursor: pointer;
}

div.edit_button {
display: inline-block;
content: url(assets/imgs/ic_create_24px.svg);
width: 24px;
height: 24px;
cursor: pointer;
}

div.cancel_button {
display: inline-block;
content: url(assets/imgs/ic_clear_24px.svg);
width: 24px;
height: 24px;
cursor: pointer;

}`

TableButtons .ts file:
`import {Component, Output, EventEmitter} from '@angular/core';

@component({
selector: 'c-buttons',
styles: [ require('./tablebuttons.css') ],
template: require('./tablebuttons.html')
})
export class TableButtons {
@output() edit : EventEmitter = new EventEmitter();
@output() ok : EventEmitter = new EventEmitter();
@output() cancel: EventEmitter = new EventEmitter();

private _editMode: boolean = false;
}`

Unless I have missed something this is what is in the table button files the guy has in his table.

Unless you can see something I have missed.

Thanks
Andy

[stephenad]

Is anyone else able to advise why the buttons may not be present

[stephenad]

Created a custom ng2-table component and then worked from their