I'm trying to place a Context Menu bound to a Grid.
This context is going to have only one item, that is to delete the right-clicked row..
The grid allows insert, Full Row Mode is set to false.
When I had success showing the Context Menu, when I click, it didn't returned the correct row index.
After that, when i could get the row index, the standard windows context menu shows over mine. and I cound't click it...
below is the javascript and html used...
Code: JavaScript
var g_itemIndex = -1;
var g_cellIndex = -1;
function ShowContextMenu(e, grid, item, cell)
{
//Save the target cell index
g_itemIndex = item.getIndex();
g_cellIndex = cell.getColIndex();
//Show the context menu
var menu = eo_GetObject("<%=cmCont.ClientID%>");
eo_ShowContextMenu(e, "<%=cmCont.ClientID%>");
//Return true to indicate that we have
//displayed a context menu
return true;
}
function cmCont_OnItemClick(e, eventInfo)
{
var grid = eo_GetObject("<%= grCont.ClientID %>");
var item = eventInfo.getItem();
//Párar edição
grid.editCell(-1);
//Apagar
grid.deleteItem(g_itemIndex);
}
Code: HTML/ASPX
<eo:Grid ID="grCont" runat="server" AllowNewItem="True" BorderColor="Black" BorderWidth="1px"
ColumnHeaderAscImage="00050403" ColumnHeaderDescImage="00050404" ColumnHeaderDividerImage="00050402"
ColumnHeaderDividerOffset="6" ColumnHeaderHeight="18" FixedColumnCount="1" Font-Bold="False"
Font-Italic="False" Font-Names="Verdana" Font-Overline="False" Font-Size="9pt"
Font-Strikeout="False" Font-Underline="False" FullRowMode="False" GridLineColor="240, 240, 240"
GridLines="Both" Height="200px" ItemHeight="18" Width="700px" KeyField="MoCoCodi" ClientSideOnContextMenu="ShowContextMenu">
<FooterStyle CssText="padding-bottom:4px;padding-left:4px;padding-right:4px;padding-top:4px;" />
<ItemStyles>
<eo:GridItemStyleSet>
<ItemStyle CssText="background-color: white" />
<CellStyle CssText="padding-left:8px;padding-top:2px; color:#black;white-space:nowrap;" />
</eo:GridItemStyleSet>
</ItemStyles>
<ColumnTemplates>
<eo:TextBoxColumn>
<TextBoxStyle CssText="BORDER-RIGHT: #7f9db9 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7f9db9 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 8.75pt; PADDING-BOTTOM: 1px; MARGIN: 0px; BORDER-LEFT: #7f9db9 1px solid; PADDING-TOP: 2px; BORDER-BOTTOM: #7f9db9 1px solid; FONT-FAMILY: Tahoma" />
</eo:TextBoxColumn>
<eo:DateTimeColumn>
<DatePicker ControlSkinID="None" DayCellHeight="16" DayCellWidth="19" DayHeaderFormat="FirstLetter"
DisabledDates="" OtherMonthDayVisible="True" SelectedDates="" TitleLeftArrowImageUrl="DefaultSubMenuIconRTL"
TitleRightArrowImageUrl="DefaultSubMenuIcon">
<TodayStyle CssText="font-family: tahoma; font-size: 12px; border-right: #bb5503 1px solid; border-top: #bb5503 1px solid; border-left: #bb5503 1px solid; border-bottom: #bb5503 1px solid" />
<SelectedDayStyle CssText="font-family: tahoma; font-size: 12px; background-color: #fbe694; border-right: white 1px solid; border-top: white 1px solid; border-left: white 1px solid; border-bottom: white 1px solid" />
<DisabledDayStyle CssText="font-family: tahoma; font-size: 12px; color: gray; border-right: white 1px solid; border-top: white 1px solid; border-left: white 1px solid; border-bottom: white 1px solid" />
<PickerStyle CssText="border-bottom-color:#7f9db9;border-bottom-style:solid;border-bottom-width:1px;border-left-color:#7f9db9;border-left-style:solid;border-left-width:1px;border-right-color:#7f9db9;border-right-style:solid;border-right-width:1px;border-top-color:#7f9db9;border-top-style:solid;border-top-width:1px;font-family:Courier New;font-size:8pt;margin-bottom:0px;margin-left:0px;margin-right:0px;margin-top:0px;padding-bottom:1px;padding-left:2px;padding-right:2px;padding-top:2px;" />
<CalendarStyle CssText="background-color: white; border-right: #7f9db9 1px solid; padding-right: 4px; border-top: #7f9db9 1px solid; padding-left: 4px; font-size: 9px; padding-bottom: 4px; border-left: #7f9db9 1px solid; padding-top: 4px; border-bottom: #7f9db9 1px solid; font-family: tahoma" />
<TitleArrowStyle CssText="cursor:hand" />
<DayHoverStyle CssText="font-family: tahoma; font-size: 12px; border-right: #fbe694 1px solid; border-top: #fbe694 1px solid; border-left: #fbe694 1px solid; border-bottom: #fbe694 1px solid" />
<MonthStyle CssText="font-family: tahoma; font-size: 12px; margin-left: 14px; cursor: hand; margin-right: 14px" />
<TitleStyle CssText="background-color:#9ebef5;font-family:Tahoma;font-size:12px;padding-bottom:2px;padding-left:6px;padding-right:6px;padding-top:2px;" />
<OtherMonthDayStyle CssText="font-family: tahoma; font-size: 12px; color: gray; border-right: white 1px solid; border-top: white 1px solid; border-left: white 1px solid; border-bottom: white 1px solid" />
<DayHeaderStyle CssText="font-family: tahoma; font-size: 12px; border-bottom: #aca899 1px solid" />
<DayStyle CssText="font-family: tahoma; font-size: 12px; border-right: white 1px solid; border-top: white 1px solid; border-left: white 1px solid; border-bottom: white 1px solid" />
</DatePicker>
</eo:DateTimeColumn>
<eo:MaskedEditColumn>
<MaskedEdit ControlSkinID="None" TextBoxStyle-CssText="BORDER-RIGHT: #7f9db9 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7f9db9 1px solid; PADDING-LEFT: 2px; PADDING-BOTTOM: 1px; MARGIN: 0px; BORDER-LEFT: #7f9db9 1px solid; PADDING-TOP: 2px; BORDER-BOTTOM: #7f9db9 1px solid; font-family:Courier New;font-size:8pt;">
</MaskedEdit>
</eo:MaskedEditColumn>
</ColumnTemplates>
<Columns>
<eo:RowNumberColumn Width="20">
</eo:RowNumberColumn>
<eo:TextBoxColumn DataField="MoCoCont" HeaderText="Contato" Width="170">
</eo:TextBoxColumn>
<eo:TextBoxColumn DataField="MoCoDepa" HeaderText="Departamento" Width="120">
</eo:TextBoxColumn>
<eo:TextBoxColumn DataField="MoCoMail" HeaderText="E-mail" Width="180">
</eo:TextBoxColumn>
<eo:MaskedEditColumn DataField="MoCoFone" HeaderText="Telefone">
<MaskedEdit ControlSkinID="None">
<eo:MaskedEditSegment Choices="" IsRequired="True" Mask="(99) 9999-9999" SegmentType="Mask" />
</MaskedEdit>
</eo:MaskedEditColumn>
<eo:TextBoxColumn DataField="MoCoRadi" HeaderText="Nextel">
</eo:TextBoxColumn>
</Columns>
<ColumnHeaderStyle CssText="background-image:url('00050401');padding-left:8px;padding-top:2px;" />
</eo:Grid>
<eo:ContextMenu ID="cmCont" runat="server" ClientSideOnItemClick="cmCont_OnItemClick"
ControlSkinID="None"
SubMenuIconUrl="Blank" Width="120px" AutoSelectSource="ItemClick" EnableScrolling="True">
<LookItems>
<eo:MenuItem HoverStyle-CssText="BORDER-RIGHT: #9c9a9c 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #9c9a9c 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; BORDER-LEFT: #9c9a9c 1px solid; COLOR: #9c6500; PADDING-TOP: 2px; BORDER-BOTTOM: #9c9a9c 1px solid; BACKGROUND-COLOR: #efefef"
ItemID="_Default" LeftIcon-HoverUrl="Triangle1" LeftIcon-SelectedUrl="Blank"
LeftIcon-Url="Blank" NormalStyle-CssText="BORDER-RIGHT: #9c9a9c 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #9c9a9c 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; BORDER-LEFT: #9c9a9c 1px solid; COLOR: #003000; PADDING-TOP: 2px; BORDER-BOTTOM: #9c9a9c 1px solid; BACKGROUND-COLOR: #efefef"
SelectedStyle-CssText="BORDER-RIGHT: #003000 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #003000 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; BORDER-LEFT: #003000 1px solid; COLOR: white; PADDING-TOP: 2px; BORDER-BOTTOM: #003000 1px solid; BACKGROUND-COLOR: #316531">
<SubMenu ItemSpacing="1" LeftIconCellWidth="7" ShadowDepth="0" Style-CssText="PADDING-RIGHT: 2px; PADDING-LEFT: 2px; FONT-SIZE: 8pt; PADDING-BOTTOM: 2px; CURSOR: hand; COLOR: #003000; BORDER-TOP-STYLE: none; PADDING-TOP: 2px; FONT-FAMILY: Verdana; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BACKGROUND-COLOR: transparent; BORDER-BOTTOM-STYLE: none">
</SubMenu>
</eo:MenuItem>
</LookItems>
<TopGroup Orientation="Vertical">
<Items>
<eo:MenuItem Text-Html="Apagar">
</eo:MenuItem>
</Items>
</TopGroup>
</eo:ContextMenu>
It's all place inside a MultiPage / PageView, inside a MSAjax UpdatePanel.
Using VB.NET; Framework 2.0.