JQuery BulletedList Control Sorting in ASP.NET using JQuery

This demonstration is about how sort the items of the BulletedList control using JQuery in Visual Studio 2010
  • 2372
Download Files:
 
Sorting is the most common tasks performed with tabular data. Here I will explain you how to sort the items of the BulletedList control.

In the following example you have to sort items given as staff member of a software company. The staff (items) will be sorted from higher post to lower post, lets quickly jump to the solution. 


Design View

Sorting.gif

We have six staff members to be sort in descending order according to their post but we given a integer value to them in ascending order such as the "1" for Director and "2" for HR Manager etc., so the items will be sorted in ascending order according to the values.

Example

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
 <title>JQuery Sort Items</title>
   <style type="text/css">
     .smallDiv
     {
        background-color:White;
        font-family:"Lucida Sans Unicode", "Lucida Grande", Verdana, Arial
          font-size:12px
          color:#000000;
        width:510px
        margin-left:auto;
        margin-right:auto;
        padding:10px;
        border:solid 1px #c6cfe1;
     }
     .style2
     {
        font-family: Verdana;
        font-size: small;
        font-weight: normal;
     }
  </style>
  <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js" type="text/javascript"></script>
   <script type="text/javascript">
      $(function () {
         $("input[id$=btnSort]").click(function (e) {
             e.preventDefault();
             var sortedList = $.makeArray($('.bullet li'))
                .sort(function (o, n) {
                    return ($(o).text() < $(n).text()) ? -1 : 1;
                });
             $('.bullet').html(sortedList);
             $(this).attr("disabled", "disabled");
         });
      });
   </script>  
</head>
<
body bgcolor="#c5c5c5">
  <form id="form1" runat="server">
    <div class="smallDiv" 
        style="font-family: Verdana; font-size: small; background-color: #F8F8F8;">
        <h2 class="style2" 
            style="border-style: groove; height: 34px; background-color: #EAD5D5;"><strong>
           
A Software Comapny Staff </strong></h2>
        <asp:BulletedList ID="list" runat="server" class="bullet" 
            style="font-weight: 700">
            <asp:ListItem Value="5">
                Software Developer </asp:ListItem>                
            <asp:ListItem Value="2">
                HR Manager</asp:ListItem>
            <asp:ListItem Value="1">
                Director</asp:ListItem>
            <asp:ListItem Value="3">
                Project Manager</asp:ListItem>
            <asp:ListItem Value="4">
                Senior Software Developer</asp:ListItem>    
            <asp:ListItem Value="6">
                Trainee</asp:ListItem>
        </asp:BulletedList>
        <br />
        <asp:Button ID="btnSort" runat="server" 
            Text="Click To Sort" 
            Font-Names="Verdana" Font-Size="X-Small" />   
    </div>
 </form>
</body>
</
html>

Output

Sorting1.gif

Sorted List Output 

Sorting2.gif

It will be very useful.

Categories

More Articles

© 2019 DotNetHeaven. All rights reserved.