How to dynamically Order a listbox with a dropdown?

Question

I have a listbox with 20 colors. It looks something like this:

1:Red 2:Green 3:Blue 4:Orange 5:Red 6:Yellow 7:Orange 8:Red 9:Green ....

It gets the data from an ObjectDataSource which in turn gets it's data from a method which returns a datatable. I want a dropdown which basically has 2 items, Order By # and Order By Color. If the user chooses Order By #, it will Order the ListBox in ascending or descending order. If the user chooses Order By Color, it will Order By Color. How do I go about doing this?

Can I sort this using a DataView?

Thanks, XaiSoft

Answer 1

(I'm assuming you've already figured out how to bind the ListBox in the first place.)

Set the property AutoPostback="true" on your DropdownList. This will cause the SelectedIndexChanged event to fire when the user picks a different value.

In there you can rebind your listbox.

---

Edit: deleted my misunderstanding around the ObjectDataSource - joshperry's answer covers that much better!

Answer 2

You can add the sort expression to your ObjectDataSource as a Select parameter, you can define it like so:

    <asp:ObjectDataSource 
        ID="ObjectDataSource1" 
        runat="server" 
        SelectMethod="SelectMethod" 
        TypeName="MyDataObject">
            <asp:Parameter Direction="input" Type="string" Name="sortExpression">
            </asp:Parameter>
    </asp:ObjectDataSource>

Then in the "SelectMethod" method where the data is retrieved add a parameter of that name and return a DataView:

    public DataView SelectMethod(string sortExpression)
    {
        DataTable table = GetData();
        DataView dv = new DataView(table);
        dv.Sort = sortExpression;
        return dv;
    }

Then in the wizard for the ObjectDataSource you can bind that Parameter to the dropdown SelectedValue. Make the value of each of the DropDown items the same as your column names.

Answer 3

Just wonder... You already have the data in the ListBox, why not sorting it using javascript? To avoid go back to the server and ask for the same thing.

just get the correct list box id and you're done!

<script language="JavaScript" type="text/javascript">
  function sortlist() {
    var lb = document.getElementById('mylist'); // <-- Use $get(<%# myList.ClientID %>); if you want
    arrTexts = new Array();

    for(i=0; i<lb.length; i++)  {
      arrTexts[i] = lb.options[i].text;
    }

    arrTexts.sort();
    // arrTexts.reverse()  // <-- uncomment if you want descending

    for(i=0; i<lb.length; i++)  {
      lb.options[i].text = arrTexts[i];
      lb.options[i].value = arrTexts[i];
    }
  }
</script>


<select name="mylist" id="mylist" size="5">
  <option value="Anton">Anton</option>
  <option value="Mike">Mike</option>
  <option value="Peter">Peter</option>
  <option value="Bill">Bill</option>
  <option value="Carl">Carl</option>
</select>
<br />
<a href="javascript:sortlist();">sort</a>