WebCallOut is tightly integrated with WebGrid.
This topic will show you how to integrate with WebGrid.
To integrate with WebGrid
- Drag WebGrid and WebCallOut controls to the WebForm.
- Create a cell template by setting ColumnType to Template.
- Place an ASP.NET Label control and add onmouseover event like following.
<CellTemplate>
<asp:Label ID="Label1" runat="server" Text="Label" ToolTip=""
onmouseover="return ShowWebCallOut(this)"></asp:Label>
</CellTemplate>
- Now, put the following code in InitializeRow server-side event in order to initialize
data when WebGrid first loads.
protected void WebGrid1_InitializeRow(object sender, ISNet.WebUI.WebGrid.RowEventArgs e)
{
WebGridRow row = (WebGridRow)e.Row;
WebGridCellTemplateContainer cell = row.Cells.GetNamedItem("Email").GetTemplateContainer();
Label lbl = (Label)cell.FindControl("Label1");
lbl.Text = "" + e.Row.Cells.GetNamedItem("FirstName").Text; ";
}
|
- Create ShowWebCallOut() function in client-side to show WebCallOut
in WebGrid.
function ShowWebCallOut(WebGridLabel)
{
var callout = ISGetObject("WebCallOut1");
var targetId = document.getElementById(WebGridLabel.id);
var calloutContent = callout.GetContentElement();
window.setTimeout(function() {callout.ShowAutoDetect(targetId, true);}, 700);
}
|
- Run the project.