Hi all,

I'm still struggling with the way the contextmenu works. I have a onContextMenu for a datagrid with a callback function coupled to a gridcell, and in that callback I want to disable 1 of the items in the contextmenu. Here is the code that I have so far.

package ruihandlers;import com.ibm.egl.rui.widgets.DataGrid;import com.ibm.egl.rui.widgets.DataGridColumn;import com.ibm.egl.rui.widgets.GridLayout;import com.ibm.egl.rui.widgets.GridLayoutData;import egl.ui.rui.Widget;import dojo.widgets.DojoContextMenu;import dojo.widgets.DojoMenuItem;import egl.ui.rui.Event;handler DataGridCtxMenuTest type RUIhandler {initialUI = [ ui ],onConstructionFunction = start, cssFile="css/ruihandlers.css", title="DataGridCtxMenuTest"}            ui GridLayout{ columns = 1, rows = 1, cellPadding = 4, children = [ grid ] };        grid DataGrid{ layoutData = new GridLayoutData{ row = 1, column = 1 },                behaviors = [dataGrid_behavior_setContextMenu ],                headerBehaviors = [ ],                columns = [                        new DataGridColumn{name = "field1", displayName = "Column 1 Header", width=120},                        new DataGridColumn{name = "field2", displayName = "Column 2 Header", width=120}                ],                data = [                        new Dictionary { field1 = "Row 1, Column 1", field2 = "Row 1, Column 2"},                        new Dictionary { field1 = "Row 2, Column 1", field2 = "Row 2, Column 2"}                ]        };                function start()        end             private function dataGrid_behavior_setContextMenu (grid DataGrid in, cell Widget in, rowData any in, dataIndex int in, column DataGridColumn in)                cell.onContextMenu ::= cell_onContextMenu;                mniRegelDetails DojoMenuItem{ id="1", text = "1"};                mniRegelVerwijderen DojoMenuItem{ id="2", text = "2"};                cmenu DojoContextMenu{ targets = [cell], children =[ mniRegelDetails, mniRegelVerwijderen ] };        end        private function cell_onContextMenu (e Event in)                wg widget = e.widget;                //Need to disable the first item in the conetxtMenu.                //Don't know how to retrieve the contextmenu from this widget.        endend

I hope someone knows how to do this and can help me out.

Thanks, Ruben.

Hi Ruben,

Usually the menu items are disabled before adding them to the grid.

See example 1:

package ruihandlers;import com.ibm.egl.rui.widgets.DataGrid;import com.ibm.egl.rui.widgets.DataGridColumn;import com.ibm.egl.rui.widgets.GridLayout;import com.ibm.egl.rui.widgets.GridLayoutData;import egl.ui.rui.Event;import egl.ui.rui.Widget;import dojo.widgets.DojoContextMenu;import dojo.widgets.DojoMenuItem;handler DataGridCtxMenuTest type RUIhandler {initialUI = [ ui ],onConstructionFunction = start, title="DataGridCtxMenuTest"}        ui GridLayout{ columns = 1, rows = 1, cellPadding = 4, children = [ grid ] };    grid DataGrid{ layoutData = new GridLayoutData{ row = 1, column = 1 },        behaviors = [dataGrid_behavior_setContextMenu ],        headerBehaviors = [ ],        columns = [                new DataGridColumn{name = "field1", displayName = "Column 1 Header", width=120},                new DataGridColumn{name = "field2", displayName = "Column 2 Header", width=120}        ],        data = [                new Dictionary { field1 = "Row 1, Column 1", field2 = "Row 1, Column 2"},                new Dictionary { field1 = "Row 2, Column 1", field2 = "Row 2, Column 2"}        ]    };            function start()    end         private function dataGrid_behavior_setContextMenu (grid DataGrid in, cell Widget in, rowData any in, dataIndex int in, column DataGridColumn in)        cell.onContextMenu ::= cell_onContextMenu;        mniRegelDetails DojoMenuItem{text = "item 1", onClick ::= mniRegelDetails_onClick};        mniRegelVerwijderen DojoMenuItem{text = "item 2", onClick ::= mniRegelVerwijderen_onClick};                // When adding the menu items to the grid decide whether or not they will be disabled.        if (dataIndex%2 == 1)                // Odd line                mniRegelDetails.disabled = true;        else                // Even line                mniRegelVerwijderen.disabled = true;        end        cmenu DojoContextMenu{ targets = [cell], children =[ mniRegelDetails, mniRegelVerwijderen ] };    end    private function cell_onContextMenu (e Event in)        SysLib.writeStdout("Cell clicked");    end        private function mniRegelDetails_onClick (e Event in)        SysLib.writeStdout("item 1 selected");    end    private function mniRegelVerwijderen_onClick (e Event in)                SysLib.writeStdout("item 2 selected");    endend

