CODEWITHSUNDEEP
angularng2-smart-table
PrazSam
PrazSam

Reputation: 1156

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

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.

Upvotes: 4

Views: 8321

Answers (4)

Abdullah
Abdullah

Reputation: 2943

enter image description here

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'}
            ],
          },
        }
      }
    },
  };

Upvotes: 0

Alexander Jeyaraj
Alexander Jeyaraj

Reputation: 833

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>

Upvotes: 0

Ampati Hareesh
Ampati Hareesh

Reputation: 1872

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

Upvotes: 6

user8054901
user8054901

Reputation: 66

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

Upvotes: 5

Related Questions