How to use TreeView inside a DropDown ?

[Nicola]

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]

 

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. 

 

http://mvc.syncfusion.com/demos/web/dropdownlist/integrationwithwidgets 

 

To know more details about TreeView component please refer the below documentation link: 

 

UG : https://help.syncfusion.com/aspnetmvc/treeview/getting-started 

 

API : https://help.syncfusion.com/api/js/ejtreeview 

 

Please let us know if you need further assistance on this. 

 

Regards, 

Karthik R 

[Nicola]

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]

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]

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]

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]

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]

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]

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]

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> 

Kindly refer to the following link for the sample: http://www.syncfusion.com/downloads/support/forum/131855/ze/DDLTreeView1739001937 

Regards, 

Prince