Setting A Tooltip For A Specific Cell Using Conditional Formatting

yudi — Mon, 07 Mar 2011 03:48:38 GMT

We have a sample that shows how to integrate WebCallOut into WebGrid. You can check the live sample at http://live.intersoftpt.com/cs/WebDesktop/WebCallOut/WebCallOutAndWebGrid.aspx. The sample also available in (assumed that you have installed Intersoft WebUI Studio) WebDesktopSamples project. Please point your mouse to start > All Programs > Intersoft WebUI Studio 2010 R2 > WebUI Studio for ASP.NET > WebDesktop 3 > C# Samples (Visual Studio 2010 Solution). The sample file is WebCallOutAndWebGrid.aspx. It is located inside the WebCallOut folder.

The step-by-step below shows how to integrate WebCallOut into 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 like following.

<ISWebGrid:WebGridColumn ColumnType="Template" Name="Email" Caption="FirstName" Width="100px">
    <CellTemplate>
        <asp:Label ID="Label1" runat="server" Text="Label" ToolTip="" OnMouseOver="return ShowWebCallOut(this)"></asp:Label>
    </CellTemplate>
</ISWebGrid:WebGridColumn>

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; // +"@gmail.com";
}

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();
            
    var span;
    var text;
            
    if (IS.ie)
    {
        span = calloutContent.childNodes[0].rows[1].cells[0].childNodes[0].rows[0].cells[0].childNodes[0]
        text = calloutContent.childNodes[0].rows[1].cells[0].childNodes[0].rows[0].cells[0].childNodes[2]
    }
    else
    {
        span = calloutContent.childNodes[1].rows[1].cells[0].childNodes[1].rows[0].cells[0].childNodes[1];
        text = calloutContent.childNodes[1].rows[1].cells[0].childNodes[1].rows[0].cells[0].childNodes[3];
    }
            
    span.innerText = WebGridLabel.innerText;
    text.nodeValue = WebGridLabel.innerText + "@gmail.com";
    window.setTimeout(function() {callout.ShowAutoDetect(targetId, true);}, 700); 
}

Hope this helps.

Setting A Tooltip For A Specific Cell Using Conditional Formatting

NK1958 — Sat, 05 Mar 2011 22:09:18 GMT

Hello InterSoft,

I would like to set a formatted tooltip that looks like a table using a webcallout object. My grid layout populated dinamically from xml file. I have attached a sample from Niven Prasetya which show how to do it if columns are created in aspx file. How to reproduce it using C# code. Please provide a sample.

I try to do this but it doesn't work:

foreach (WebGridColumn column in grid.RootTable.Columns)

{

if (column.Name == "TICKER")

column.ColumnType = ColumnType.Template;

}



protected void Grid_InitRow(object sender, ISNet.WebUI.WebGrid.RowEventArgs e)

{

if (e.Row.Cells.GetNamedItem("TICKER") != null)

{

WebGridCellTemplateContainer cell = e.Row.Cells.GetNamedItem("TICKER").GetTemplateContainer();

Label lbl = new Label();

lbl.Text = e.Row.Cells.GetNamedItem("TICKER").Text + " Test";

lbl.Attributes.Add("onmouseover", "ShowWebCallOut()");

cell.Controls.Add(lbl);

}

Intersoft Community - WebGrid Enterprise - Setting A Tooltip For A Specific Cell Using Conditional Formatting

Setting A Tooltip For A Specific Cell Using Conditional Formatting

Setting A Tooltip For A Specific Cell Using Conditional Formatting