Combobox inside Datagrid ASP.net 1.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 >