ejs grid column dropdownlist values not showing

[Supriya Bhaskar Ghige]

import { Component, OnInit, ViewChild } from '@angular/core'; import { Router } from '@angular/router'; import { LocalDataSource } from 'ng2-smart-table'; import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal'; import { ToastrService } from 'ngx-toastr'; import { GlobalModalComponent } from '../../global-modal/global-modal.component'; import { RuleSet, RulesetService } from '../../service/data/ruleset.service'; import * as tableData from '../ruleset/ruleset-data-table'; import { CheckPermissionService } from '../../service/data/check-permission.service'; import { COMPANY_NAME } from '../../service/data/userinfo.service'; import { DocumentService } from '../../service/data/document.service'; import { EncryptioDecryptionService } from '../../service/encryption-decryption.service'; import { HardcodedAuthenticationService } from '../../service/hardcoded-authentication.service'; import { JobserviceService, Job } from "../../service/data/jobservice.service"; import { CompanydataService, COMPANY_ID } from '../../service/data/companydata.service'; import { LicencingQuota } from '../addcompany/addcompany.component'; import { Company } from '../companylist/companylist.component'; import { NgbModal } from '@ng-bootstrap/ng-bootstrap'; import { ActivatedRoute } from '@angular/router'; import { AttributeKeywordsService } from '../../service/data/attribute-keywords.service'; import { EditSettingsModel, GridComponent, RowDeselectEventArgs, RowSelectEventArgs, SaveEventArgs, ToolbarItems, IEditCell, ColumnModel, TextWrapSettingsModel } from '@syncfusion/ej2-angular-grids'; import { CustomizeList, ClauseCustomizeList, clauseBindingList } from '../../service/data/customizelist.service'; import { DialogUtility } from '@syncfusion/ej2-angular-popups'; import { ClickEventArgs } from '@syncfusion/ej2-angular-navigations'; //dropdown import { Query } from '@syncfusion/ej2-data'; import { DropDownList } from '@syncfusion/ej2-dropdowns'; import { DropDownListComponent } from '@syncfusion/ej2-angular-dropdowns'; import { MouseEventArgs } from '@syncfusion/ej2-base'; import { stringify } from '@angular/core/src/util'; class Transaction { name: string; value: string; defaultValue:string; }; @Component({ selector: 'app-new-gen3-ruleset', templateUrl: './new-gen3-ruleset.component.html', styleUrls: ['./new-gen3-ruleset.component.css'] }) export class NewGen3RulesetComponent implements OnInit { // [x: string]: { [key: string]: Object; }[] | DataManager | string[] | number[] | boolean[]; rulesets: RuleSet[]; message: string messageDanger: string source: LocalDataSource; source2: LocalDataSource; regex = "^$|^[A-Za-z0-9_ ]+"; sessionCompanyName = sessionStorage.getItem(COMPANY_NAME); searchText: string; filename: any; fileContent: any; existOrNot: string = ""; encryptionKey = sessionStorage.getItem("encryptionKey"); jobs: Job[]; jobId: any; jobList: any[]; company_id = sessionStorage.getItem(COMPANY_ID); licence: LicencingQuota[] = []; company: Company; functionExecution: boolean = true; showModalImportButton : boolean = false; showImportButton : boolean = false; public gen: string; //dropdown @ViewChild('grid') public grid: GridComponent; public isDropdown = false; // new gen3 public dpParams : IEditCell; public elem : HTMLElement; public dropObj : DropDownList; @ViewChild("grid") gridObj: GridComponent; clauseBindingList = []; clauseBindingData = []; ruleSetName: Object; public editSettings: EditSettingsModel; public toolbar: ToolbarItems[] | object // public toolbar1: ToolbarItems[]; // new gen3 public initialRender; public wrapSettings1: TextWrapSettingsModel; public pageSettings: Object; public pageSettings1: Object; public isAdd2 = false; public isAdd = false; public isAdd1 = false; dialogObj: any; selectedRuleset: any; loggedInUser: []; constructor(private router: Router, private ruleSetService: RulesetService, private toastr: ToastrService, private bsModalRef: BsModalRef, private bsModalService: BsModalService, private checkPermissionService: CheckPermissionService, private documentService: DocumentService, private encDecService: EncryptioDecryptionService, private service: HardcodedAuthenticationService, private companyService: CompanydataService, private jobService: JobserviceService, private modalService: NgbModal, private route: ActivatedRoute, private attributekeywordsservice: AttributeKeywordsService ) { } settings = tableData.settings; ngOnInit() { this.pageSettings = { pageSizes: true, pageSize: 12 }; this.gen = this.route.snapshot.params['gen']; console.log("this.gen: " + this.gen); this.checkPermissionService.getUserRolePermissions(); this.loadJobs(); sessionStorage.setItem('RuleSetGen', this.gen); if (this.checkPermissionService.ruleCreateButton == true) { this.refreshRuleSetType() this.dpParams = { create: () => { // this.elem=tableData.job this.elem = document.createElement("input"); return this.elem; }, read: () => { return this.dropObj.value; }, destroy: () => { this.dropObj.destroy(); }, write: () => { this.dropObj = new DropDownList({ dataSource: this.settings.columns.jobTitle.editor.config.list, // fields: { value: "countryName", text: "countryId" }, fields: { value: "jobTitle", text: "jobId"}, change: () => { let tempQuery: Query = new Query().where('jobId', 'jobTitle', this.dropObj.value); }, placeholder: 'Select a Job', floatLabelType: 'Never', //value: args.rowData[args.column.field], //value: this.isAdd ? "Execute" : args.rowData[args.column.field] /// value: this.isAdd ? 'list[]' : args.rowData[args.column.field] }); this.dropObj.appendTo(this.elem); this.isAdd = false; } }; } else { let initialState = { title: 'Information', btn2: 'No', body: 'You do not have a permission to access rule sets.', enableBtn2: true, }; this.bsModalRef = this.bsModalService.show(GlobalModalComponent, Object.assign({ backdrop: true, ignoreBackdropClick: true, keyboard: false }, { initialState })); this.service.logout('Unauthorised Access'); } this.companyService.getCompanyById(this.company_id).subscribe( response => { this.company = response; if (this.company.isCompanyOutside == 'Y') { this.companyService.getAllLicencingQuotaListById(this.company_id).subscribe( response => { this.licence = response; }) } } ) this.editSettings = { showDeleteConfirmDialog: false, allowEditing: true, allowAdding: true, allowDeleting: true }; this.toolbar = ['Add', 'Edit', 'Delete', 'Search', 'Update', 'Cancel', { text: 'Clear', tooltipText: 'Clear Search', prefixIcon: 'e-cancel', id: 'clear', align: 'Right' } ]; } loadJobs() { this.jobService.getAllJobs().subscribe( result => { this.jobs = result; this.jobList = []; this.jobs.forEach(obj => { this.jobList.push({ value: obj.jobId, title: obj.jobTitle }) }); let newSettings = this.settings; newSettings.columns.jobTitle.editor.config.list = this.jobList; this.settings = Object.assign({}, newSettings); } ) } // initially load all rulesets and set to smart table refreshRuleSetType() { if (typeof this.jobs == 'undefined' || this.jobs.length == 0) { this.loadJobs(); } this.ruleSetService.getAllRuleSet().subscribe( response => { this.rulesets = response; alert(JSON.stringify(this.rulesets)); this.rulesets.forEach((item, index) => { let jobId = item['jobId']; if (jobId != null) { for (let i = 0; i < this.jobs.length; i++) { if (this.jobs[i].jobId == jobId) { item['jobTitle'] = this.jobs[i].jobTitle; break; } } } }); this.source = new LocalDataSource(this.rulesets); $(() => { $('.ng2-smart-pagination li:first').prop("data-toggle", "tooltip"); $('.ng2-smart-pagination li:first').prop("title", "First"); $('.ng2-smart-pagination li:first').tooltip(); $('.ng2-smart-pagination li:nth-child(2)').prop("data-toggle", "tooltip"); $('.ng2-smart-pagination li:nth-child(2)').prop("title", "Previous"); $('.ng2-smart-pagination li:nth-child(2)').tooltip(); $('.ng2-smart-pagination li:nth-last-child(2)').prop("data-toggle", "tooltip"); $('.ng2-smart-pagination li:nth-last-child(2)').prop("title", "Next"); $('.ng2-smart-pagination li:nth-last-child(2)').tooltip(); $('.ng2-smart-pagination li:last').prop("data-toggle", "tooltip"); $('.ng2-smart-pagination li:last').prop("title", "Last"); $('.ng2-smart-pagination li:last').tooltip(); }); } ) } toolbarClick(args: ClickEventArgs): void { if (args.item.id.endsWith('clear')) { this.gridObj.searchSettings.key = ''; (this.gridObj.element.querySelector(".e-input-group.e-search .e-input") as any).value = ""; } } onDeleteConfirm(event) { if (this.checkPermissionService.ruleDeleteButton == false) { DialogUtility.alert('You do not have a permission to delete the rulesetname.') // console.log('delete222222222222222222'+event) } else { this.dialogObj = DialogUtility.confirm({ title: 'Delete rulesetname', content: 'Are you sure you want to delete this rulesetname?', okButton: { text: 'Yes', click: this.deleteRuleSetByRsId.bind(this, event.data[0].ruleSetId) }, cancelButton: { text: 'No', click: this.cancelClick.bind(this) } }) } } cancelClick() { this.dialogObj.hide(); this.refreshRuleSetType(); } deleteRuleSetByRsId(id){ this.ruleSetService.deleteRuleSetByRsId(id).subscribe( response => { // console.log('response' + response); if (response != null) { DialogUtility.alert('RuleSetName deleted successfully.') this.searchText = ""; this.refreshRuleSetType(); this.dialogObj.hide(); } else { DialogUtility.alert('RuleSetName is associated with Transactions. Can\'t be deleted.') this.refreshRuleSetType(); this.dialogObj.hide(); } } ) } onSaveConfirm(event) { this.loggedInUser = event.data; this.loggedInUser["createdBy"] = sessionStorage.getItem('authenticateUser'); this.ruleSetService.UpdateRuleSetType(event.data, event.data.ruleSetId).subscribe( response => { if (response != null) { this.refreshRuleSetType(); this.searchText = ""; } else { DialogUtility.alert('rulesetname already exists.'); this.refreshRuleSetType(); } } ) } onCreateConfirm(event) { this.loggedInUser = event.data; this.loggedInUser["createdBy"] = sessionStorage.getItem('authenticateUser'); event.data['companyId'] = sessionStorage.getItem("companyId"); this.ruleSetService.createRuleSet(event.data).subscribe( response => { if (response != null) { // event.confirm.resolve(event.data); alert(JSON.stringify(response)); this.refreshRuleSetType() this.searchText = ""; } else { DialogUtility.alert('RuleSetName Type already exists.'); this.refreshRuleSetType(); } }) // } } onSearch(query: string = '') { this.searchText = query; this.source.setFilter([ // fields we want to include in the search { field: 'ruleSetName', search: query } ], false); if (query == "") { this.source = new LocalDataSource(this.rulesets); } } actionBegin(args) { //delete operation button if (args.requestType == "delete") { this.onDeleteConfirm(args); } //update operation button if (args.requestType === 'save' && args.action == "edit") { let t = args.data; this.selectedRuleset = t; if (this.checkPermissionService.ruleUpdateButton == false) { DialogUtility.alert('You do not have a permission to update the RuleSetName.'); args.cancel = true; return; } else if (this.selectedRuleset["ruleSetName"] == null || this.selectedRuleset["ruleSetName"] == undefined || this.selectedRuleset["ruleSetName"] == "") { DialogUtility.alert("ruleSetName name is required."); args.cancel = true; return; } else if (this.selectedRuleset["ruleSetName"].charAt(0) === ' ') { DialogUtility.alert({ title: 'Information', content: 'ruleSetName name cannot start with a space.' }); args.cancel = true; return; } else if (this.selectedRuleset.ruleSetName.match(this.regex) != this.selectedRuleset.ruleSetName) { DialogUtility.alert("#\"/?{}[];*%|:<>&+@. special characters are not allowed."); args.cancel = true; return; } else if (this.selectedRuleset.jobtitle['jobTitle'] == "") { DialogUtility.alert('Please select Job',); args.cancel = true; return; } else { this.onSaveConfirm(args); } } //add operation if (args.requestType === 'save' && args.action == "add") { let t = args.data; this.selectedRuleset = t; if (this.selectedRuleset["ruleSetName"] == null || this.selectedRuleset["ruleSetName"] == undefined || this.selectedRuleset["ruleSetName"] == "") { DialogUtility.alert("ruleSetName name is required."); args.cancel = true; return; } else if (this.selectedRuleset["ruleSetName"].charAt(0) === ' ') { DialogUtility.alert({ title: 'Information', content: 'ruleSetName name cannot start with a space.' }); args.cancel = true; return; } else if (this.selectedRuleset.ruleSetName.match(this.regex) != this.selectedRuleset.ruleSetName) { DialogUtility.alert("#\"/?{}[];*%|:<>&+@. special characters are not allowed."); args.cancel = true; return; } else { this.onCreateConfirm(args); } } } ///////////////other old ruleset function onFileSelected(fileList: FileList) { let $img: any = document.querySelector('#file'); this.filename = $img.files[0].name; let type = $img.files[0].type; if (type != "application/json") { let initialState = { title: 'Rule Set', btn2: 'OK', body: 'Only' + '' + ' application/json ' + '' + 'file format can be selected', enableBtn2: true, }; this.bsModalRef = this.bsModalService.show(GlobalModalComponent, Object.assign({ backdrop: true, ignoreBackdropClick: true, keyboard: false }, { initialState })); $("#importbtn").prop("disabled", true); $("#file").val(""); setTimeout(() => { $("#filename").html(""); }, 500); } else { this.showImportButton = true; $("#importbtn").prop("disabled", false); let file = fileList[0]; let fileReader: FileReader = new FileReader(); fileReader.onload = (e) => { this.fileContent = fileReader.result; } fileReader.readAsText(file); } } importRuleset(sameCompany) { this.showImportButton = false; this.existOrNot = ""; var fileDataObj = JSON.parse(this.fileContent); var importRuleSetName = fileDataObj.rulelist[0].ruleset.ruleSetName; for (let i = 0; i < this.rulesets.length; i++) { if (this.rulesets[i].ruleSetName == importRuleSetName) { this.existOrNot = "Exists"; break; } } let content = { "jsonCompanyId": fileDataObj.rulelist[0].ruleset.companyId, "sessionCompanyName": this.sessionCompanyName, "sessionCompanyId": this.company_id } this.ruleSetService.importRulesetCheckCompany(content).subscribe( data => { if (data == "same") { if (this.existOrNot == "Exists") { this.showModalImportButton = true; this.modalService.open(sameCompany, { ariaLabelledBy: 'modal-basic-title' }); } else { // alert("this.gen" + this.gen); if (this.gen == 'g2') { // alert("it is: " + this.gen); this.ruleSetService.importRuleset(fileDataObj).subscribe( response => { if (response != null || response != undefined) { let initialState = { title: 'Rule Set', btn2: 'OK', body: '' + importRuleSetName + '' + ' imported successfully.', enableBtn2: true, }; this.bsModalRef = this.bsModalService.show(GlobalModalComponent, Object.assign({ backdrop: true, ignoreBackdropClick: true, keyboard: false }, { initialState })); $("#file").val(""); $("#filename").html(""); $("#importbtn").prop("disabled", true); setTimeout(() => { this.refreshRuleSetType(); }, 500); } } ); } else { // alert("g3"); this.attributekeywordsservice.importRuleset(fileDataObj).subscribe( response => { if (response != null || response != undefined) { let initialState = { title: 'Rule Set', btn2: 'OK', body: '' + importRuleSetName + '' + ' imported successfully.', enableBtn2: true, }; this.bsModalRef = this.bsModalService.show(GlobalModalComponent, Object.assign({ backdrop: true, ignoreBackdropClick: true, keyboard: false }, { initialState })); $("#file").val(""); $("#filename").html(""); $("#importbtn").prop("disabled", true); setTimeout(() => { this.refreshRuleSetType(); }, 500); } } ); } } } else { if (this.existOrNot == "Exists") { let initialState = { title: 'Rule Set', btn2: 'OK', body: 'You can not import ' + '' + importRuleSetName + '' + ' as RuleSet already exists.', enableBtn2: true, }; this.bsModalRef = this.bsModalService.show(GlobalModalComponent, Object.assign({ backdrop: true, ignoreBackdropClick: true, keyboard: false }, { initialState })); } else { // alert(this.gen + this.gen); if (this.gen == 'g2') { this.ruleSetService.importRuleset(fileDataObj).subscribe( response => { if (response != null || response != undefined) { let initialState = { title: 'Rule Set', btn2: 'OK', body: '' + importRuleSetName + '' + ' imported successfully.', enableBtn2: true, }; this.bsModalRef = this.bsModalService.show(GlobalModalComponent, Object.assign({ backdrop: true, ignoreBackdropClick: true, keyboard: false }, { initialState })); $("#file").val(""); $("#filename").html(""); $("#importbtn").prop("disabled", true); setTimeout(() => { this.refreshRuleSetType(); }, 500); } } ); } else { this.attributekeywordsservice.importRuleset(fileDataObj).subscribe( response => { if (response != null || response != undefined) { let initialState = { title: 'Rule Set', btn2: 'OK', body: '' + importRuleSetName + '' + ' imported successfully.', enableBtn2: true, }; this.bsModalRef = this.bsModalService.show(GlobalModalComponent, Object.assign({ backdrop: true, ignoreBackdropClick: true, keyboard: false }, { initialState })); $("#file").val(""); $("#filename").html(""); $("#importbtn").prop("disabled", true); setTimeout(() => { this.refreshRuleSetType(); }, 500); } } ); } } } } ) } onChangeToggle(event) { this.functionExecution = event; } exportInSameCompany() { this.existOrNot = ""; if ($('#ruleset').val() == "") { let initialState = { title: 'Rule Set', btn2: 'OK', body: 'Please enter ruleset name.', enableBtn2: true, }; this.bsModalRef = this.bsModalService.show(GlobalModalComponent, Object.assign({ backdrop: true, ignoreBackdropClick: true, keyboard: false }, { initialState })); return false; } if ($('#jobTitle').val() == null || $('#jobTitle').val() == "Select Job") { let initialState = { title: 'Rule Set', btn2: 'OK', body: 'Please select job.', enableBtn2: true, }; this.bsModalRef = this.bsModalService.show(GlobalModalComponent, Object.assign({ backdrop: true, ignoreBackdropClick: true, keyboard: false }, { initialState })); return false; } for (let i = 0; i < this.rulesets.length; i++) { if (this.rulesets[i].ruleSetName == $('#ruleset').val()) { this.existOrNot = "Exists"; } } if (this.existOrNot == "Exists") { let initialState = { title: 'Rule Set', btn2: 'OK', body: 'You can not import ' + '' + $('#ruleset').val() + '' + ' as RuleSet already exists.', enableBtn2: true, }; this.bsModalRef = this.bsModalService.show(GlobalModalComponent, Object.assign({ backdrop: true, ignoreBackdropClick: true, keyboard: false }, { initialState })); } else { var fileDataObj = JSON.parse(this.fileContent); var ruleset = $('#ruleset').val(); var jobId = $('#jobTitle').val(); var functionExecution = this.functionExecution; this.showModalImportButton = false; this.ruleSetService.importRulesetInSameCompany(ruleset, jobId, functionExecution, fileDataObj).subscribe( response => { if (response != null || response != undefined) { this.modalService.dismissAll(); let initialState = { title: 'Rule Set', btn2: 'OK', body: '' + ruleset + '' + ' imported successfully.', enableBtn2: true, }; this.bsModalRef = this.bsModalService.show(GlobalModalComponent, Object.assign({ backdrop: true, ignoreBackdropClick: true, keyboard: false }, { initialState })); $("#file").val(""); $("#filename").html(""); $("#importbtn").prop("disabled", true); setTimeout(() => { this.refreshRuleSetType(); }, 500); } } ); } } ngAfterViewInit() { } }

[Pavithra Subramaniyam]

Hi Supriya,

Thanks for contacting Syncfusion support.

We have tried to reproduce the issue with the given code at our end, but the dropdown shows the list values. Please refer to the below sample link for more information.

https://stackblitz.com/edit/angular-guzdqh-9spcja?file=app.component.ts

For further validation please share the below details that will be helpful for us to provide a better solution as early as possible.

1. Share the Grid HTML code
2. Share the sample data for Grid
3. Share the data for the dropdown list
4. Share the Syncfusion package version

Regards,

Pavithra S