aspnet-mvc-ej1-demos/Views/Dropdownlist/IntegrationwithWidgets.cshtml

@section MetaTags{
   <meta name="description" content="This sample demonstrates how to integerate other component wihtin ASP.NET MVC DropDownList control popup."  >
}

@section SampleHeading{
    <span class="sampleName">Dropdownlist-Integration with Widgets-ASP.NET MVC-SYNCFUSION</span>}
@section ControlsSection{
    <div class="frame">
        <div class="control">
            @Html.EJ().DropDownList("DropDownList").TargetID("carsList1").Width("100%").PopupHeight("280px").WatermarkText("Select an item").ClientSideEvents(e=>e.Create("dropdownOnCreate"))

            <div id="carsList1">
                <ul>
                    @Html.EJ().TreeView("treeView").ShowCheckbox(true).TreeViewFields(s => s.Datasource((IEnumerable<TreeDropDown>)ViewBag.datasource).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"))
                </ul>
            </div>
        </div>
    </div>
}
@section StyleSection{
    <style type="text/css">
        .e-ddl-popup div > ul li .e-chkbox-wrap {
            padding-right: 2px;
        }

        .frame {
            width:40%;
        }
    </style>
}
@section ScriptSection{
    <script type="text/javascript">
        // 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) { }

        function dropdownOnCreate(args) {
            drpdwnobj = this;
        }
        function treeViewOnCreate(args) {
            treeobj = this;
        }
        // check & uncheck the checkbox when click on text
        $(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 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 });
        }

        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) : removeText(currentValue);
            drpdwnobj.model.value = drpdwnobj.model.text = drpdwnobj.element.val();
        }
        function removeText(currentValue) {
            var eleVal = drpdwnobj.element[0].value.split(drpdwnobj.model.delimiterChar), hidVal = drpdwnobj._visibleInput[0].value.split(drpdwnobj.model.delimiterChar),
                index = $.inArray(currentValue, eleVal);
            if (index >= 0) {
                eleVal.splice(index, 1);
                hidVal.splice(index, 1);
                drpdwnobj._valueContainer.splice(index, 1);
                drpdwnobj._textContainer.splice(index, 1);
            }
            drpdwnobj.element[0].value = eleVal.join(drpdwnobj.model.delimiterChar);
            drpdwnobj._visibleInput[0].value = hidVal.join(drpdwnobj.model.delimiterChar);
        }
        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>
}