Welcome Guest Search | Active Topics | Sign In | Register

Essential Objects Product Support Forum » All Products » Support » Adding items to contextmenu through javascript

Adding items to contextmenu through javascript Options
Previous Topic · Next Topic
bskumar
Posted: Tuesday, November 3, 2009 8:21:04 AM
Rank: Member
Groups: Member

Joined: 9/22/2009
Posts: 24
Hi,

How to add items to context-menu through javascript.

Thanks,
Kumar.
Back to top
 
eo_support
Posted: Tuesday, November 3, 2009 6:22:04 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Hi,

You can not do that. You can only show/hide an item with JavaScript.

Thanks
Back to top
 
bskumar
Posted: Wednesday, November 4, 2009 8:12:35 AM
Rank: Member
Groups: Member

Joined: 9/22/2009
Posts: 24
Hi,

thanks for quick reply.We are thought that adding context menu to DateTimeColumn.DatePicker.

Regards,
Kumar.
Back to top
 
eo_support
Posted: Saturday, November 7, 2009 5:19:28 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Hi,

You can provide a context menu for the Grid both before and after the Grid enters edit mode. The following code demonstrates both features.

Code: HTML/ASPX 
<script type="text/javascript">
    //Global variable that holds the right
    //clicked cell
    var g_contextCell = null;

    function on_context_menu(e, grid, item, cell)
    {
        //Remember the right clicked cell
        g_contextCell = cell;

        //Display the context menu
        eo_ShowContextMenu(e, "ctxMenuGrid");
    }

    function context_menu_handler1(e, info)
    {
        //Update grid cell value. If you have
        //multiple menu items, you can use the
        //second argument "info" to find out
        //which item has been clicked
        if (g_contextCell)
            g_contextCell.setValue(new Date());
    }

    function context_menu_handler2(e, info)
    {
        //Update DatePicker value. Note we do
        //not update the grid cell value here
        //because the cell is in edit mode
        var dp = eo_GetObject("Grid1_edit_ctl01");
        dp.setSelectedDate(new Date());
    }
</script>

<eo:Grid runat="server" ID="Grid1" BorderColor="#828790" BorderWidth="1px" ColumnHeaderAscImage="00050204"
    ColumnHeaderDescImage="00050205" ColumnHeaderDividerImage="00050203" ColumnHeaderHeight="24"
    FixedColumnCount="1" Font-Bold="False" Font-Italic="False" Font-Names="Tahoma"
    Font-Overline="False" Font-Size="8.75pt" Font-Strikeout="False" Font-Underline="False"
    GridLineColor="240, 240, 240" GridLines="Both" Height="200px" ItemHeight="19"
    Width="380px" ClientSideOnContextMenu="on_context_menu" FullRowMode="false">
    <FooterStyle CssText="padding-bottom:4px;padding-left:4px;padding-right:4px;padding-top:4px;" />
    <ItemStyles>
        <eo:GridItemStyleSet>
            <ItemStyle CssText="background-color: white" />
            <ItemHoverStyle CssText="background-image: url(00050206); background-repeat: repeat-x" />
            <SelectedStyle CssText="background-image: url(00050207); background-repeat: repeat-x" />
            <CellStyle CssText="padding-left:8px;padding-top:2px;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>
    <ColumnHeaderHoverStyle CssText="background-image:url('00050202');padding-left:8px;padding-top:4px;" />
    <Columns>
        <eo:RowNumberColumn>
        </eo:RowNumberColumn>
        <eo:StaticColumn HeaderText="Header">
        </eo:StaticColumn>
        <eo:DateTimeColumn DataField="test">
            <DatePicker DayCellHeight="16" SelectedDates="" DisabledDates="" OtherMonthDayVisible="True"
                DayHeaderFormat="FirstLetter" TitleLeftArrowImageUrl="DefaultSubMenuIconRTL"
                TitleRightArrowImageUrl="DefaultSubMenuIcon" DayCellWidth="19" ControlSkinID="None">
                <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">
                </TodayStyle>
                <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">
                </SelectedDayStyle>
                <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">
                </DisabledDayStyle>
                <PickerStyle CssText="font-family:Courier New; padding-left:5px; padding-right: 5px;">
                </PickerStyle>
                <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">
                </CalendarStyle>
                <TitleArrowStyle CssText="cursor:hand"></TitleArrowStyle>
                <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">
                </DayHoverStyle>
                <MonthStyle CssText="font-family: tahoma; font-size: 12px; margin-left: 14px; cursor: hand; margin-right: 14px">
                </MonthStyle>
                <TitleStyle CssText="background-color:#9ebef5;font-family:Tahoma;font-size:12px;padding-bottom:2px;padding-left:6px;padding-right:6px;padding-top:2px;">
                </TitleStyle>
                <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">
                </OtherMonthDayStyle>
                <DayHeaderStyle CssText="font-family: tahoma; font-size: 12px; border-bottom: #aca899 1px solid">
                </DayHeaderStyle>
                <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">
                </DayStyle>
            </DatePicker>
        </eo:DateTimeColumn>
    </Columns>
    <ColumnHeaderStyle CssText="background-image:url('00050201');padding-left:8px;padding-top:4px;" />
