Prevent Default Behavior to perform custom behavour on only 1 dropdown

[Paul Lees]

Hi,

I have a page that has 4 dropdown lists, 3 are standard dropdown lists and one uses a template to create a treeview inside.

Amongst following the documentation to create this, there are 5 lines of code that prevent the default activities for the dropdown.

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

The issue i am facing is that this then does not allow me to perform the default activities required for the further 3 dropdown lists i have on the page. I have attempted muliple ways of applying it only to the dropdown required.

I have attached a copy of the Razor and the script, which involves one of the attempts i used to try and get my problem to work.

If you could please help, i would be much appriciated.

Paul

Attachment: MultipleDDTreeViewError_fff18513.zip

[Keerthana Rajendran]

Hi Paul,   

   

Thank you for contacting Syncfusion Support.   

   

We suggest you to prevent default functionalities for the particular DropDownList alone in the create event of corresponding DropDownList. Here, you need to turn off the event handler before emptying them. Kindly refer to the following code snippet.    

      

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

                @Html.EJ().DropDownList("WorkType").TargetID("TypeList").Width("100%").WatermarkText("Please Select a Work Type").PopupHeight("400px").ClientSideEvents(eve => eve.Select("MWTSelect").Create("dropdownOnCreate"))   

   

                <div id="TypeList">   

                    <ul>   

                        @Html.EJ().TreeView("treeView").ShowCheckbox(true).TreeViewFields(s => s.Datasource((IEnumerable<TreeDropDown>)ViewBag.TreeGridDataSource).Id("id").ParentId("pid").Text("name").HasChild("hasChild").Expanded("expanded").SpriteCssClass("spriteCss")).ClientSideEvents(e => e.NodeCheck("onNodeCheck").Create("treeViewOnCreate").NodeUncheck("onNodeUnCheck").NodeExpand("checkScroll").NodeCollapse("checkScroll").NodeSelect("onNodeSelect"))   

   

                    </ul>   

                </div>   

   

            </div>   

   

<script>   

        var drpdwnobj;   

       var treeobj;   

        var tree;   

        $(function () {   

            $("body").on("click", ".e-treeview ul li a.e-text", function (e) {   

                if (!$(e.target).siblings(".e-chkbox-wrap").children("input.nodecheckbox")[0].checked)   

                    treeobj.checkNode($(e.target).closest("li"));   

                else   

                    treeobj.uncheckNode($(e.target).closest("li"));   

            });   

        });   

   

        function treeViewOnCreate(args) {   

            treeobj = this;   

        }   

        function dropdownOnCreate(args) {   

            var WorkTypeDropDown = $('#WorkType').data("ejDropDownList");   

            WorkTypeDropDown.ultag.off("click", $.proxy(WorkTypeDropDown._OnMouseClick, WorkTypeDropDown));   

            WorkTypeDropDown.ultag.off("mouseenter", $.proxy(WorkTypeDropDown._OnMouseEnter, WorkTypeDropDown));   

            WorkTypeDropDown.ultag.off("mouseleave", $.proxy(WorkTypeDropDown._OnMouseLeave, WorkTypeDropDown));   

            $(WorkTypeDropDown.popupList, WorkTypeDropDown.wrapper).off("keyup", $.proxy(WorkTypeDropDown._OnKeyUp, WorkTypeDropDown));   

            $(WorkTypeDropDown.popupList, WorkTypeDropDown.wrapper).off("keydown", $.proxy(WorkTypeDropDown._OnKeyDown, WorkTypeDropDown));   

            WorkTypeDropDown._OnMouseClick = function (e) { }   

            WorkTypeDropDown._OnMouseEnter = function (e) { }   

            WorkTypeDropDown._OnMouseLeave = function (e) { }   

            WorkTypeDropDown._OnKeyUp = function (e) { }   

            WorkTypeDropDown._OnKeyDown = function (e) { }    

            drpdwnobj = this;   

                         

        }   

        function checkScroll(args) {   

            var scrolpos = drpdwnobj.scrollerObj.model.scrollTop;   

            drpdwnobj._refreshScroller();   

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

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

        }   

   

        function onNodeCheck(args) {   

            if (args.currentCheckedNodes != null) {   

                var checkeditems = args.currentCheckedNodes;   

                for (var i = 0; i < checkeditems.length; i++) {   

                    if ((checkeditems[i] != null) && !isContains(checkeditems[i].text))   

                        addOrRemoveItem(checkeditems[i].text, true);   

                }   

            }   

        }   

        //Function triggers while uncheck the checkbox in tree view and it removes the unchecked item text from dropdownlist value   

        function onNodeUnCheck(args) {   

            if (args.currentUncheckedNodes != null) {   

                var uncheckeditems = args.currentUncheckedNodes;   

                for (var i = 0; i < uncheckeditems.length; i++) {   

                    if (uncheckeditems[i] != null && isContains(uncheckeditems[i].text))   

                        addOrRemoveItem(uncheckeditems[i].text);   

                }   

            }   

            ensureRootCheck(args);   

        }   

   

        function ensureRootCheck(args) {   

            var rootEle = $(args.currentElement).parents("ul.e-treeview-ul");   

            for (var i = 0; i < rootEle.length; i++) {   

                if ($(rootEle[i]).parent("li").length) {   

                    if (isContains($(rootEle[i]).siblings("[role=presentation]").text()))   

                        addOrRemoveItem($(rootEle[i]).siblings("[role=presentation]").text());   

                }   

            }   

        }   

   

        function addOrRemoveItem(currentValue, isAdd) {   

            drpdwnobj._hiddenValue = currentValue;   

            isAdd ? drpdwnobj._addText(currentValue) : drpdwnobj._removeText(currentValue);   

            drpdwnobj.model.value = drpdwnobj.model.text = drpdwnobj.element.val();   

        }   

        function isContains(val) {   

            var data = drpdwnobj.getValue().split(","), matched;   

            for (k = 0; k < data.length; k++) {   

                if (data[k] == val) {   

                    matched = 1;   

                    break;   

                }   

            }   

            return matched;   

        }   

         

    </script>   

   

   

We have prepared a sample based on your code which can be downloaded from the following link.   

   

http://www.syncfusion.com/downloads/support/forum/137847/ze/DropDownTreeView388038040   

   

Regards,   

Keerthana