CODEWITHSUNDEEP
htmlrazorasp.net-mvc-5html-helper
Saravanan Arunagiri
Saravanan Arunagiri

Reputation: 595

how to add space for child item in dropdown?

I'm trying to show the parent child elements in dropdown select list.as the following imageenter image description here

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 enter image description here

How can i display as the first picture.

Upvotes: 2

Views: 274

Answers (2)

Saravanan Arunagiri
Saravanan Arunagiri

Reputation: 595

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

    }
}

Upvotes: 0

Chris Pratt
Chris Pratt

Reputation: 239290

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

Upvotes: 1

Related Questions