Group Dropdown data using jQuery "optgroup"

Question

I want to group data in ASP.Net WebForm DropDownList which lacks the built in support for grouping.

I am generating data for the dropdown as below. Is it possible to group based on value and optgroup using jQuery so that it looks like a proper dropdown with groups?

<select name="ctl00$ContentPlaceHolder1$ddlOptionGroup" id="ContentPlaceHolder1_ddlOptionGroup" class="form-control ddCountry styled-select">
<option value="1" data-category="5">Project One</option>
<option value="2" data-category="6">Project Two</option>
<option value="3" data-category="0">Project Three</option>
<option value="4" data-category="5">Project Four</option>
<option value="5" data-category="0">General </option>
<option value="6" data-category="0">Cat 2 </option>
<option value="7" data-category="0">Cat 1</option>
<option value="8" data-category="7">Item 1</option>
<option value="9" data-category="7">Item 2</option>

</select>

Desired Output

Cat 1
--Item 1
--item 2
Cat 2
--
General
--Project Two
General
--Project One
--Project Four
--Project Three
Project One

I have setup fiddle with actual code http://codepen.io/anon/pen/rjPYBV

Please post the code you've written to attempt a solution to this. Given your rep level you should already know that SO is not a code writing service. Also, note that it is entirely possible to achieve what you need using the standard DropDownList control and C#: http://stackoverflow.com/questions/16167862/how-can-i-add-option-groups-in-asp-net-drop-down-list — Rory McCrossan, Feb 14 '17 at 07:57
I already tried the other solutions, it is not working jquery one — Learning, Feb 14 '17 at 08:05
@Learning - You said you want to group by `Value` & `data-category` both but in the sample data each group is different right? — Rahul Singh, Feb 14 '17 at 09:01
@RahulSingh, data-category value need to be compared with Value and accourging need to be grouped one which have 0 as data-category should be in seperate category 'XXXX' — Learning, Feb 14 '17 at 09:24
@Learning - What kind of comparison between `0` & `1` for example? Please clarify with some sample output. — Rahul Singh, Feb 14 '17 at 09:37

score 0 · Answer 1 · answered Feb 14 '17 at 10:55

I have tried to solve this problem using CodeBehind as well as jquery but i was not able to make it work or get the desired result. So i though of doing similar thing using CTE query and pass same data to the Dropdown.

WITH CTE(ID, ParentID, Name,  Depth, SortCol)  AS  ( 
SELECT ID, ParentID, Name, 0, CAST(ID AS varbinary(max)) 
FROM DonationForProject 
WHERE ParentID = 0 
UNION ALL
SELECT d.ID, d.ParentID, d.Name, p.Depth + 1, 
CAST(SortCol + CAST(d.ID AS binary(4)) AS varbinary(max)) 
FROM DonationForProject AS d 
JOIN CTE AS p 
ON d.ParentID = p.ID 
) 

SELECT ID, ParentID, Name,  Depth, REPLICATE('&nbsp;&nbsp;', Depth) + Name as HName 
FROM CTE
ORDER BY Name

Advantage i have with this is that i don't have to do anything else using jquery or Code-behind i simply bind data with drop-down

I am using   to add space REPLICATE('  ', Depth) you can use -- also in order to make it look hierarchical in nature.

<asp:dropdownlist Visible="true" ID="ddlOptionGroup" runat="server" CssClass="form-control" CausesValidation="True">  
</asp:dropdownlist>

Code Behind

DataSet ds2 = DataProvider.GetHierarchicalForDD(1);

        ListItem newItem;
        DataTable dt = new DataTable();
        dt = ds2.Tables[0];

        foreach (DataRow drow in dt.Rows)
        {
            newItem = new ListItem(WebUtility.HtmlDecode(drow["HName"].ToString()), drow["ID"].ToString());
            newItem.Attributes["optgroup"] = drow["ParentID"].ToString();
            ddlOptionGroup.Items.Add(newItem);
        }

Another requirement i had regarding this that user should be able to select Category also. which usually is not the case if you group them like as in example below you cant selet or pass value of category or group

 <select>
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>

Group Dropdown data using jQuery "optgroup"

1 Answers1