CODEWITHSUNDEEP
c#htmlasp.net-mvcrazor
Unbreakable
Unbreakable

Reputation: 8084

How to make a particular dropdown choice to come first

I have a drop down and elements shown in UI in order of appearance

  1. Footer
  2. Header
  3. Blabla

I want the dropdown to show Header at the top position in UI.

  1. Header
  2. Footer
  3. Blabla

Code UI:

<select id="simTextEditorSelection" onchange="ShowTextEditorBasedOnSelection();"  style="float:right;">
    @foreach (PageInfoMV anItemForEditor in Model.ItemContents)
    {
        <option value="@anItemForEditor.ItemId">@anItemForEditor.ItemDisplayText</option>
    }

Can I somehow mention in the code above to show a particular ID as default (TOP Position).

Model.ItemContents:

public List<PageInfoMV> ItemContents
{
    get
    {
        if (this.itemContents == null) { this.itemContents = new List<PageInfoMV>(); }

        if (!this.itemContents.Any(x => x.ItemId == Constants.HEADER_ID))
        {
            this.itemContents.Add(new PageInfoMV() { ItemId = Constants.HEADER_ID, ItemDisplayText = Constants.HEADER_DISPLAY_TEXT });
        }

        if (!this.itemContents.Any(x => x.ItemId == Constants.FOOTER_ID))
        {
            this.itemContents.Add(new PageInfoMV() { ItemId = Constants.FOOTER_ID, ItemDisplayText = Constants.FOOTER_DISPLAY_TEXT });
        }

        return this.itemContents;
    }

    set { this.itemContents = value; }
}

Constants.cs

 public static readonly string HEADER_ID = "-1000";
 public static readonly string FOOTER_ID = "-1001";

Its just a code snippet. If any more code chunk is required please do let me know. Thanks.

Upvotes: 0

Views: 58

Answers (2)

Lalji Dhameliya
Lalji Dhameliya

Reputation: 1769

if your Header option value is constant then you should set on top your header.

<select id="simTextEditorSelection">
   <option value="Footer">Footer</option>
   <option value="Header"> Header</option>
   <option value="Blabla">Blabla</option>
</select>
 <script>
      var val1=$("#simTextEditorSelection").find('option:eq(0)').val();
       $('#simTextEditorSelection option[value="Header"]').insertBefore('#simTextEditorSelectionoption[value="'+val1+'"]');
 </script>


var val1=$("#simTextEditorSelection").find('option:eq(0)').val();
$('#simTextEditorSelection option[value="Header"]').insertBefore('#simTextEditorSelection option[value="'+val1+'"]');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="simTextEditorSelection">
   <option value="Footer">Footer</option>
   <option value="Header"> Header</option>
   <option value="Blabla">Blabla</option>
</select>

Upvotes: 1

JanR
JanR

Reputation: 6132

If you have control over ItemContents I would suggest adding an arbitrary value to rank your contents value; For example header would be 0, footer would be 1 etc. You can then use this to do an OrderBy() in your view:

@foreach (PageInfoMV anItemForEditor in Model.ItemContents.OrderBy(ic => ic.OrderValue))
{
  ...
}

EDIT:

Optional additional ordering for remaining items:

@foreach (PageInfoMV anItemForEditor in Model.ItemContents.OrderBy(ic => ic.OrderValue)
.ThenBy(ic => ic.SomeOtherValueMaybeName))
{
  ...
}

Upvotes: 0

Related Questions