Dynamically add/remove headerTemplatein for DropDownList

[Pratura]

Hi,

could you please provide a sample code for the subject.

I have a scenario where I need to add a headerTemplate when the dropDownList has an item selected, and then remove the header when the dropDown is empty (selectedIndex: -1)

Thank you.

[Prince Oliver]

Hi Pratura, 

Thank you for using Syncfusion products. 

We cannot dynamically assign HeaderTemplate in the DropDownList. But we can add a container element as headerTemplate for DropDownList and change its content based on the selected value using Change event. Kindly refer to the following code. 

<input type="text" id="dropdown1" /> 

 

<script> 

    $(function () { 

        $('#dropdown1').ejDropDownList({ 

            width: 300, 

            dataSource: items, 

            fields: { text: "text", value: "value" }, 

            headerTemplate: "<span id='temp'></span>", 

            change: "Change" 

        }); 

    }); 

    function Change(args) { 

        $("#temp").html("<span class='temp'>Selected Item - "+args.selectedText+"</span>"); 

    } 

</script> 

 

<style> 

.temp { 

        height: 30px; 

        display: block; 

        padding-left: 13px; 

        padding-top: 5px; 

        border-bottom: 1px solid #c8c8c8; 

    } 

</style> 

We have prepared a sample for your reference, kindly refer to the following playground link: http://jsplayground.syncfusion.com/amm4fmnv 

Regards, 

Prince