Conditionally use custom template in DropDownList?

[Brian Vallelunga]

Is it possible to conditionally use the default template within a DropDownList while sometimes using a custom template?

I have use-case where for all but one of the items, I want the default template, and then for a single item (with a known value) I want to use a custom template.

[Brian Vallelunga]

Sorry, I don't seem to be able to edit my post, but what I'm really after is how to put a DatePicker inside of a DropDownList. I can add it via the ng-template feature, but whenever I click into the input, the entire DropDownList closes before I see the calendar.

This is the code I'm working with:

<ng-template kendoDropDownListItemTemplate let-dataItem>
<span *ngIf="dataItem.value !== 'Custom'">{{ dataItem.text}}</span>
<div *ngIf="dataItem.value === 'Custom'">
 <div>{{ dataItem.text}}</div>
 <kendo-datepicker [(value)]="value" [(ngModel)]="editingDateRange.customStartDate"></kendo-datepicker>
 <kendo-datepicker [(value)]="value" [(ngModel)]="editingDateRange.customEndDate"></kendo-datepicker>
 <button (click)="dateRangeChanged.emit(editingDateRange)">OK</button>
</div>
</ng-template>

 

[Svet]

Hi Brian,

We can achieve the desired behavior by customizing the default flow of events of the components.

Basically, if we focus the DatePicker or open it, we will set a flag, based on which we will prevent the default action of the close event of the DropDownList component. Then on (close) event of the DatePicker we can call the toggle method of the DropDownList so that we close it manually. Check the following example, that demonstrates this approach:

https://plnkr.co/edit/fVPSJXLSMdVrayEzjLVK?p=preview

I hope this helps.

Regards,
Svetlin
Progress Telerik

[Brian Vallelunga]

Perfect, thank you.