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. Image for the cookie policy date

How to Rendering TreeView inside DropDownList within a Dialog Template

Hi Syncfusion Support Team,

I have a problem with rendering a TreeView inside DropDownList within a Dialoge Template for ejGrid control, the problem is that there is nothing happened?

this is my dialog template:
<script type="text/template" id="specialDayTemplate">
        <table cellspacing="10" dir="rtl">
                <td style="text-align: right">
                    <ej:DropDownList ID="ddlDepts2" ClientIDMode="Static" runat="server" DataValueField="DEPTID" Width="150px"
                        WatermarkText="-- إختر القسم --" EnableRTL="true"
                                    <ej:TreeView ID="tvDepts2" ClientIDMode="Static" runat="server" DataTextField="DEPTNAME"
                                        DataIdField="DEPTID" DataParentIdField="SUPDEPTID"


Please help me on that!!

M Helal

5 Replies

ES Ezhil S Syncfusion Team October 19, 2015 12:58 PM UTC

Hi Helal,


Thank you for contacting Syncfusion support.


In order to use Syncfusion control inside script template, we suggest you to render the control from script so that the control will be rendered in Dialog Template. We have prepared sample as per your requirement to add DropDownList with TreeView in Grid Dialog template.

For your reference check the following demo link: http://asp.syncfusion.com/demos/web/grid/dialogonlocaldata.aspx

Sample download link: http://www.syncfusion.com/downloads/support/forum/120817/ze/DialogTempGrid_f120817-1401503078


Please let us know if you have any other queries.



Ezhil S

MH Mohammad Helal October 20, 2015 07:59 AM UTC

Thank you so much, this helped me a lot.

ES Ezhil S Syncfusion Team October 21, 2015 04:12 AM UTC

Hi Helal,

Thanks for your update.

We are glad that our solution helped you to resolve the issue at your end.

Let us know if you need further assistance.

Ezhil S

MS mohammed shdaifat May 1, 2016 01:15 PM UTC

Hi Syncfusion Support Team,

i have a proplem in DropDownList  when i used it with treeview template  i used same demo code  , in part of demo code i should override following methods:
   ej.DropDownList.prototype._OnMouseClick = function (e) { }
            ej.DropDownList.prototype._OnMouseEnter = function (e) { }
            ej.DropDownList.prototype._OnMouseLeave = function (e) { }
            ej.DropDownList.prototype._OnKeyUp = function (e) { }
            ej.DropDownList.prototype._OnKeyDown = function (e) { }
after  that all DropDownList  in my application cannot be selected.
please is there any other way to resolve this issue.
mohammed al shdaifat

PO Prince Oliver Syncfusion Team May 2, 2016 01:16 PM UTC

Hi Mohammed,   
Thanks for your update.   
When you override the dropdown source methods it will affect the every dropdownlist in the page, so you need to copy the source methods to be overridden in variables and override the methods and when creating dropdownlist without treeview again override the methods to its default by the variables. We have attached a sample for your convenience   
Refer to the following link for sample:   

Live Chat Icon For mobile
Up arrow icon