From last few months I am working on Infragistics controls in asp.net using c#. One of the difficult functionality required to fulfill the requirement was adding context Menu on Infragistics UltraWebGrid, in conjunction with mouse right click.
Example represents two level of menu. When user right-click on the canvas of the UltraWebGrid menu should get generated and default windows right click should be disabled. On click of any of the submenu it opens up with new pop-up window, and passes different parameters using JavaScript.
You should have following as reference to the project
- Infragistics.WebUI.UltraWebNavigator.v3.1
- Infragistics.WebUI.UltraWebGrid.v3
Place UltrawebGrid control on aspx page
Add following code in the inline coding after UltrawebGrid
<ignav:ultrawebmenu id="UltraWebMenu1" runat="server" Height="32px" Width="160px" SubMenuImage="/ig_common/WebNavigator31/ig_menuTri.gif"
WebMenuTarget="PopupMenu" WebMenuStyle="XPClient" ScrollImageBottom="/ig_common/WebNavigator31/ig_menuSilverDown.gif"
FileUrl=" " ScrollImageTopDisabled="/ig_common/WebNavigator31/ig_menuSilverUp_disabled.gif" ScrollImageBottomDisabled="/ig_common/WebNavigator31/ig_menuSilverDown_disabled.gif"
Cursor="Default" ScrollImageTop="/ig_common/WebNavigator31/ig_menuSilverUp.gif" BorderWidth="0px"
TopAligment="Center" XPSpacerImage="/ig_common/WebNavigator31/ig_menu2003SpacerSilver.gif" BorderStyle="Outset"
BorderColor="Black" ItemSpacingTop="0" Font-Names="Verdana" Font-Size="8pt" BackColor="#E0E0E0">
<ItemStyle Height="20px" BorderWidth="0px" BorderColor="Transparent" BorderStyle="Solid"></ItemStyle>
<Styles>
<ignav:Style Cursor="Default" BorderWidth="1px" BorderColor="Black" BorderStyle="Solid" BackColor="LightSkyBlue"
CssClass="TopHover"></ignav:Style>
<ignav:Style BorderWidth="1px" BorderColor="Red" BorderStyle="Solid" ForeColor="Black" BackgroundImage="None"
BackColor="Silver" CssClass="TopClass"></ignav:Style>
</Styles>
<DisabledStyle ForeColor="LightGray"></DisabledStyle>
<HoverItemStyle Cursor="Default" BorderWidth="0px" BorderColor="#A9ABB5" BorderStyle="Solid" ForeColor="Black"
BackColor="#3366ff"></HoverItemStyle>
<IslandStyle Cursor="Default" BorderWidth="1px" Font-Size="8pt" Font-Names="MS Sans Serif" BorderColor="Black"
BorderStyle="Solid" ForeColor="Black" BackColor="#336699">
<BorderDetails ColorTop="White" WidthLeft="1px" ColorBottom="White" WidthTop="1px" ColorRight="Gray"
WidthRight="2px" WidthBottom="2px" ColorLeft="White"></BorderDetails>
</IslandStyle>
<MenuClientSideEvents ItemClick="MenuItem"></MenuClientSideEvents>
<ExpandEffects ShadowColor="Black" Type="Fade"></ExpandEffects>
<TopSelectedStyle BorderWidth="1px" BorderColor="Black" BorderStyle="Solid" ForeColor="Black" BackColor="#003399"></TopSelectedStyle>
<SeparatorStyle Font-Size="2pt" Font-Names="Verdana" BorderColor="Black" BorderStyle="Solid" ForeColor="Black"
BackgroundImage="ig_menuSep.gif" BackColor="MintCream" CustomRules="background-repeat:repeat-x; "></SeparatorStyle>
<Levels>
<ignav:Level LevelHoverClass="TopHover" LevelClass="TopClass" Index="0" LevelCheckBoxes="False"></ignav:Level>
<ignav:Level Index="1" LevelCheckBoxes="False"></ignav:Level>
<ignav:Level Index="2"></ignav:Level>
</Levels>
<Items>
<ignav:Item CheckBox="False" Text="Order Actions">
<Items>
<ignav:Item CheckBox="False" Text="Display Order">
<Style BorderColor="Black" BorderStyle="Dotted">
</Style>
</ignav:Item>
<ignav:Item CheckBox="False" Text="Change Order"></ignav:Item>
</Items>
<Style BackColor="White">
</Style>
</ignav:Item>
<ignav:Item CheckBox="False" Text="Report">
<Items>
<ignav:Item CheckBox="False" Text="Generate Report"></ignav:Item>
</Items>
<Style BackColor="White">
</Style>
</ignav:Item>
</Items>
</ignav:ultrawebmenu>
Rest all will be taken care by the JavaScript
<script language="javascript">
/* Javascript integration with Infragestic Ultrawebgrid & ultrawebnavigator
* GridCellClick(gridName,CellID,button) act as event handler at code behind
* grdOrder.DisplayLayout.ClientSideEvents.CellClickHandler = "GridCellClick";
* while binding data to the grid need to add following code at the code behind
* grdOrder.DisplayLayout.CellClickActionDefault = Infragistics.WebUI.UltraWebGrid.CellClickAction.RowSelect;
*/
var namevalue1;
var status, rowno, Flag;
var cancelmsg_namevalue1;
function GridCellClick(gridName,CellID,button)
{
if(button == 2)
{
var grid = igtbl_getGridById('grdOrder');
var parts = CellID.split("_");
var row1 = parts[1];
var row2 = igtbl_getRowById(CellID);
namevalue1 = row2.getCell(0).getValue();
cancelmsg_namevalue1 = row2.getCell(1).getValue();
rowno = row2.getCell(0).getValue();
igmenu_showMenu('UltraWebMenu1', event);
event.returnValue = false;
}
}
/*
* Code for right click maintenance not allow right click
*/
if (document.all)
{
document.onkeydown = function ()
{
var key_f5 = 116;
if (key_f5==event.keyCode)
{
event.keyCode=0;
alert ("This action is not allowed! Right click on individual frame to refresh.");
return false;
}
}
}
/* End Code here */
/* Function to generate popup when selected particular item id
* Like UltraWebMenu1_1_1,UltraWebMenu1_1_2 for Order actions
* For Report Generate Report UltraWebMenu1_2_1
*/
function MenuItem(menuId, itemId)
{
if(itemId == "UltraWebMenu1_1_1")
{
NewPOPUP("./ChildWindo.aspx?ProductId="+rowno,"FrmChild");
}
if(itemId == "UltraWebMenu1_1_2")
{
NewPOPUP("./ChildWindo.aspx?ProductId="+rowno,"FrmChild");
}
if(itemId == "UltraWebMenu1_2_1")
{
NewPOPUP("./ChildWindo.aspx?ProductId="+rowno,"FrmChild");
}
}
//Common function to open popup window
function NewPOPUP(form,Formname)
{
var settings ="top=150, left=200,toolbar=no,location=no, status=no,menubar=no,
scrollbars=yes,resizable=no,width=550,height=400";
window.open (form,Formname,settings);
}
//Code added for selecting row on mouse over
var GridName = 'grdOrder';
function MouseOver(tableName, itemName, type)
{
if(type == 0)
{
//default function by infragestic
var cell = igtbl_getElementById(itemName);
cell.style.cursor = 'hand';
var parts = itemName.split("_");
var grid = igtbl_getGridById(GridName);
var row = grid.Rows.getRow(parts[1]);
//default function by infragestic
igtbl_selectRow(GridName, row.Element.id, true, true);
}
}
//Code added for selecting row on mouse Out
function MouseOut(tableName, itemName, type)
{
if(type == 0)
{
var parts = itemName.split("_");
var grid = igtbl_getGridById(GridName);
var row = grid.Rows.getRow(parts[1]);
var actrow = igtbl_getActiveRow(GridName);
if (row != actrow)
{
//default function by infragestic
igtbl_selectRow(GridName, row.Element.id, false, true);
}
}
}
</script>
Small piece of program which will take care of grid binding.
Towards the database connectivity I have used Northwind database of SQL-Server.
That's all enjoy !!