Archive

Archive for July, 2012

Create a group with DropdownList using JQuery

July 24, 2012 1 comment

Hi all,

try this example to Create a group with DropdownList using JQuery

1) Open VS2008 and create a new website and add web page

2) From Toolbox drag DropdownList control


<div>
 <asp:DropDownList ID="DropDownList1" runat="server" Width="200px"
 ondatabound="DropDownList1_DataBound">
 </asp:DropDownList>
 </div>

in code behind add the following code


protected void Page_Load(object sender, EventArgs e)
 {
 if (!IsPostBack)
 {
 DataTable table = new DataTable();
 table.Columns.Add("ID", typeof(int));
 table.Columns.Add("Number", typeof(int));
 //
 // Here we add five DataRows.
 //
 table.Rows.Add(1, 57);
 table.Rows.Add(2, 23);
 table.Rows.Add(3, 99);
 table.Rows.Add(4, 8);
 table.Rows.Add(5, 74);

DropDownList1.DataSource = table;
 DropDownList1.DataValueField = "ID";
 DropDownList1.DataTextField = "Number";

DropDownList1.DataBind();
 }
 }

protected void DropDownList1_DataBound(object sender, EventArgs e)
 {
 foreach (ListItem item in ((DropDownList)sender).Items)
 {
 if (System.Int32.Parse(item.Text) < 50)
 item.Attributes.Add("classification", "LessThanFifty");
 else
 item.Attributes.Add("classification", "GreaterThanFifty");
 }
 }

3) Add this Javascript code to create a group with DropdownList


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
 <script type="text/javascript">
 $(document).ready(function() {
 //Create groups for dropdown list
 $("select#DropDownList1 option[classification='LessThanFifty']").wrapAll("<optgroup label='Less than fifty'>");
 $("select#DropDownList1 option[classification='GreaterThanFifty']").wrapAll("<optgroup label='Greater than fifty'>");
 });

 </script>
 <style>
 optgroup
 {
 background-color:Gray ;
 }
 </style>

Hope this helps

Good Luck

Advertisements
Categories: ASP.Net, Javascript, Jquery

Fill DropdownList through JSON data using jQuery

July 10, 2012 Leave a comment

Hi all,

try this example to Fill DropdownList through JSON data using jQuery

1) Open VS2008 and create a new website and add new web page

2) From Toolbox drag Lable and DropdownList


<p>
 <asp:DropDownList ID="DropDownList1"runat="server"/>
 </p>
 <asp:Label ID="msg"runat="server"></asp:Label>

3) In Code behind add the following code :


[WebMethod]
public static List<Employee> fetchData()
 {
 return new List<Employee>()
 {
 new Employee{ Fullname="Aamir Hasan", ID=1},
 new Employee{ Fullname="Awais Ahmed", ID=2},
 new Employee{ Fullname="Mahwish Khan", ID=3},
 new Employee{ Fullname="Saba Khan", ID=4},
 new Employee{ Fullname="Hina Ahmed", ID=5},
 new Employee{ Fullname="Gill Gate", ID=6}
 };
 }
}

public class Employee
{
 public string Fullname { get; set; }
 public int ID { get; set; }
}

4) Now add this script to fill Dropdownlist


<script src="Scripts/jquery-1.4.1.js"type="text/javascript"></script>
 <script language="javascript">
 $.ajax({
 type: "POST",
 url: "Default.aspx/fetchData",
 data: "{}",
 contentType: "application/json; charset=utf-8",
 dataType: "json",
 success: function (response) {
 var Dropdown = $('#<%=DropDownList1.ClientID %>');
 Dropdown.append(new Option("SELECT", 0));
 $.each(response.d, function (index, item) {
 Dropdown.append(new Option(item.Fullname, item.ID));
 });
 },
 error: function () {
 alert("Failed to load data");
 }
 });

$(document).ready(function () {
 var dropdown = $('#<%=DropDownList1.ClientID %>');
 dropdown.change(function () {
 $("#<%=msg.ClientID%>").text(dropdown.val());
 });
 });

 </script>

Now run your page

Hope this helps

Good Luck

 

Categories: ASP.Net, Jquery