</eo:Grid>
<eo:ContextMenu runat="server" ID="ctxMenuGrid" ControlSkinID="None" Width="100px"
    ClientSideOnItemClick="context_menu_handler1">
    <LookItems>
        <eo:MenuItem IsSeparator="True" ItemID="_Separator" NormalStyle-CssText="width: 1px; height: 1px; background-color: gray; margin: 2px">
        </eo:MenuItem>
        <eo:MenuItem DisabledStyle-CssText="background-color: transparent; border-right-style: none; padding-right: 5px; padding-left: 5px; padding-bottom: 2px; padding-top: 2px; border-top-style: none; border-left-style: none; border-bottom-style: none; color: gray"
            HoverStyle-CssText="background-color: #cccccc; border-right: #999999 1px solid; padding-right: 4px; border-top: #999999 1px solid; padding-top: 1px; border-left: #999999 1px solid; padding-left: 4px; border-bottom: #999999 1px solid; padding-bottom: 1px; "
            ItemID="_Default" NormalStyle-CssText="background-color: transparent; border-right-style: none; padding-right: 5px; padding-left: 5px; padding-bottom: 2px; padding-top: 2px; border-top-style: none; border-left-style: none; border-bottom-style: none; color: black"
            SelectedStyle-CssText="BORDER-RIGHT: #999999 1px solid; PADDING-RIGHT: 4px; BORDER-TOP: #999999 1px solid; PADDING-LEFT: 4px; PADDING-BOTTOM: 1px; BORDER-LEFT: #999999 1px solid; PADDING-TOP: 1px; BORDER-BOTTOM: #999999 1px solid; BACKGROUND-COLOR: white; ">
            <SubMenu ItemSpacing="3" LeftIconCellWidth="12" Style-CssText="font-size: 9pt; font-family: Verdana; color: black; cursor: hand; background-color: #f1f1f1; border-right: #999999 1px solid; border-top: #999999 1px solid; border-left: #999999 1px solid; border-bottom: #999999 1px solid; padding-right: 2px; padding-left: 2px; padding-bottom: 2px; padding-top: 2px">
            </SubMenu>
        </eo:MenuItem>
    </LookItems>
    <TopGroup>
        <Items>
            <eo:MenuItem Text-Html="Set to current time">
            </eo:MenuItem>
        </Items>
    </TopGroup>
</eo:ContextMenu>
<eo:ContextMenu runat="server" ID="ctxMenuDatePicker" ControlSkinID="None" Width="100px"
    ClientSideOnItemClick="context_menu_handler2">
    <LookItems>
        <eo:MenuItem IsSeparator="True" ItemID="_Separator" NormalStyle-CssText="width: 1px; height: 1px; background-color: gray; margin: 2px">
        </eo:MenuItem>
        <eo:MenuItem DisabledStyle-CssText="background-color: transparent; border-right-style: none; padding-right: 5px; padding-left: 5px; padding-bottom: 2px; padding-top: 2px; border-top-style: none; border-left-style: none; border-bottom-style: none; color: gray"
            HoverStyle-CssText="background-color: #cccccc; border-right: #999999 1px solid; padding-right: 4px; border-top: #999999 1px solid; padding-top: 1px; border-left: #999999 1px solid; padding-left: 4px; border-bottom: #999999 1px solid; padding-bottom: 1px; "
            ItemID="_Default" NormalStyle-CssText="background-color: transparent; border-right-style: none; padding-right: 5px; padding-left: 5px; padding-bottom: 2px; padding-top: 2px; border-top-style: none; border-left-style: none; border-bottom-style: none; color: black"
            SelectedStyle-CssText="BORDER-RIGHT: #999999 1px solid; PADDING-RIGHT: 4px; BORDER-TOP: #999999 1px solid; PADDING-LEFT: 4px; PADDING-BOTTOM: 1px; BORDER-LEFT: #999999 1px solid; PADDING-TOP: 1px; BORDER-BOTTOM: #999999 1px solid; BACKGROUND-COLOR: white; ">
            <SubMenu ItemSpacing="3" LeftIconCellWidth="12" Style-CssText="font-size: 9pt; font-family: Verdana; color: black; cursor: hand; background-color: #f1f1f1; border-right: #999999 1px solid; border-top: #999999 1px solid; border-left: #999999 1px solid; border-bottom: #999999 1px solid; padding-right: 2px; padding-left: 2px; padding-bottom: 2px; padding-top: 2px">
            </SubMenu>
        </eo:MenuItem>
    </LookItems>
    <TopGroup>
        <Items>
            <eo:MenuItem Text-Html="Set to current time">
            </eo:MenuItem>
        </Items>
    </TopGroup>
</eo:ContextMenu>

<script type="text/javascript">
    //Hook up a context menu to the DatePicker
    //used by the Grid
    var picker = document.getElementById("Grid1_edit_ctl01");
    picker.oncontextmenu = function(e)
    {
        eo_ShowContextMenu(e, "ctxMenuDatePicker");
    }
</script>


Code: C# 
protected void Page_Load(object sender, EventArgs e)
{
    //Populate the Grid with two empty rows
    Grid1.DataSource = new object[2];
    Grid1.DataBind();
}


In order to display a context menu on a cell before it enters edit mode, you would set the Grid's ClientSideOnContextMenu handler and then call eo_ShowContextMenu inside your handler. Note usually you would also use a global variable to remember which cell the user has right clicked inside the same handler so that when user selects an item from the context menu, you know which cell you are working on.

In order to display a context menu on the DatePicker control (which is shown once the cell enters edit mode), you will need to first get the DHTML element for the DatePicker control and attach oncontextmenu handler to it. You can then call eo_ShowContextMenu inside that handler. Note inside this context menu handler you would need to set the DatePicker value, not the cell value.

Other point of interest:
1. The sample code uses two different ContextMenu controls. You can use the same ContextMenu control if both have the same items;
2. The DatePicker ID in this sample is "Grid1_edit_ctl01". It maybe different in your page. To find out the right ID, you can run the page, then select "View Source", then search for "_picker", you will see something like "Grid1_edit_ctl01_picker", the part without "_picker" is the DatePicker ID;

Please feel let us know if you have any more questions.

Thanks
Back to top
 


You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.