I am developing a website for Accounting.... Now i have a requirment for dropdownlist... which looks like this
this is the required output in dropdownlist
1000 Sales bank
2000 sub-sales bank
3000 sub-sales bank
4000 Invest bank2
3000 sub-Invest bank2
so, the dropdownlist should contain the data as shown above and it should have auto complete(on sales,sub-sales..... column) feature and the selected text to be displayed in tooltip(with complete row information)
mmm...There are many 3rd party controls that implemented such a thing,Infragistic WebCombo for instance.
but naah!,why should you pay for such a control,Obout (he is one of the best developers in the world,he is also one of the developers of the ajaxcontrolstoolkit) already implemented a free control,I think you need this one:
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
I am able to display Multiple Columns But unable to Filter..... the rows based on the EmpName..
i.e I need a autocomplete feature for textbox and base on this the result should be displayed
Do you see the commented code in the FlexTesthandler.ashx (lines 13-20 and line 25)?,you can uncomment them ,when the user type something in the textbox,JQuery flex will send what is typed to the generic handler(FlexTesthandler.ashx) with querystring (q),so
all you have to do is to read that query string,filter your records and return them as list.
This site has not feature to upload complete files but I will help you with anyway I can.
Best Regards,
Ala'a Alnajjar
----------------------------------------------------
My Webblog
//filter you data from db and return it in the same format as in the else section
after that line you have to put a code that filter your data according to nametosearch and fill the records into results,mmm..OK I have modified the code of the generic handler,her is a full sample:
<%@ WebHandler Language="C#" Class="FlexBoxhandler" %>
using System;
using System.Collections.Generic;
using System.Data;
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
results = FilterData(nametosearch);
}
else
{
results = FilterData(string.Empty);
}
var data = new { results };
//Make sure to add:using System.Web.Script.Serialization;
var json = new JavaScriptSerializer();
context.Response.Write(json.Serialize(data));
}
private List<Emp> FilterData(string nametosearch)
{
var emps = new DataTable();
emps.Columns.Add("id");
emps.Columns.Add("name");
emps.Columns.Add("Age");
emps.Columns.Add("Sex");
DataRow dr = emps.NewRow();
dr["id"] = 1;
dr["name"] = "Alaa";
dr["Age"] = 24;
dr["Sex"] = "Male";
emps.Rows.Add(dr);
dr = emps.NewRow();
dr["id"] = 2;
dr["name"] = "Tariq";
dr["Age"] = 40;
dr["Sex"] = "Male";
emps.Rows.Add(dr);
dr = emps.NewRow();
dr["id"] = 3;
dr["name"] = "Layth";
dr["Age"] = 27;
dr["Sex"] = "Male";
emps.Rows.Add(dr);
dr = emps.NewRow();
dr["id"] = 4;
dr["name"] = "Whatever!";
dr["Age"] = 60;
dr["Sex"] = "Female";
emps.Rows.Add(dr);
DataView dv = emps.DefaultView;
if (nametosearch.Length != 0)
{
dv.RowFilter = "name like '%" + nametosearch + "%'";
}
var results = new List<Emp>();
foreach (DataRowView emp in dv)
{
results.Add(new Emp(Convert.ToInt32(emp["id"]), emp["name"].ToString(), Convert.ToInt32(emp["Age"]), emp["Sex"].ToString()));
}
return results;
}
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;
}
}
}
INK_MCA
Member
2 Points
13 Posts
Dropdown list with Multiple Columns , Having Hirerachy Structure , Autocomplete
Mar 09, 2010 05:56 AM|LINK
Hi,
I am developing a website for Accounting.... Now i have a requirment for dropdownlist... which looks like this
this is the required output in dropdownlist
1000 Sales bank
2000 sub-sales bank
3000 sub-sales bank
4000 Invest bank2
3000 sub-Invest bank2
so, the dropdownlist should contain the data as shown above and it should have auto complete(on sales,sub-sales..... column) feature and the selected text to be displayed in tooltip(with complete row information)
Dropdown
alaa9jo
Star
11375 Points
2036 Posts
Re: Dropdown list with Multiple Columns , Having Hirerachy Structure , Autocomplete
Mar 09, 2010 08:30 AM|LINK
mmm...There are many 3rd party controls that implemented such a thing,Infragistic WebCombo for instance.
but naah!,why should you pay for such a control,Obout (he is one of the best developers in the world,he is also one of the developers of the ajaxcontrolstoolkit) already implemented a free control,I think you need this one:
http://www.obout.com/combobox/aspnet_columns_grid_ondemand.aspx
Am I correct?
Ala'a Alnajjar
----------------------------------------------------
My Webblog
INK_MCA
Member
2 Points
13 Posts
Re: Dropdown list with Multiple Columns , Having Hirerachy Structure , Autocomplete
Mar 10, 2010 04:35 AM|LINK
hi Ala'a Alnajjar ,
But even obout controls i need to purchase as a developer............
Regards
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
INK_MCA
Member
2 Points
13 Posts
Re: Dropdown list with Multiple Columns , Having Hirerachy Structure , Autocomplete
Mar 17, 2010 01:40 PM|LINK
can You Upload complete files...?
INK_MCA
Member
2 Points
13 Posts
Re: Dropdown list with Multiple Columns , Having Hirerachy Structure , Autocomplete
Mar 17, 2010 01:55 PM|LINK
Hi,
I am able to display Multiple Columns But unable to Filter..... the rows based on the EmpName..
i.e I need a autocomplete feature for textbox and base on this the result should be displayed
Regards,
Nagarjuna.Indukuri
alaa9jo
Star
11375 Points
2036 Posts
Re: Dropdown list with Multiple Columns , Having Hirerachy Structure , Autocomplete
Mar 17, 2010 02:38 PM|LINK
Do you see the commented code in the FlexTesthandler.ashx (lines 13-20 and line 25)?,you can uncomment them ,when the user type something in the textbox,JQuery flex will send what is typed to the generic handler(FlexTesthandler.ashx) with querystring (q),so all you have to do is to read that query string,filter your records and return them as list.
This site has not feature to upload complete files but I will help you with anyway I can.
Ala'a Alnajjar
----------------------------------------------------
My Webblog
INK_MCA
Member
2 Points
13 Posts
Re: Dropdown list with Multiple Columns , Having Hirerachy Structure , Autocomplete
Mar 18, 2010 08:03 AM|LINK
Hi,
I had removed comments but it is not showing Filtered Data.. and it is also not showing any data..
Regards,
Nagarjuna.Indukuri
alaa9jo
Star
11375 Points
2036 Posts
Re: Dropdown list with Multiple Columns , Having Hirerachy Structure , Autocomplete
Mar 18, 2010 08:39 AM|LINK
My friend,in the commented code I typed a note:
//filter you data from db and return it in the same format as in the else section
after that line you have to put a code that filter your data according to nametosearch and fill the records into results,mmm..OK I have modified the code of the generic handler,her is a full sample:
<%@ WebHandler Language="C#" Class="FlexBoxhandler" %> using System; using System.Collections.Generic; using System.Data; 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 results = FilterData(nametosearch); } else { results = FilterData(string.Empty); } var data = new { results }; //Make sure to add:using System.Web.Script.Serialization; var json = new JavaScriptSerializer(); context.Response.Write(json.Serialize(data)); } private List<Emp> FilterData(string nametosearch) { var emps = new DataTable(); emps.Columns.Add("id"); emps.Columns.Add("name"); emps.Columns.Add("Age"); emps.Columns.Add("Sex"); DataRow dr = emps.NewRow(); dr["id"] = 1; dr["name"] = "Alaa"; dr["Age"] = 24; dr["Sex"] = "Male"; emps.Rows.Add(dr); dr = emps.NewRow(); dr["id"] = 2; dr["name"] = "Tariq"; dr["Age"] = 40; dr["Sex"] = "Male"; emps.Rows.Add(dr); dr = emps.NewRow(); dr["id"] = 3; dr["name"] = "Layth"; dr["Age"] = 27; dr["Sex"] = "Male"; emps.Rows.Add(dr); dr = emps.NewRow(); dr["id"] = 4; dr["name"] = "Whatever!"; dr["Age"] = 60; dr["Sex"] = "Female"; emps.Rows.Add(dr); DataView dv = emps.DefaultView; if (nametosearch.Length != 0) { dv.RowFilter = "name like '%" + nametosearch + "%'"; } var results = new List<Emp>(); foreach (DataRowView emp in dv) { results.Add(new Emp(Convert.ToInt32(emp["id"]), emp["name"].ToString(), Convert.ToInt32(emp["Age"]), emp["Sex"].ToString())); } return results; } 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; } } }
<div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste">if (context.Request.QueryString["q"].Length != 0)</div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"> {</div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"> string nametosearch = context.Request.QueryString["q"];</div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"> //filter you data from db and return it in the same format as in the else section</div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"> results = FilterData(nametosearch);</div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"> </div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"> }</div>Ala'a Alnajjar
----------------------------------------------------
My Webblog
INK_MCA
Member
2 Points
13 Posts
Re: Dropdown list with Multiple Columns , Having Hirerachy Structure , Autocomplete
Mar 22, 2010 05:44 AM|LINK
Hi, Thanks it works fine one final help... how can i return emp id on text change event....... for the selected employee