We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

data not show ng-template in ejs-dropdownlist

Thread ID:

Created:

Updated:

Platform:

Replies:

146417 Aug 2,2019 03:02 PM UTC Aug 7,2019 05:15 PM UTC Angular - EJ 2 2
loading
Tags: DropDownList
Rizwan
Asked On August 2, 2019 03:02 PM UTC

Hi,

data not show ng-template in ejs-dropdownlist look my code and image view



import { Component, OnInit, Input, ViewEncapsulation, Output, ViewChild } from '@angular/core';
import { Query, DataManager, WebApiAdaptor} from '@syncfusion/ej2-data';
import { DropDownListComponent } from '@syncfusion/ej2-angular-dropdowns';
import { EmitType } from '@syncfusion/ej2-base';
import { FilteringEventArgs, highlightSearch} from '@syncfusion/ej2-dropdowns';
import { FormBuilder, FormGroup, FormControl, Validators, FormsModule} from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';

@Component({
selector: 'kt-docselect',
templateUrl: './docselect.component.html',
styleUrls: ['./docselect.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class DocselectComponent implements OnInit {
invDetailForm: FormGroup;
fb: FormBuilder;
@ViewChild('element') element;

constructor(private builder: FormBuilder) {
this.fb = builder;
this.createForm();
}
createForm() :void {
this.invDetailForm = this.fb.group({
docName: ['', Validators.required]
});
}

public datatest: DataManager = new DataManager({
url: 'https://ej2services.syncfusion.com/production/web-services/api/Orders',
adaptor: new WebApiAdaptor,
crossDomain: true
});

// bind the Query instance to query property
public query: Query = new Query().select(['ShipName', 'EmployeeID']).take(10).requiresCount();

// maps the remote data column to fields property
public remoteFields: Object = {
text: 'ShipName', value: 'EmployeeID', itemCreated: (e: any) => {
highlightSearch(e.item, this.queryString, true, 'StartsWith');
}
};

//sort the result items
public sorting: string = 'Ascending';
public queryString: string;

// set the height of the popup element
public height: string = '200px';

// set the placeholder to DropDownList input element
public remoteWaterMark: string = 'Select a name';

public onFiltering: EmitType<FilteringEventArgs> = (e: FilteringEventArgs) => {
// load overall data when search key empty.
if (e.text === '') {
e.updateData(this.datatest);
} else {
// restrict the remote request until search key contains 3 characters.
if (e.text.length < 3) { return; }
let query: Query = new Query().select(['ShipName', 'EmployeeID']);
query = (e.text !== '') ? query.where('ShipName', 'startswith', e.text, true) : query;
e.updateData(this.datatest, query);
}
};


ngOnInit() {

}

}

<div class="box-form">
<form [formGroup]="invDetailForm" novalidate id="formId">
<ejs-dropdownlist formControlName="docName" id='dropdownlist-template' [dataSource]='datatest' [fields]='remoteFields' [query]='query' [popupHeight]='height' [placeholder]='remoteWaterMark' [allowFiltering]='true' [sortOrder]='sorting' (filtering)='onFiltering($event)' [itemTemplate]='itemTemplate' floatLabelType='Auto'>
<!-- <ng-template #headerTemplate>
<div class="head"> <span class="photo">Photo</span> <span style="margin-left:17px;">Employee Info</span></div>
</ng-template> -->
<ng-template #itemTemplate="" let-datatest>
<!-- <img class="empImage" src="./assets/auto-complete/Employees/{{data.Eimg}}.png" alt="employee" /> -->
<h5>{{datatest.ShipName}}</h5>
<p><span>{{datatest.ShipAddress}}</span> -- <span>{{datatest.ShipCity}}</span> -- <span>{{data.OrderDate}}</span></p>
<p><span>{{datatest.ShipCity}}</span> -- <span>{{datatest.OrderDate}}</span></p>
</ng-template>
<!-- <ng-template #valueTemplate let-data>
<div><img class="valueTemp" src="./assets/auto-complete/Employees/{{data.Eimg}}.png" height="26px" width="26px" alt="employee" />
<div class="name"> {{data.Name}} </div>
</div>
</ng-template> -->
</ejs-dropdownlist>

</form>
</div>




Ashokkumar Balasubramanian [Syncfusion]
Replied On August 5, 2019 11:36 AM UTC

Hi Rizwan, 
 
Good day to you. 
 
Query 1: Data does not show. 
 
We have checked your provided code block and reported problem at our end. The reported problem due to on improperly mapping the field values in template. Could you please ensure this case at your end? 
 
For your reference, we have prepared the sample, please find it below. 
 
 
Query2: highlight search is not working. 
 
We do not have in build support for highlight search functionality in Dropdown List. We will check the possibilities of achieving your requirement and revert to us within two business days. 
 
Regards, 
Ashokkumar B. 


Ashokkumar Balasubramanian [Syncfusion]
Replied On August 7, 2019 05:15 PM UTC

Hi Rizwan, 
 
Query2: highlight search is not working. 
 
Thanks for your patience. 
 
We have highlighted the text in the template sample. In the webapi adaptor order there is no filtering support, but this can be achieved through filtering. So, we have prepared sample using employees table and basically template will be rendered with delay, so, to get the item created element we have used set timeout. 
 
  
Please check the sample and get back to us if you need any further assistance 
 
Regards, 
Ashokkumar B. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon