TECHNOLOGIES
FORUMS
JOBS
BOOKS
EVENTS
INTERVIEWS
Live
MORE
LEARN
Training
CAREER
MEMBERS
VIDEOS
NEWS
BLOGS
Sign Up
Login
No unread comment.
View All Comments
No unread message.
View All Messages
No unread notification.
View All Notifications
C# Corner
Post
An Article
A Blog
A News
A Video
An EBook
An Interview Question
Ask Question
Combobox inside Datagrid ASP.net 1.1
Saravanakumar Ponnudurai
May 23, 2012
8.5
k
0
0
facebook
twitter
linkedIn
Reddit
WhatsApp
Email
Bookmark
Combobox inside Datagrid ASP.net 1.1,Datagrid in asp.net 1.1,asp.net1.1.
Recently i had and requirement to have an Combobox in one of my ASP.net application. I just googled and found an topic which is solving my purpose. But i found that its for just a combination of Text box and List box. It looks ok but my requirement get changed little bit to have a combobox inside datagrid.
So we can go to the code straight away:
NOTE: Remove the Space between all the Starting HTML tags like < td>(if any)
function combotext_onkeydown(e,oText){
keyCode = e.keyCode;
var i = oText.id.lastIndexOf("_") + 1;
var oSelect = document.getElementById(oText.id.substring(0, i)+"selectInput");
oSelect.style.width = oText.offsetWidth + " px";
oSelect.style.top = oText.offsetParent.offsetTop + 27 + " px";
oSelect.style.left = oText.offsetParent.offsetLeft + " px";
if (keyCode == 40 || keyCode == 38) {
oSelect.style.display = 'block';
oSelect.focus();
comboselect_onchange(oSelect, oText);
}
else if (keyCode == 13) {
e.cancelBubble = true;
if (e.returnValue) e.returnValue = false;
if (e.stopPropagation) e.stopPropagation();
comboselect_onchange(oSelect, oText);
oSelect.style.display='none';
oText.focus();
return false;
}
else if(keyCode == 9) return true;
else {
oSelect.style.display = 'block';
var c = String.fromCharCode(keyCode);
c = c.toUpperCase();
toFind = oText.value.toUpperCase() + c;
for (i=0; i < oSelect.options.length; i++) { try{ nextOptionText = oSelect.options.text.toUpperCase(); if(toFind == nextOptionText){ oSelect.selectedIndex = i; break; } if(i < oSelect.options.length-1){ lookAheadOptionText = oSelect.options[i+1].text.toUpperCase() ; if( (toFind > nextOptionText) &&
(toFind < lookAheadOptionText) ){ oSelect.selectedIndex = i+1; break; } } else { if(toFind > nextOptionText){
oSelect.selectedIndex = oSelect.options.length-1; // stick it at the end
break;
}
}
}
catch(e)
{
}
}
}
}
function comboselect_onchange(oSelect) {
if(oSelect.selectedIndex != -1)
{
var i = oSelect.id.lastIndexOf("_") + 1;
var oText = document.getElementById(oSelect.id.substring(0, i)+"txtComponentPart");
oText.value = oSelect.options[oSelect.selectedIndex].text;
}
}
function comboselect_onkeyup(keyCode,oSelect){
if (keyCode == 13) {
var i = oSelect.id.lastIndexOf("_") + 1;
var oText = document.getElementById(oSelect.id.substring(0, i)+"txtComponentPart");
comboselect_onchange(oSelect, oText);
oSelect.style.display = 'none';
oText.focus();
}
}
function HideListBox(oText)
{
var i = oText.id.lastIndexOf("_") + 1;
var oSelect = document.getElementById(oText.id.substring(0, i)+"selectInput");
oSelect.style.display = 'none'
}
HTML PART
< DIV style="OVERFLOW: auto; BORDER-LEFT: ivory 1px; WIDTH: 50%; BORDER-BOTTOM: ivory 1px; POSITION: relative; HEIGHT: 400px; BACKGROUND-COLOR: white">
< asp:datagrid id="dgToolTrans" runat="server" AutoGenerateColumns="False">
< HeaderStyle CssClass="DataGridFixedHeader">
< Columns>
< asp:TemplateColumn HeaderText="Component Partdd">
< ITEMTEMPLATE>
< table>
< tr>
< td>
< asp:TextBox ID="Textbox17" Runat="server">
< td>
< asp:TextBox ID="Textbox18" Runat="server">
< td>
< asp:TextBox ID="Textbox19" Runat="server">
< td>
< asp:TextBox ID="Textbox20" Runat="server">
< td>
< asp:TextBox ID="Textbox21" Runat="server">
< td>
< asp:TextBox ID="Textbox22" Runat="server">
< td>
< asp:TextBox ID="Textbox23" Runat="server">
< td>
< asp:TextBox ID="Textbox24" Runat="server">
< asp:TemplateColumn HeaderText="Component Part">
< ITEMTEMPLATE>
< asp:TextBox ID="txtComponentPart" Runat="server" ONKEYDOWN="combotext_onkeydown(event, this)" onClick="javascript:HideListBox(this)">
< asp:ListBox ID="selectInput" Runat="server" CssClass="ddlist" ONBLUR="this.style.display='none'" ONCHANGE="comboselect_onchange(this)" ONKEYUP="comboselect_onkeyup(event.keyCode, this)" onClick="this.style.display='none'">
Kansas City
Overland Park
St. Louis
< /DIV >
Combobox inside Datagrid ASP.net 1.1
Next Recommended Reading
Display CheckBoxes Inside a Dropdown List using ASP.NET