I tried to come up with a solution to only decide to disable the item at the time the row is clicked, but as I dreaded it failed for the onClick event of the cell is caught after the context menu is displayed. Since we do not have control over the event that makes the context menu appear this problem can not be overcome.

Example 2 is what I tried, but did not manage:

package ruihandlers;import com.ibm.egl.rui.widgets.DataGrid;import com.ibm.egl.rui.widgets.DataGridColumn;import com.ibm.egl.rui.widgets.GridLayout;import com.ibm.egl.rui.widgets.GridLayoutData;import egl.ui.rui.Event;import egl.ui.rui.Widget;import dojo.widgets.DojoContextMenu;import dojo.widgets.DojoMenuItem;handler DataGridCtxMenuTest2 type RUIhandler {initialUI = [ ui ],onConstructionFunction = start, title="DataGridCtxMenuTest"}        ui GridLayout{ columns = 1, rows = 1, cellPadding = 4, children = [ grid ] };    grid DataGrid{ layoutData = new GridLayoutData{ row = 1, column = 1 },        behaviors = [dataGrid_behavior_setContextMenu ],        headerBehaviors = [ ],        columns = [                new DataGridColumn{name = "field1", displayName = "Column 1 Header", width=120},                new DataGridColumn{name = "field2", displayName = "Column 2 Header", width=120}        ],        data = [                new Dictionary { field1 = "Row 1, Column 1", field2 = "Row 1, Column 2"},                new Dictionary { field1 = "Row 2, Column 1", field2 = "Row 2, Column 2"}        ]    };    rowNumber int;    columnNumber int;            function start()    end         private function dataGrid_behavior_setContextMenu (grid DataGrid in, cell Widget in, rowData any in, dataIndex int in, column DataGridColumn in)        cell.onContextMenu ::= cell_onContextMenu;        // Reset columnNumber at each new row.        if (rowNumber != dataIndex)                rowNumber = dataIndex;                columnNumber = 0;        end        columnNumber += 1;        // Create a unique id from which you can determine the row, column and item.        id int;        id = (rowNumber * 100) + (columnNumber * 10) + 1;        mniRegelDetails DojoMenuItem{id = id, text = "item 1", onClick ::= mniRegelDetails_onClick};        id += 1;        mniRegelVerwijderen DojoMenuItem{id = id, text = "item 2", onClick ::= mniRegelVerwijderen_onClick};        cmenu DojoContextMenu{ targets = [cell], children =[ mniRegelDetails, mniRegelVerwijderen ] };        cell.setAttribute("row", rowNumber);        cell.setAttribute("column", columnNumber);    end    private function cell_onContextMenu (e Event in)        SysLib.writeStdout("Cell clicked");                // Disable the item with the same parity as the row.        cell widget = e.widget;                row int = cell.getAttribute("row");                column int = cell.getAttribute("column");                id int;                for (item int from 1 to 2) // 2 items in context menu.                        id = (row * 100) + (column * 10) + item;                        SysLib.writeStdout("id: " + id);                        if (row%2 == id%2)                                SysLib.writeStdout("row: " + row);                                mni widget = document.body.getElementById(id);                                if (mni != null)                                        mni.disabled = true;                                end                        end                end    end        private function mniRegelDetails_onClick (e Event in)        SysLib.writeStdout("item 1 selected");    end    private function mniRegelVerwijderen_onClick (e Event in)                SysLib.writeStdout("item 2 selected");    endend

So, I'd stick to example 1.

Oh and BTW when in need of doing an EGL RUI project or training in Belgium or the Netherlands you can contact Axians (by me).

Ortwin

Hi Ruben,

Have a look at attached code. I guess it answers your question. I have put some comments in the code. I also took the liberty to extend your specs a little. In my example you can not only disable/enable contextmenu items based on some criteria per row, you can also append context-menuitems to your liking.

Kind regards,
Guus

Thanks Guus, this really works fine.

Kind regards.

Ruben