Gridview in a Tooltip_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2022-12-22 05:08 出处：网络

Is there a way to display a gridv开发者_StackOverflow中文版iew in a tooltip?In the standard tooltip no, but you\'d have to write your own tool tip class to accomplish this.If you are using jquery you

相关专题：asp.net jquery

Is there a way to display a gridv开发者_StackOverflow中文版iew in a tooltip?

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

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

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.

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

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>

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;
        }
    }
}