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. Image for the cookie policy date

Adding "<blank>" or "All" item to a databound DropDownList

How can we add a blank or "All" item to the top of a DropDownList that is getting its values from a SQL Datasource?

3 Replies

CI Christopher Issac Sunder K Syncfusion Team December 31, 2018 10:38 AM UTC

Hi Shivendra Bisht,  

Thank you for contacting Syncfusion support. 

We checked your requirement for adding “All” Item to the top of the Dropdownlist popup. We have already provided UG documentation for your requirement “checkAll” item added in top of the popup list using “HeaderTemplate”. Please find the UG document for your reference.  

Please let us know if you require any further assistance. 


SB Shivendra Bisht January 4, 2019 05:34 PM UTC

Thanks but that doesn't serve the purpose. Let me elaborate on my requirement.
We have a report that can be filtered based on the department (the list comes from a department table - SQL Datasource) using a dropdownlist. If we don't want to filter the report ie show details from all departments - we need to have an item "All" at the top of the ddlist which can be selected.
With asp:dropdown it is easy to add an extra item using the below example
<asp:DropDownList ID="ddlDept" runat="server" DataSourceID="dsDept" DataTextField="DeptName" DataValueField="DeptID">
                <asp:ListItem Selected="True" Text="All" Value="0"></asp:ListItem>

PO Prince Oliver Syncfusion Team January 7, 2019 11:16 AM UTC

Hi Shivendra, 

Thank you for contacting Syncfusion support. 

We have checked your requirement in our end. Unlike ASP DropDownList our EJ1 DropDownList is rendered based on jQuery from server-side wrappers. So this limits them from using both items and SQL dataSource simultaneously. But we can achieve your requirement in our controls by prepending the all item in the dataSource. You can do it either in server-side by directly adding the item to the SQL data or in the client side using the client-side event. Kindly refer to the following code. 

<ej:DropDownList ID="ddlDept" runat="server" ClientSideOnBeforePopupShown="onshown" ClientSideOnDataBound="ondata"> 
    var count = 0; 
    function ondata() { 
        count = 0; 
    function onshown() { 
        if (this.model.dataSource != null && count == 0) { 
            this.model.dataSource.splice(0, 0, { ShipName: "All", OrderID: 0 }); 
            var b = this.model.dataSource; 
            this.model.dataSource = null; 
            this.option("dataSource", b); 

We have attached a sample for your reference, please find the sample at the following location: http://www.syncfusion.com/downloads/support/forum/141703/ze/aspsqlddl1462947395  

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


Live Chat Icon For mobile
Up arrow icon