Thank you very much for the alert,I didn't notice that till now,..why he didn't provide any info on the license before downloading?! I will be careful next time
Anyway,I don't know if there is any article or an opensource control but I don't think there is,so I guess you have to build it from scratch..
The general idea is that you need:
textbox,javascript/jquery,gridview,div/panel around the gridview,webservice/webmethods to be used for the autocomplate feature (autocomplete feature can be implemented using either the autocomplateextender of ajaxcontrolstoolkit or the autocomplete of jquery)
The idea(I mean the general idea) is to call the webservice/webmothod using the autocomplete feature on the textbox to fetch records every time the user type something in the textbox and stopped for milliseconds (Jquery,javascript or the autocomplateextender
can help to achieve that in a very easy manner),then fetch the records as an html table/gridview (when the user select any item,you can use either (async)postback or javascript/jquery to set the value in the textbox)...that's it I suppose.
EDIT: Do you mind to use JQuery controls?,I don't know but I think that it will be a very good start,you need to use JQuery and
FlexBox,add this html into your page:
<head runat="server">
<title></title>
<link href="css/jquery.flexbox.css" rel="stylesheet" type="text/css" />
<script src="Net_Common/Net_Script/JQuery_ui/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Net_Common/Net_Script/JQuery_ui/jquery.flexbox.min.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="test">
</div>
<asp:HiddenField ID="hfSelectedValue" runat="server" />
<script type="text/javascript"> $('#test').flexbox('FlexBoxhandler.ashx', {
resultTemplate: '<div style="float:left;width:100px">{name}</div><div style="float:left;width:100px">{Age}</div><div style="float:left;width:100px">{Sex}</div>',
watermark: 'Enter Employee Name',
displayValue: 'name',
hiddenValue: 'id',
resultsProperty: 'results',
width: 300,
paging: {
style: 'links', // or 'links'
cssClass: 'paging', // prefix with containerClass (e.g. .ffb .paging)
pageSize: 2, // acts as a threshold. if <= pageSize results, paging doesn't appear
showSummary: true, // whether to show 'displaying 1-10 of 200 results' text
summaryClass: 'summary', // class for 'displaying 1-10 of 200 results', prefix with containerClass
summaryTemplate: 'Displaying {start}-{end} of {total} results', // can use {page} and {pages} as well
maxPageLinks: 5 // used only if style is 'links'
},
onSelect: function() {
// later on,you can read the selected value from the hiddenfield in server side..cool
$("#<%=hfSelectedValue.ClientID %>").val(this.getAttribute('hiddenValue'));
alert($("#<%=hfSelectedValue.ClientID %>").val());
}
}); </script>
</div>
</form>
</body>
And here is the code of FlexTesthandler.ashx:
<%@ WebHandler Language="C#" Class="FlexBoxhandler" %>
using System.Collections.Generic;
using System.Web;
using System.Web.Script.Serialization;
public class FlexBoxhandler : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "application/json";
var results = new List<Emp>();
//if (context.Request.QueryString["q"].Length != 0)
//{
// string nametosearch = context.Request.QueryString["q"];
// //filter you data from db and return it in the same format as in the else section
//}
//else
//{
results.Add(new Emp(1, "Alaa", 24, "Male"));
results.Add(new Emp(2, "Tariq", 40, "Male"));
results.Add(new Emp(3, "Layth", 27, "Male"));
results.Add(new Emp(4, "Whatever!", 60, "Female"));
//}
var data = new { results };
//Make sure to add:using System.Web.Script.Serialization;
var json = new JavaScriptSerializer();
context.Response.Write(json.Serialize(data));
}
public class Emp
{
public int id { set; get; }
public string name { get; set; }
public int Age { get; set; }
public string Sex { get; set; }
public Emp(int empid, string empname, int age, string sex)
{
id = empid;
name = empname;
Age = age;
Sex = sex;
}
}
public bool IsReusable
{
get
{
return false;
}
}
}
Best Regards,
Ala'a Alnajjar
----------------------------------------------------
My Webblog
alaa9jo
Star
11375 Points
2036 Posts
Re: Dropdown list with Multiple Columns , Having Hirerachy Structure , Autocomplete
Mar 10, 2010 11:33 AM|LINK
Thank you very much for the alert,I didn't notice that till now,..why he didn't provide any info on the license before downloading?! I will be careful next time
Anyway,I don't know if there is any article or an opensource control but I don't think there is,so I guess you have to build it from scratch..
The general idea is that you need:
textbox,javascript/jquery,gridview,div/panel around the gridview,webservice/webmethods to be used for the autocomplate feature (autocomplete feature can be implemented using either the autocomplateextender of ajaxcontrolstoolkit or the autocomplete of jquery)
The idea(I mean the general idea) is to call the webservice/webmothod using the autocomplete feature on the textbox to fetch records every time the user type something in the textbox and stopped for milliseconds (Jquery,javascript or the autocomplateextender can help to achieve that in a very easy manner),then fetch the records as an html table/gridview (when the user select any item,you can use either (async)postback or javascript/jquery to set the value in the textbox)...that's it I suppose.
EDIT: Do you mind to use JQuery controls?,I don't know but I think that it will be a very good start,you need to use JQuery and FlexBox,add this html into your page:
<head runat="server"> <title></title> <link href="css/jquery.flexbox.css" rel="stylesheet" type="text/css" /> <script src="Net_Common/Net_Script/JQuery_ui/jquery-1.4.1.min.js" type="text/javascript"></script> <script src="Net_Common/Net_Script/JQuery_ui/jquery.flexbox.min.js" type="text/javascript"></script> </head> <body> <form id="form1" runat="server"> <div> <div id="test"> </div> <asp:HiddenField ID="hfSelectedValue" runat="server" /> <script type="text/javascript"> $('#test').flexbox('FlexBoxhandler.ashx', { resultTemplate: '<div style="float:left;width:100px">{name}</div><div style="float:left;width:100px">{Age}</div><div style="float:left;width:100px">{Sex}</div>', watermark: 'Enter Employee Name', displayValue: 'name', hiddenValue: 'id', resultsProperty: 'results', width: 300, paging: { style: 'links', // or 'links' cssClass: 'paging', // prefix with containerClass (e.g. .ffb .paging) pageSize: 2, // acts as a threshold. if <= pageSize results, paging doesn't appear showSummary: true, // whether to show 'displaying 1-10 of 200 results' text summaryClass: 'summary', // class for 'displaying 1-10 of 200 results', prefix with containerClass summaryTemplate: 'Displaying {start}-{end} of {total} results', // can use {page} and {pages} as well maxPageLinks: 5 // used only if style is 'links' }, onSelect: function() { // later on,you can read the selected value from the hiddenfield in server side..cool $("#<%=hfSelectedValue.ClientID %>").val(this.getAttribute('hiddenValue')); alert($("#<%=hfSelectedValue.ClientID %>").val()); } }); </script> </div> </form> </body>And here is the code of FlexTesthandler.ashx:
<%@ WebHandler Language="C#" Class="FlexBoxhandler" %> using System.Collections.Generic; using System.Web; using System.Web.Script.Serialization; public class FlexBoxhandler : IHttpHandler { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "application/json"; var results = new List<Emp>(); //if (context.Request.QueryString["q"].Length != 0) //{ // string nametosearch = context.Request.QueryString["q"]; // //filter you data from db and return it in the same format as in the else section //} //else //{ results.Add(new Emp(1, "Alaa", 24, "Male")); results.Add(new Emp(2, "Tariq", 40, "Male")); results.Add(new Emp(3, "Layth", 27, "Male")); results.Add(new Emp(4, "Whatever!", 60, "Female")); //} var data = new { results }; //Make sure to add:using System.Web.Script.Serialization; var json = new JavaScriptSerializer(); context.Response.Write(json.Serialize(data)); } public class Emp { public int id { set; get; } public string name { get; set; } public int Age { get; set; } public string Sex { get; set; } public Emp(int empid, string empname, int age, string sex) { id = empid; name = empname; Age = age; Sex = sex; } } public bool IsReusable { get { return false; } } }Ala'a Alnajjar
----------------------------------------------------
My Webblog