Intersoft Support Center

Integrate to WebGrid

WebCallOut is tightly integrated with WebGrid.

This topic will show you how to integrate with WebGrid.

To integrate with WebGrid

  1. Drag WebGrid and WebCallOut controls to the WebForm.
  2. Create a cell template by setting ColumnType to Template.
  3. Place an ASP.NET Label control and add onmouseover event like following.

       <asp:Label ID="Label1" runat="server" Text="Label" ToolTip="" onmouseover="return ShowWebCallOut(this)"></asp:Label>

  4. Now, put the following code in InitializeRow server-side event in order to initialize data when WebGrid first loads.
    C# Copy ImageCopy Code
    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; ";

  5. Create ShowWebCallOut() function in client-side to show WebCallOut in WebGrid.
    JavaScript Copy ImageCopy Code
    function ShowWebCallOut(WebGridLabel)
       var callout = ISGetObject("WebCallOut1");
       var targetId = document.getElementById(;
       var calloutContent = callout.GetContentElement();
       window.setTimeout(function() {callout.ShowAutoDetect(targetId, true);}, 700); 

  6. Run the project.
Previous Next