CODEWITHSUNDEEP
c#asp.netjquery
CookieMonster
CookieMonster

Reputation: 37

Gridview in a Tooltip

Is there a way to display a gridview in a tooltip?

Upvotes: 1

Views: 1408

Answers (6)

Venki Chikkanti
Venki Chikkanti

Reputation: 21

Yes, you can get the tooltip in ASP.net grid view. See the below code, which should be included in the GridView1_RowDataBound event:

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e) {
    if (e.Row.RowType == DataControlRowType.Header) {
        for (int i = 0; i < GridView1.Columns.Count; i++) {
            e.Row.Cells[i].ToolTip = GridView1.Columns[i].HeaderText;
        }
    }
}

Upvotes: 0

ebbicsku
ebbicsku

Reputation: 61

i am using VS2010 and in VS 2012 intellisense is showing tooltip option in Designer page.

Upvotes: 1

None
None

Reputation: 5670

You can use ModalPopup to achieve it and use JavaScript to show it dynamically. Please try the below sample:

<script type="text/javascript">

    function getTop(e)
    { 
        var offset=e.offsetTop; 
        if(e.offsetParent!=null) offset+=getTop(e.offsetParent);
        return offset; 
    } 
    function getLeft(e)
    { 
        var offset=e.offsetLeft; 
        if(e.offsetParent!=null) offset+=getLeft(e.offsetParent);
        return offset; 
    } 
    function hideModalPopupViaClient()
    {
        var modalPopupBehavior = $find('ModalPopupExtender');
        modalPopupBehavior.hide();
    }
    function showModalPopupViaClient(control,id) {


        $get("inputBox").innerText="You choose the item "+control.innerHTML;

        var modalPopupBehavior = $find('ModalPopupExtender');
        modalPopupBehavior.show();           
        $get(modalPopupBehavior._PopupControlID).style.left=getLeft($get('<%=DataList1.ClientID %>'))+ $get('<%=DataList1.ClientID %>').offsetWidth+"px";
        $get(modalPopupBehavior._PopupControlID).style.top=getTop(control)+"px";            

    }


<body>
<form id="form1" runat="server">

<ajaxToolkit:ToolkitScriptManager runat="Server" ID="ScriptManager1" />
<input id="Hidden1" runat="server" type="hidden" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>    
    <asp:DataList ID="DataList1" runat="server" DataSourceID="SqlDataSource1" >
    <ItemTemplate>     
        <div style="border-color:Black;border-width:1px;border-style:solid;">
            <asp:Label ID="Label1" Text='<%# Eval("CategoryID") %>' runat="server"></asp:Label>  
            <asp:HyperLink ID="detail" runat="server" onmouseout="hideModalPopupViaClient()" onmouseover="showModalPopupViaClient(this)">'<%# Eval("CategoryID") %>'</asp:HyperLink>
        </div>  
    </ItemTemplate>
    </asp:DataList>        
    </ContentTemplate> 
</asp:UpdatePanel>


<asp:SqlDataSource ID="SqlDataSource1" runat="server"         ConnectionString="<%$ ConnectionStrings:ConnectionString %>"         SelectCommand="SELECT * FROM [Categories]"></asp:SqlDataSource>
    <asp:Button runat="server" ID="showModalPopupClientButton" style="display:none"/>

    <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender" runat="server"             TargetControlID="showModalPopupClientButton"
        PopupControlID="programmaticPopup"             RepositionMode="None" 
        />
    <br />

    <div CssClass="modalPopup" id="programmaticPopup" style="background-color:#EEEEEE;      filter:alpha(opacity=70);opacity:0.7;display:none;width:50px;padding:10px">
        <span id="inputBox" ></span>


       <br />
    </div>

</form>

Upvotes: 0

bpeterson76
bpeterson76

Reputation: 12870

I use QTip in a lot of apps, but I'm not sure this is the best solution.....it's a lot of overhead if this is all you're using it for, and it's really very straightforward to do it from scratch. I'd treat it as a simple tab pane that is toggled by Jquery, using a $(element).show() to make it show.

Here's a tut along those lines: http://spyrestudios.com/how-to-create-a-sexy-vertical-sliding-panel-using-jquery-and-css3/

As an aside, while I know .net has some gridviews available, I'm in love with additional functionality that datatables provides. Far and away, this is the one JQuery plugin that my clients cite as adding true value to their apps.

Upvotes: 1

Jon
Jon

Reputation: 6056

If you are using jquery you could do this using the QTip Plugin .

Upvotes: 1

JonH
JonH

Reputation: 33183

In the standard tooltip no, but you'd have to write your own tool tip class to accomplish this.

Upvotes: 2

Related Questions