Ng2-smart-table : Use drop-downs or date pickers in inline editing

Question

I was searching for a better table representation for Angular2 and found ng2-smart-table is good to use. But the problem is it doesn't seems to provide a direct way to use drop downs or date pickers in in-line editing.

Is there any way to make it possible or what alternative components I can have to represent a table view in my Angular2 app.

Answer 1

I found something like this for drop-downs:

private settings = {
  columns: {
    name: {
      title: 'Name'
    },
    valid: {
      title: 'Valid',
      type: 'html',
      editor: {
        type: 'list',
        config: {
          list: [
            {value: true, title: 'Valid'},
            {value: false, title: 'Not valid'}
          ],
        },
      }
    }, //... more columns
  }
}

Answer 2

public settings = {
    actions: {
      position: 'right',
      //custom: [{ name: 'routeToAPage', title: `<img src="/icon.png">` }]
    },
    columns: {
      ctg_name: {
        title: 'Category',
      },
      ctg_visible: {
        title: 'Visible',
        editor: {
          type: 'list',
          config: {
            selectText: 'Select',
            list: [
              {value: '1', title:'True'},
              {value: '0', title:'False'}
            ],
          },
        }
      }
    },
  };

Answer 3

For datepicker:

In settings[.ts]

settings={
columns:{
// other columns here

dob: {//date of birth
        title: 'yyyy/mm/dd hh:mm',
        type: 'html',
        editor: {
          type: 'custom',
          component: DoBComponent,
        },
   }
}

In dob.component.html

<owl-date-time autoClose [(ngModel)]="datevalue" dataType="string" 
 (click)="updateValue()">
</owl-date-time>

In dob.component.ts

datevalue: any;
  updateValue(){
    console.log(this.datevalue);
    this.cell.newValue = this.datevalue;
  }
where your DoBComponent extends DefaultEditor

In your module.ts

     declarations:[
//other compnents here
        DoBComponent
     ]
     entryComponents: [
      DoBComponent
    ]

hope this helps !!!

Ref: https://www.npmjs.com/package/ng-pick-datetime, https://akveo.github.io/ng2-smart-table/#/examples/custom-editors-viewers

Answer 4

I had three issues, when I used the soultion of @ampati-hareesh.

1. "No value accessor for form control with unspecified name attribute". Adding ngDefaultControl to owl-date-time solves it.

2. "Cannot read property 'isInSingleMode' of undefined". Adding "input" tag solved it.

3. Value is not assigned. Changing the event from "clicked" to "afterPickerClosed" solved it.

My final dob.component.html looked like;

    <input placeholder=""
                        [(ngModel)]="dateValue"
                        [owlDateTimeTrigger]="dt1" [owlDateTime]="dt1">
    <owl-date-time [pickerType]="'calendar'" autoClose [(ngModel)]="dateValue" 
         ngDefaultControl dataType="string" 
         (afterPickerClosed)="updateValue()" #dt1>
    </owl-date-time>