How to onmouseover show/hide visibility of items/table in telerik grid

[Aman]

Hi there,

I'm bit new to telerik controls.

I need to achieve functionality of toggling the visibility of a table in <itemTemplate> column, normally table should be hidden but when we mouseover on the row the edit options table should appear.

below is the code and i've commented the section i need to toggle on mouseover
-----------------------------code------------------------------------------
  <telerik:GridTemplateColumn>            
                               <ItemTemplate>               
                 <table align="left" border="0" cellpadding="0" cellspacing="0" >
                                    <tr>
                                        <td id="tddetails" runat="server" valign="middle" align="center" width="5%">
                                            <asp:CheckBox ID="CheckBoxAssetID"  runat="server" style="display:none;"/>
                                           <input id="grdRdo" name="grdRdo" type="radio" runat="server" disabled="disabled" visible="false"  value='<%# Eval("DocumentID") %>' onclick="fnCheckUnCheck(this.id);" /> 
                                         
                                            <asp:Label ID="LabelAssetID" runat="server" Visible="false" Text='<%# DataBinder.Eval(Container.DataItem, "AssetID")%>'></asp:Label>
                                            <asp:Label ID="LabelAssetName" runat="server" Visible="false" Text='<%# DataBinder.Eval(Container.DataItem, "Name")%>'></asp:Label>
                                 
                </td>
                                        <td width="22%" align="center">
                                            <asp:Image ID="ImagePreview" runat="server" lowsrc="../images/COMMON/BUTTONS/wait20.gif"
                                                AlternateText="&nbsp;&nbsp;&nbsp;" CssClass="myassetsimg" />
                                        </td>
                                        <td width="47%">
                                            <table width="170" cellpadding="0" cellspacing="0" align="left">
                                                <tr>
                                                    <td align="left">
                                                        <asp:Label ID="LabelDescription" runat="server" CssClass="myassets_description"></asp:Label>
                                                    </td>
                                                </tr>
                                            </table>
                                        </td>
                                        <td valign="middle" width="35%" align="left">
      <!-- Need to toggle this table "tblCMenu" on mouseover-->
                                            <table name="tblCMenu" id="tblCMenu" runat="server"  cellpadding="0" cellspacing="0" border="0"  >
                                                <tr >
                                                    <td width="40" valign="middle" align="center">
                                                        <asp:Literal ID="litPreview" runat="server" Text="" Visible="false"> </asp:Literal>
                                                        <asp:ImageButton ID="btnFlodocs" runat="server" AlternateText="preview1" ImageUrl=""
                                                            OnClick="btnFlodocs_Click" CausesValidation="false"  Visible="false" />
                                                    </td>
                                                    <td width="40" valign="middle" align="center">
                                                        <asp:ImageButton ID="btnRename" CssClass="imageButton" AlternateText="Rename" runat="server" SkinID="btnLibPencil"
                                                            OnClick="btnRename_Click" CausesValidation="false"
                                                            ToolTip="rename" />
                                                    </td>
                                                      <td  valign="middle" align="center">
                                                        <asp:ImageButton ID="imgDuplicate1" AlternateText="Duplicate" CssClass="imageButton" runat="server" CausesValidation="false" SkinID="btnLibCopy"
                                                            ToolTip="duplicate" Visible="false" OnClick="imgDuplicate_Click" />
                                                    </td>
                                                 
                                                  
                                                    <td width="40" valign="middle" align="center">
                                                        <asp:ImageButton ID="btnDelete" AlternateText="Delete" CssClass="imageButton" runat="server"
                                                            SkinID="btnLibDelete" CausesValidation="false"
                                                            ToolTip="delete" />
                                                    </td>
                                                    <td width="25" valign="middle" align="center">
                                                    <asp:Image ID="imgChecked" runat="server" Visible="false" ToolTip="checked" ImageUrl="/images/COMMON/BUTTONS/25x25CheckMark.gif" />
                                                    </td>
                                                </tr>
                                               <tr ><td>&nbsp;</td>
                                                    <td align="right">
                                                        
                                                           <asp:Label ID="lblQty" runat="server" Visible="false" CssClass="myassets_description" style="text-align:center;" Text="qty:"></asp:Label>&nbsp;
                                                    </td>
                                                     <td  valign="bottom" align="center">
                                                  
                                                        <asp:TextBox ID="txtQty" style="height:17px; color:Black; font-size:14px; padding-right:1px; padding-left:0; padding-bottom:0; padding-top:0; text-align:right;" runat="server" Visible="false"  MaxLength="5" Width="35"></asp:TextBox>
                                                    </td>  
                                                       <td  valign="middle" align="center">
                                                        <asp:ImageButton ID="imgAddToCart1" AlternateText="Add to cart" CssClass="imageButton" runat="server" style="padding-top:6px;"
                                                          CausesValidation="false" SkinID="btnLibCart"
                                                            ToolTip="add to cart" Visible="false"  />
                                                    </td>  
                                                </tr>
                                            </table>
