DotNetOcean: Showing gridview as tooltip of a row in gridview(using modal popUp)

Tuesday, December 20

Showing gridview as tooltip of a row in gridview(using modal popUp)

Hi,
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";            

        }
</script>
<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>
</body>

Labels

Tuesday, December 20

Showing gridview as tooltip of a row in gridview(using modal popUp)

No comments:

Post a Comment

.