This is a migrated thread and some comments may be shown as answers.

RadMenu in RadGrid is hiding under other cells

4 Answers 161 Views

Grid

This is a migrated thread and some comments may be shown as answers.

4 Answers, 1 is accepted

answered on 18 Jan 2011, 03:20 PM

Here is the page showing the scenario. There is a similar RadMenu right under the grid just to show you how it should look when expanded. Also notice that RadAjaxPanel is not working. Please advice on how to fix that as well:

Here is the code:

<body>

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

<telerik:RadScriptManager ID="ScriptManager1" EnablePageMethods="true" runat="server" />

<telerik:RadWindowManager ID="RadWindowManager1" runat="server">

</telerik:RadWindowManager>

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

<script type="text/javascript">

<!--

function pageLoad(sender, eventArgs)

{

var tableView = $find("<%= RadGrid1.ClientID %>").get_masterTableView();

$find("<%= RadAjaxLoadingPanel1.ClientID %>").show("<%= RadGrid1.ClientID %>");

PageMethods.GetData(1,5,30,updateGrid);

updateVirtualItemCount('193')

}

function updateGrid(result)

{

var tableView = $find("<%= RadGrid1.ClientID %>").get_masterTableView();

tableView.set_dataSource(result);

tableView.dataBind();

$find("<%= RadAjaxLoadingPanel1.ClientID %>").hide("<%= RadGrid1.ClientID %>");

}

function updateVirtualItemCount(result)

{

var tableView = $find("<%= RadGrid1.ClientID %>").get_masterTableView();

tableView.set_virtualItemCount(result);

}

function RadGrid1_RowDataBound(sender, args)

{

var itemiconimageurl = "http://74.127.52.74/Media/Product/" + args.get_dataItem()["itemid"] + "/Photo/itemphoto_" + args.get_dataItem()["itemid"] + "__0_icon_list.jpg";

var lbl = args.get_item().findElement("lblProductImage");

lbl.innerHTML = "<img class='photoFrame' src='" + itemiconimageurl + "'/>";

lbl = args.get_item().findElement("lblTitle");

lbl.innerHTML = args.get_dataItem()["title"];

lbl = args.get_item().findElement("lblLinks");

lbl.innerHTML = "<a href='#' class='highlite2' onclick=''>Edit</a> | <a href='#' class='highlite2' onclick='javascript:DeleteProduct(" + args.get_dataItem()["itemid"] + ")'>Delete</a>";

}

function RadGrid1_Command(sender, args)

{

args.set_cancel(true);

var pageSize = sender.get_masterTableView().get_pageSize();

var currentPageIndex = sender.get_masterTableView().get_currentPageIndex();

PageMethods.GetData(currentPageIndex+1, pageSize, 30, updateGrid);

}

function DeleteProduct(id) {

alert(id);

radconfirm('Are you sure you want to delete this product?' , confirmCallBackDelete, 500, 90, null, 'Confirm Product Delete');

}

-->

function confirmCallBackDelete(){}

</script>

</telerik:RadCodeBlock>

<div>

<telerik:RadGrid ID="RadGrid1" EnableViewState="false" runat="server" CssClass="radZLowest" PageSize="5" ShowStatusBar="true" Width="750px" Skin="Windows7" AllowPaging="true" AllowSorting="True" GridLines="None" AllowMultiRowSelection="True">

<itemstyle wrap="false" />

<mastertableview allowmulticolumnsorting="true" tablelayout="Fixed">

<Columns>

<telerik:GridClientSelectColumn UniqueName="SelectColumn">

<HeaderStyle Width="30px" />

</telerik:GridClientSelectColumn>

<telerik:GridTemplateColumn>

<ItemTemplate>

<asp:Label ID="lblProductImage" runat="server" Text="Label"></asp:Label>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderText="Product Name" SortExpression="title" UniqueName="Product Name">

<ItemTemplate>

<asp:Label ID="lblTitle" runat="server" Text="Label"></asp:Label>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridNumericColumn DataField="category" HeaderText="Category" HeaderStyle-Width="100px"/>

<telerik:GridNumericColumn DataField="unitprice" HeaderText="Price" />

<telerik:GridNumericColumn DataField="quantity" HeaderText="Quantity" />

<telerik:GridNumericColumn DataField="status" HeaderText="Status"/>

<telerik:GridTemplateColumn HeaderText="Manage" UniqueName="Actions">

<ItemTemplate>

<asp:Label ID="lblLinks" runat="server"></asp:Label>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderText="Manage" UniqueName="Actions">

<ItemTemplate>

<telerik:RadMenu ID="RadMenu1" style="z-index:9000;" runat="server">

<Items>

<telerik:RadMenuItem runat="server" CssClass="radMenuHighZIndex" Text="Actions">

<Items>

<telerik:RadMenuItem runat="server" CssClass="radMenuHighZIndex" Text="Complete Product">

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" CssClass="radMenuHighZIndex" Text="Edit Product">

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" CssClass="radMenuHighZIndex" Text="Add Similar Product">

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" CssClass="radMenuHighZIndex" Text="Delete Product">

</telerik:RadMenuItem>

</Items>

<GroupSettings ExpandDirection="Left" OffsetX="3" OffsetY="-1" />

</telerik:RadMenuItem>

</Items>

</telerik:RadMenu>

</ItemTemplate>

</telerik:GridTemplateColumn>

</Columns>

</mastertableview>

<pagerstyle mode="NextPrevAndNumeric"></pagerstyle>

<clientsettings>

<ClientEvents OnCommand="RadGrid1_Command" OnRowDataBound="RadGrid1_RowDataBound"/>

<Selecting AllowRowSelect="true" EnableDragToSelectRows="true" />

</clientsettings>

</telerik:RadGrid>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" />

</div>

<br />

<telerik:RadMenu ID="RadMenu1" style="z-index: 9000;" runat="server">

<items>

<telerik:RadMenuItem runat="server" CssClass="radMenuHighZIndex" Text="Actions">

<Items>

<telerik:RadMenuItem runat="server" CssClass="radMenuHighZIndex" Text="Complete Product">

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" CssClass="radMenuHighZIndex" Text="Edit Product">

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" CssClass="radMenuHighZIndex" Text="Add Similar Product">

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" CssClass="radMenuHighZIndex" Text="Delete Product">

</telerik:RadMenuItem>

</Items>

<GroupSettings ExpandDirection="Left" OffsetX="3" OffsetY="-1" />

</telerik:RadMenuItem>

</items>

</telerik:RadMenu>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

<ajaxsettings>

<telerik:AjaxSetting AjaxControlID="RadGrid1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />

</UpdatedControls>

</telerik:AjaxSetting>

</ajaxsettings>

<clientevents />

</telerik:RadAjaxManager>

</form>

</body>