<!--- Till Here  -->
                                        </td>
                                    </tr>                                  
                                </table>                               
                </ItemTemplate>               
</telerik:GridTemplateColumn>
------------------------------------------------------

I hope i can get some constructive solution for this from your side.
One Ques : Is it possible to use dragdrop feature for grid using <itemTemplate> ?

Thanks Aman

[Dimo]

Hi Aman,

You have two options to achieve the desired behavior. Note that the :hover approach is not supported by IE6, while the events approach is not supported if the item template contains a <table> element.

<%@ Page Language="C#" %>
<%@ Import Namespace="System.Data" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<script runat="server">

    protected void RadGrid_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
    {
        DataTable dt = new DataTable();
        DataRow dr;
        int colsNum = 4;
        int rowsNum = 6;
        string colName = "Column";

        for (int j = 1; j <= colsNum; j++)
        {
            dt.Columns.Add(String.Format("{0}{1}", colName, j));
        }

        for (int i = 1; i <= rowsNum; i++)
        {
            dr = dt.NewRow();

            for (int k = 1; k <= colsNum; k++)
            {
                dr[String.Format("{0}{1}", colName, k)] = String.Format("{0}{1} Row{2}", colName, k, i);
            }
            dt.Rows.Add(dr);
        }

        (sender as RadGrid).DataSource = dt;
    }

</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>RadControls</title>
<style type="text/css">

.myWrap
{
    visibility:hidden;
}

.grid2 .rgRow:hover .myWrap,
.grid2 .rgAltRow:hover .myWrap
{
    visibility:visible;
}

</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />

<p>using :hover</p>

<telerik:RadGrid
    ID="RadGrid2"
    runat="server"
    Width="800px"
    CssClass="grid2"
    Skin="Office2007"
    OnNeedDataSource="RadGrid_NeedDataSource">
    <ClientSettings EnableRowHoverStyle="true">
        <Selecting AllowRowSelect="true" />
    </ClientSettings>
    <MasterTableView>
        <Columns>
            <telerik:GridTemplateColumn HeaderText="t">
                <ItemTemplate>
                    <div class="myWrap">hidden content</div>
                </ItemTemplate>
            </telerik:GridTemplateColumn>
        </Columns>
    </MasterTableView>
</telerik:RadGrid>

<p>using events</p>

<telerik:RadGrid
    ID="RadGrid1"
    runat="server"
    Width="800px"
    Skin="Office2007"
    OnNeedDataSource="RadGrid_NeedDataSource">
    <ClientSettings EnableRowHoverStyle="true">
        <Selecting AllowRowSelect="true" />
        <ClientEvents OnRowMouseOver="showContent" OnRowMouseOut="hideContent" OnGridCreated="initializeItems" />
    </ClientSettings>
    <MasterTableView>
        <Columns>
            <telerik:GridTemplateColumn HeaderText="t">
                <ItemTemplate>
                    <div class="myWrap">hidden content</div>
                </ItemTemplate>
            </telerik:GridTemplateColumn>
        </Columns>
    </MasterTableView>
</telerik:RadGrid>

<script type="text/javascript">

function initializeItems(sender, args)
{
    var items = sender.get_masterTableView().get_dataItems();
}

function showContent(sender, args)
{
    toggleContent(sender, args, true);
}

function hideContent(sender, args)
{
    toggleContent(sender, args, false);
}

function toggleContent(sender, args, flag)
{
    var wrapperEl = $telerik.getElementByClassName(args.get_gridDataItem().get_element(), "myWrap", "div");
    if (wrapperEl)
        wrapperEl.style.visibility = flag ? "visible" : "";
}

</script>

</form>
</body>
</html>

Regards,
Dimo
the Telerik team