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 : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to use TreeView inside a DropDown ?

Thread ID:

Created:

Updated:

Platform:

Replies:

131855 Jul 31,2017 01:49 PM UTC Aug 17,2017 09:37 AM UTC ASP.NET MVC 9
loading
Tags: DropDownList
Nicola
Asked On July 31, 2017 01:49 PM UTC

Hi,

I have this treeview in my form page  

            @(Html.EJ().TreeView("treeView").TreeViewFields(
s => s.Datasource(
    ds => ds.URL(
        @Url.Action("DataSource"new { tipoArticolo = "TtipoServizio" })
                 ).Adaptor(AdaptorType.UrlAdaptor)
                 ).Id("ID_CATEGORIE").Text("CAT_TEXT").ParentId("CAT_ID_PARENT").HasChild("hasChild").Expanded("expanded")))

Can I use this TreeView inside an DropDown ?

Thanks

Karthik Ravichandran [Syncfusion]
Replied On August 1, 2017 05:13 AM UTC

 
Hi Nicola, 
 
Thanks for contacting Syncfusion support. 
 
We have checked your query (Can I use the TreeView inside the Dropdown). For your requirement, we have already showcased the TreeView inside the Dropdown in our online demo samples. Please refer the below link. 
 
 
To know more details about TreeView component please refer the below documentation link: 
 
 
 
Please let us know if you need further assistance on this. 
 
Regards, 
Karthik R 


Nicola
Replied On August 1, 2017 04:39 PM UTC

Thank you for reply , the treeView is shown.

My treeview is simple, without checkbox and now I want to show and store the value selected but I have problem to do this.



I have a model with property "ID_CATEGORIE"


I want to use DropDownList with dafields text=CAT_TEXT and value=ID_CATEGORIE  


this is my code:


<div class="col-md-5">

               @Html.EJ().DropDownList("categoria").TargetID("categorie").Width("100%").PopupHeight("280px").WatermarkText("Select an item").ClientSideEvents(e => e.Create("dropDownCategoriaOnCreate"))

 

               <div id="categorie">

                   <ul>

                       @Html.EJ().TreeView("treeViewCategoria").TreeViewFields(

   s => s.Datasource(ds => ds.URL(@Url.Action("DataSource", "Categorie", new { tipoArticolo = "TtipoProdotto" })).Adaptor(AdaptorType.UrlAdaptor))

   .Id("ID_CATEGORIE").Text("CAT_TEXT").ParentId("CAT_ID_PARENT").HasChild("hasChild").Expanded("expanded")).ClientSideEvents(e => e.NodeSelect("categoriaSelect").Create("treeViewCategoriaOnCreate").NodeExpand("checkScroll").NodeCollapse("checkScroll"))

 

 

 

                   </ul>

               </div> 

           </div>

  

  

  

@section scripts{

    <script>



        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) { }



        function dropDownCategoriaOnCreate(args) {

            drpdwnobj = this;

        }


        //Function triggers while check the checkbox in tree view and it adds the checked item text to dropdownlist value

        function checkScroll(args) {

            var scrolpos = drpdwnobj.scrollerObj.model.scrollTop;

            drpdwnobj._refreshScroller();

            drpdwnobj.popupList.css("display", "block");

            drpdwnobj.scrollerObj.setModel({ "scrollTop": scrolpos });

        }



//I tried to assign text to the drowdwnlist but doesn't works

 

        function categoriaSelect(args) {        

 

  

            drpdwnobj.clearText();

            drpdwnobj._addText($.trim(args.value));

drpdwnobj.model.value=args.id;

            drpdwnobj.hidePopup();

            

        }


        //I tried to use another model property to store the ID , this works , 

// but the drowdwnlist not shown the text    

function categoriaSelect(args) {  

       

$("#IDcategoria").val(args.id);

        }



      

    </script>


}    


Prince Oliver [Syncfusion]
Replied On August 2, 2017 09:52 AM UTC

Hi Nicola, 

Thank you for your update. 

We have prepared a Dropdownlist sample with Treeview as per your requirement to show and store the value selected. Kindly refer to the following link for the sample: http://www.syncfusion.com/downloads/support/forum/131855/ze/DDLTreeView1810635766 

Regards, 
Prince 


Nicola
Replied On August 2, 2017 02:34 PM UTC

Thank you for your update. But not work for me.

When the view form is open, the dropdownlist text is empty , the watermarktext is shown. 

I tried to add the value on Create event  


function dropDownCategoriaOnCreate(args) 

    {  drpdwnobj = this;            

        drpdwnobj._addText('@Model.categoria');    }


this works, but when i select another value from treeview , the value is added in the dropdown text. 

I need just one value ,Can I set the text instead add ? What is the method to assign text to dropdown ? I want to select a value and then hidePopup() and, if is possible, after the form is open and shown the values read from DB, when the Popup is shown, select the current value on treeview. Is it possible ?


Prince Oliver [Syncfusion]
Replied On August 3, 2017 07:25 AM UTC

Hi Nicola,   
  
Thank you for your update.   
  
Query 1: I tried to add the value on Create event and this works, but when i select another value from treeview , the value is added in the dropdown text. I need just one value ,Can I set the text instead add ? What is the method to assign text to dropdown ?   
  
Response:  To display only on value in the dropdownlist, we need to remove the previous value before adding a new one. Kindly refer to the following code snippet.   

