Adding Dropdownlist inside the sidebar

17 Feb 20223 minutes to read

While clicking the dropdownlist items inside the sidebar element,it closes the sidebar component. By default, the closeonDocumentClick property will close the Sidebar element whenever the click action will be triggered outside of the Sidebar element. The DropDownList popup element placed outside of the Sidebar element (body tag instead of sidebar element). So, during the popup element interactions (click, mousedown) the closeonDocumentClick will trigger and close the sidebar.

To overcome this behavior in your application, you can add one common class by using cssClass property to all the components that has appended their elements outside of the sidebar component. Based on that class you can prevent the Sidebar close action by using close event.

The following example shows how to prevent the closes of sidebar while click the dropdownlist.

<div class=" control-section">
<!-- sidebar element declaration -->
    <ejs-sidebar id="default-sidebar" width="280px" closeOnDocumentClick="true" close="onClose">
        <e-content-template>
            <div class="title-header">
                <div style="display:inline-block;font-size:16px"> Dropdownlist </div>
                <ejs-dropdownlist id="games" dataSource="@ViewBag.data"  cssClass="custom_class">
                </ejs-dropdownlist>
            </div>
            </e-content-template>
    </ejs-sidebar>
    <!-- end of sidebar element -->
    <!--  Main Content declaration -->
    <div>
        <div class="title default">Main content</div>
        <div class="sub-title">
            Place your primary content here.
        </div>
    </div>
</div>
<script>
   // Prevent the sidebar element from closing.
    function onClose() {
     if(document.activeElement.classList.contains("custom_class")){
        args.cancel = true;
      }
    }
</script>
<style>
    /* sidebar element styles */
    #default-sidebar {
        background-color: rgb(25, 118, 210);
        color: #ffffff;
    }

    .title {
        text-align: center;
        font-size: 20px;
        padding: 15px;
    }

    .sub-title {
        text-align: center;
        font-size: 16px;
        padding: 10px;
    }
</style>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace WebApplication.Controllers
{
    public partial class SidebarController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }
    }
}

Output be like the below.

Sidebar Sample