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

[Shivendra Bisht]

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

[Christopher Issac Sunder K]

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.  

UG: https://help.syncfusion.com/aspnet/dropdownlist/howto?cs-save-lang=1&cs-lang=html#add-check-all-option-in-popup-list  

Please let us know if you require any further assistance. 

Thanks, 

Christo

[Shivendra Bisht]

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>
</asp:DropDownList>

[Prince Oliver]

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"> 

</ej:DropDownList> 

 

<script> 

    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); 

        } 

        count++; 

    } 

</script> 

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. 

Regards, 

Prince