There is a column "ZipCode" in gridview.
Is it possible to apply javascript mouse over feature to this column?
Doing so, once user move mouse over a cell under "ZipCode" city name will be
displayed.
For example, if cell is "11350" the city name "Flusing" will display.
--
Message posted via DotNetMonster.comhttp://www.dotnetmonster.com/Uwe/Forums.aspx/asp-net-datagrid/200908/1
You can try to do it in the following way.
Add a hidden div container to the end of your aspx page.
<div id="tooltip" style="visibility: hidden; display: none; position:
absolute; border: 1px solid black;background-color: #ffffcc; padding:
5px;">
</div>
It will be used to show a name of a city.
Then add a javascript to show that div:
<script language="Javascript">
function show(t, e) {
x = document.getElementById('tooltip');
if (x == null) return;
x.style.visibility = "visible";
x.style.display = "block";
var ScrollTop = document.body.scrollTop;
if (ScrollTop == 0) {
if (window.pageYOffset)
ScrollTop = window.pageYOffset;
else
ScrollTop = (document.body.parentElement) ?
document.body.parentElement.scrollTop : 0;
}
x.style.top = e.clientY + ScrollTop + 10;
x.style.left = e.clientX + document.body.scrollLeft + 15;
x.innerHTML = t;
}
function hide() {
x = document.getElementById('tooltip');
if (x == null) return;
x.style.visibility = "hidden";
x.style.display = "none";
}
</script>
Now, change your gridview
<asp:TemplateColumn>
<ItemTemplate>
<div onmouseover="show(<%# " ' " + DataBinder.Eval
(Container.DataItem,"CityName") + " ' " %>,event)"
onmouseout="hide()"><%#
DataBinder.Eval(Container.DataItem, "ZipCode")%>
</div>
</ItemTemplate>
</asp:TemplateColumn>
As you may see, the show() function has two arguments - t and e, where
t - is a name of the CityName column. Change it to the name of your
column.
Hope this helps