drpdwnobj._removeText(drpdwnobj._hiddenValue); // removing the hidden value 
drpdwnobj.model.value = drpdwnobj.model.text = ""; // clearing the model values 
drpdwnobj.element.val(""); //clearing the value form the element 
drpdwnobj._hiddenValue = currentValue; //adding the current value to hidden element 
drpdwnobj._addText(currentValue); // adding the text to dropdownlist 
drpdwnobj.model.value = drpdwnobj.model.text = drpdwnobj.element.val(); //setting value in model 

Query 2: I want to select a value and then hidePopup() and, if is possible, after the form is open and shown the values read from DB, when the Popup is shown, select the current value on treeview. Is it possible ?   
  
Response:  To hide the popup when the value is selected, we can call the _hideResult internal method. Kindly refer to the following code snippet. 

drpdwnobj._hideResult(); 
 
To select a value in the dropdownlist during initial rendering time, we need to set selected attribute for the element in the datasource. On create event access the selected node by getSelectedNode method and call the onselect method to select the value in the dropdownlist. Kindly refer to the following code snippet.   

function treeViewOnCreate(args) { 
    treeobj = this; 
    var node = this.getSelectedNode();  
    onselect(node); 
} 

We have modified the sample as per your requirement, kindly refer to the following link for the sample: http://www.syncfusion.com/downloads/support/forum/131855/ze/DDLTreeView-1566982325 

Regards, 
Prince 


Nicola
Replied On August 4, 2017 12:42 PM UTC

Thank you for your help,

but your example use the NodeClick event,

for me is not ok , because if I select a node to expande , this is selected,

then I use the NodeSelect event.


In treeViewOnCreate Event , I cant found selected node, my datasource is from action url, then I use the Ready event :


function treeViewCategoriaReady(args) {

  var node = treeobj.getNode($("#@Model.IDcategoria")); 

  categoriaSelect(node);

 }


And at the end, i use: 


function categoriaSelect(args) {

            var currentText = !ej.isNullOrUndefined(args.text) ? args.text : args.value;//get selected node text

            var currentValue = !ej.isNullOrUndefined(args) ? args.id : ""; //get selected note ID 

            drpdwnobj.clearText();

            drpdwnobj._hiddenValue = currentText; //adding the current text to hidden element

            drpdwnobj._addText(currentText); // adding the text to dropdownlist

            drpdwnobj.model.value = currentText; //setting value in model

            $("#IDcategoria").val(currentValue); //setting value to ID property 

            drpdwnobj._hideResult();// hide popup

        }

to set just ione value to dropdown.


Anyway thanks, with your help I solved my problem, but any other suggest is apreciate 


Prince Oliver [Syncfusion]
Replied On August 7, 2017 12:43 PM UTC

Hi Nicola, 

Thank you for your update. 

In the NodeSelect event, when we unselect a value it will be unselected and selected again. This the default behavior of the TreeView control. So, we suggest you to use in the NodeClick event. 

Regards, 
Prince 





Nicola
Replied On August 16, 2017 03:58 PM UTC

Hi Nicola, 

Thank you for your update. 

In the NodeSelect event, when we unselect a value it will be unselected and selected again. This the default behavior of the TreeView control. So, we suggest you to use in the NodeClick event. 

Regards, 
Prince 





OK thanks,

this works pretty well, but if in my form I have another simple drop down list without treeview, this not work, because this code to prevent default behavior is applied to all ej DropDownList. 

// prevents the default behaviour to perform custom action

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) { }

I tried to apply this, only to the drowdown with listview

drpdwnobj = $('#categoriaServiziFiltro').data("ejDropDownList");

drpdwnobj._OnMouseClick = function (e) { };
drpdwnobj._OnMouseEnter = function (e) { };
drpdwnobj._OnMouseLeave = function (e) { };
drpdwnobj._OnKeyUp = function (e) { };
drpdwnobj._OnKeyDown = function (e) { };

But doesn't works.

How can I avoid this?


Prince Oliver [Syncfusion]
Replied On August 17, 2017 09:37 AM UTC

Hi Nicola, 

Thank you for your update. 

If you need to prevent defaults for the particular DropDownList alone, then you can do it in the create event of that DropDownList. Here you need to turn off the event handler before emptying them. Kindly refer to the following code snippet. 

<script type="text/javascript"> 
        // prevents the default behaviour to perform custom action 
 
        function dropdownOnCreate(args) { 
            drpdwnobj = $("#DropDownList").ejDropDownList("instance"); 
            drpdwnobj.ultag.off("click", $.proxy(drpdwnobj._OnMouseClick, drpdwnobj)); 
            drpdwnobj.ultag.off("mouseenter", $.proxy(drpdwnobj._OnMouseEnter, drpdwnobj)); 
            drpdwnobj.ultag.off("mouseleave", $.proxy(drpdwnobj._OnMouseLeave, drpdwnobj)); 
            $(drpdwnobj.popupList, drpdwnobj.wrapper).off("keyup", $.proxy(drpdwnobj._OnKeyUp, drpdwnobj)); 
            $(drpdwnobj.popupList, drpdwnobj.wrapper).off("keydown", $.proxy(drpdwnobj._OnKeyDown, drpdwnobj)); 
            drpdwnobj._OnMouseClick = function (e) { } 
            drpdwnobj._OnMouseEnter = function (e) { } 
            drpdwnobj._OnMouseLeave = function (e) { } 
            drpdwnobj._OnKeyUp = function (e) { } 
            drpdwnobj._OnKeyDown = function (e) { } 
        } 
</script> 


Regards, 
Prince 


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.

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

;