how to add space for child item in dropdown? - html

Question

I'm trying to show the parent child elements in dropdown select list.as the following image
i have the code as in foreach
#helper GetOption(List<Project_Cost_Management_System.Models.ChartOfAccount> model1, Guid? parentid)
{
foreach (var item3 in model1.Where(s => s.ParentAccountId.Equals(parentid)))
{
var zs3 = model1.Where(s => s.ParentAccountId == item3.Id);
int count3 = zs3.Count();
if (count3 >= 0)
{
if(#item3.ParentAccountId == null)
{
<option value="#item3.Id">#item3.Name</option>
}
else
{
var cout = model1.Count();
<option value="#item3.Id"> #item3.Name #model1.Where(s => s.dataid == #item3.dataparentid).Select(d => d.Name).First(). </option>
}
}
if (count3 > 0)
{
#GetOption(model1, item3.Id)
}
}
}
but it showed as
How can i display as the first picture.

Answer 1

You can sort of achieve what you're looking for using <optgroup>, so your rendered HTML would end up being something like:
<option value="...">Professional Fees</option>
<optgroup label="Property Related Expenses">
<option value="...">Maintenance Contribution</option>
...
</optgroup>
...
The only problem you might have with this, is that your actual groupings are not valid options themselves, i.e. you can't pick "Property Related Expenses", because it's just a grouping label. You also can't really control your right aligned descriptive text this way. In general, the HTML select element is pretty restrictive and doesn't allow a whole lot of customization.
When you need more advance functionality, you must move some sort of library that creates a "control" that mimics the functionality of a select list with more customizable HTML elements. There's a million and one different such libraries out on the interwebs, but I'm particular fond of Select2.js. In particular to your scenario, see the section there on "Templating".

Answer 2

I Got Answer.
Adding another field in model class as Hierarchy.
Adding space using the hierarchy. I add my code for refer.
#helper GetOption(List<Project_Cost_Management_System.Models.ChartOfAccount> model1, Guid? parentid)
{
foreach (var item3 in model1.Where(s => s.ParentAccountId.Equals(parentid)))
{
var zs3 = model1.Where(s => s.ParentAccountId == item3.Id);
int count3 = zs3.Count();
if (count3 >= 0)
{
if (#item3.ParentAccountId == null)
{
<option value="#item3.Id">#item3.Name</option>
}
else
{
int str = #item3.Hierarchy * 3;
string str1 = " ".ToString().PadRight(str);
str1 = str1.Replace(" ", "\u00a0");
<option value="#item3.Id">#str1 #item3.Name</option>
}
}
if (count3 > 0)
{
#GetOption(model1, item3.Id)
}
}
}