BoldSignEasily embed eSignatures in your .NET applications. Free sandbox with native SDK available.
<div class="control-section">
<div class="col-lg-9">
<div class="control_wrapper">
<ejs-uploader #defaultupload id='defaultfileupload' [dropArea]='dropElement'(selected)='onFileRemove($event)' (change)="onSuccess($event)"></ejs-uploader>
</div>
<ejs-grid #grid id ='grid'> </ejs-grid>
</div>
</div> |
import * as XLSX from 'xlsx';
export class DefaultUploaderComponent {
@ViewChild('defaultupload')
public uploadObj: UploaderComponent;
@ViewChild('grid')
public gridObj: GridComponent;
public onFileRemove(args): void {
args.cancel = true;
}
parseExcel(file) {
let reader = new FileReader();
reader.onload = (e)=> {
let data = (<any>e.target).result;
let workbook = XLSX.read(data, {
type: 'binary'
});
workbook.SheetNames.forEach((function(sheetName) {
// Here is your object
let XL_row_object = XLSX.utils.sheet_to_json(workbook.Sheets[sheetName]);
let json_object = JSON.stringify(XL_row_object);
// bind the parse excel file data to Grid
this.gridObj.dataSource = JSON.parse(json_object);
}).bind(this), this);
};
reader.onerror = function(ex) {
console.log(ex);
};
reader.readAsBinaryString(file);
};
public onSuccess(args: any): void {
let files = args.target.files; // FileList object
this.parseExcel(files[0]);
}
} |
Hi Seeni Sakthi Kumar Seeni Raj,
when import one excel and data gets displayed in the grid, then immediately if i edit the same excel and import it is not working. I am not seeing any error in console.
parseExcel(file) {
. . .
workbook.SheetNames.forEach((function(sheetName) {
// Here is your object
var XL_row_object = XLSX.utils.sheet_to_json(workbook.Sheets[sheetName]);
var json_object = JSON.stringify(XL_row_object);
console.log(json_object)
this.gridObj.dataSource = JSON.parse(json_object);
this.uploadObj.clearAll();
}).bind(this), this);
};
. . .
};
|
@Component({
selector: 'control-content',
template: `<div id="container" style="height:300px" class="control-section">
<div class="col-lg-9">
<div class="control_wrapper">
<button (click)="importFile($event)">Import</button>
<div id="dialog"></div>
<ejs-uploader #defaultupload id='defaultfileupload' [dropArea]='dropElement' (selected)='onFileRemove($event)' (change)="onSuccess($event)"></ejs-uploader></div>
<ejs-grid #grid id='grid'></ejs-grid>
</div>
</div>`
})
export class DefaultUploaderComponent implements OnInit {
. . .
ngOnInit(): void {
this.dialog = new Dialog({
// Enables the header
header: 'Import',
// Enables the close icon button in header
showCloseIcon: true,
visible: false,
// Dialog content
content: this.uploadObj.element,
// The Dialog shows within the target element
target: document.getElementById("container"),
// Dialog width
width: '250px'
});
this.dialog.appendTo('#dialog');
}
. . .
importFile(e) {
this.dialog.show();
}
} |
public treegrid: TreeGridComponent;
ngOnInit(): void {
this.data = sampleData;
this.editSettings ={ allowEditing: true, allowAdding: true, allowDeleting: true, mode:"Cell", newRowPosition:"Child"};
this.toolbar = ['Add', 'Delete', 'Update', 'Cancel'];
this.taskidrules = { required: true , number: true};
. . .
this.d1data= [{ id: 'CellEditing', name: 'Cell Editing' }, {id: 'RowEditing', name: 'Row Editing'} ]
} |
|