Context Menu Items Enable/Disable depending on certain condition on Client Side on right click of row of Grid Panel

  1. #1

    Context Menu Items Enable/Disable depending on certain condition on Client Side on right click of row of Grid Panel

    I was trying to show Context Menu on right click of Grid Panel Row in which I have different rows having values like X,Y,Z,A . Depending on which row is click I wanted to Disable/Enable Item from Context Menu displayed. For e.g. if Row value is X then I wanted to Disable Item1 of Context Menu and If Row value is Y then I wanted to enable Item1 and Disable Item2 of Context Menu.

    I am using Ext.net Version 2.5.3

    Here is my sample code.

    I have used contextMenu.items.items[5].disabled to disable and enable Context Menu Items at Client Side but it works only First time but on second condition it dose not get refresh.

    <body>
        <ext:ResourceManager runat="server" />
    
        <h1>Actions Example</h1>
    
        <p>This example shows how to create multiple active UI event handling widgets from a single Action definition.</p>
    
        <p>
            Both Buttons and MenuItems can be created from the same Action instance. Action's enable, disable, hide, show and
        setText methods affect every Component created from that Action.<p>
    
        <p>In this example, the Action is disabled when there is no grid selection, and this disables both Buttons and MenuItems.</p>
           
      <ext:Menu ID="RowContextMenu" runat="server">
            <Items>
                <ext:MenuItem ID="MenuItemDone" runat="server" TagString="Done" Text="Mark as Done" IconUrl="~/images/menus/Checked.gif" />
                <ext:MenuItem ID="MenuItemNotDone" runat="server" TagString="NotDone" Text="Mark as Not Done" IconUrl="~/images/menus/Unchecked.gif" />
                <ext:MenuSeparator Text="" Cls="igmn_FiservSeparator" Enabled="false"></ext:MenuSeparator>
                <ext:MenuItem ID="MenuItemRecalc" runat="server" TagString="Recalc" Text="Recalculate Assumption Results" IconUrl="~/images/menus/recalculate.gif" />
                <ext:MenuSeparator Text="" Cls="igmn_FiservSeparator" Enabled="false"></ext:MenuSeparator>
                <ext:MenuItem ID="MenuItemDetails" runat="server" TagString="Details" Text="Assumption Details" IconUrl="~/images/menus/assumption_details.gif" />
                <ext:MenuItem ID="MenuItemResults" runat="server" TagString="Results" Text="Assumption Result Details" IconUrl="~/images/menus/assumption_result_details.gif" />
                <ext:MenuItem ID="MenuItemBalancesRates" runat="server" TagString="BalancesRates" Text="Balances and Rates" Hidden="true" IconUrl="~/images/menus/balances.gif" />
                <ext:MenuSeparator Text="" Cls="igmn_FiservSeparator" Enabled="false"></ext:MenuSeparator>
                <ext:MenuItem ID="MenuItemSelectAll" runat="server" TagString="SelectAll" Text="Select All on this Page" IconUrl="~/images/menus/selectall.gif" />
            </Items>
            <Listeners>
                <Click Fn="ExtGridMenu_ItemClick"></Click>
            </Listeners>
        </ext:Menu>
    
    
        
    
        <ext:GridPanel
            ID="GridPanel1"
            runat="server"
            ColumnLines="true"
            Title="Action Grid"
            Width="600"
            Height="350">
            <Store>
                <ext:Store ID="Store1" runat="server">
                    <Model>
                        <ext:Model runat="server">
                            <Fields>
                                <ext:ModelField Name="company" />
                                <ext:ModelField Name="price" Type="Float" />
                                <ext:ModelField Name="change" Type="Float" />
                                <ext:ModelField Name="pctChange" Type="Float" />
                                <ext:ModelField Name="lastChange" Type="Date" DateFormat="M/d hh:mmtt" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            <ColumnModel>
                <Columns>
                    <ext:Column runat="server" Text="Company" DataIndex="company" Flex="1" />
                    <ext:Column runat="server" Text="Price" DataIndex="price">
                        <Renderer Format="UsMoney" />
                    </ext:Column>
                    <ext:Column runat="server" Text="Change" DataIndex="change">
                        <Renderer Fn="change" />
                    </ext:Column>
                    <ext:Column runat="server" Text="Change" DataIndex="pctChange">
                        <Renderer Fn="pctChange" />
                    </ext:Column>
                    <ext:DateColumn runat="server" Text="Last Updated" DataIndex="lastChange" />
                </Columns>
            </ColumnModel>
            <SelectionModel>
                <ext:RowSelectionModel runat="server">
                    <Listeners>
                        <SelectionChange Handler="if (selected.length) { #{BuyAction}.enable(); #{SellAction}.enable(); } else { #{BuyAction}.disable(); #{SellAction}.disable(); }" />
                    </Listeners>
                </ext:RowSelectionModel>
            </SelectionModel>
            <ViewConfig StripeRows="true">
            <Listeners>
           <RowContextMenu Fn="EnableDisable"></RowContextMenu>
            </Listeners>  
            </ViewConfig>
            <DockedItems>
                <ext:Toolbar runat="server">
                    <Items>
                        <ext:ActionRef runat="server" Action="#{BuyAction}" />
                        <ext:ActionRef runat="server" Action="#{SellAction}" />
                    </Items>
                </ext:Toolbar>
            </DockedItems>
    
        </ext:GridPanel>
    </body>
    
    <script>
            var template = '<span style="color:{0};">{1}</span>';
    
            var change = function (value) {
                return Ext.String.format(template, (value > 0) ? "green" : "red", value);
            };
    
            var pctChange = function (value) {
                return Ext.String.format(template, (value > 0) ? "green" : "red", value + "%");
            };
    
            var btClick = function (value) {
                alert('Hi');
            };
            function EnableDisable(item, record, node, index, e) {
                debugger;
                e.preventDefault();
                var contextMenu = App.ctl00_cphRightContent_RowContextMenu;
                var gridRow = this.store.getAt(index);
                var Allow_Mark_Done = false;
                var Allow_Calculate = false;
                var Allow_Assumption_Details = false;
                var Allow_Edit = false;
                var Allow_Calculate_All = false;
                if (true) {
                    Allow_Edit = true;
                }
                if (true) {
                    Allow_Calculate = true;
                }
                if (false) {
                    Allow_Mark_Done = true;
                }
                if (true) {
                    Allow_Calculate_All = true;
                }
                if (Allow_Mark_Done) {
                    contextMenu.items.items[0].disabled = false;
                    contextMenu.items.items[1].disabled = false;
                    contextMenu.items.items[0].disabledCls = "x-menu-item";
                    contextMenu.items.items[1].disabledCls = "x-menu-item";
                }
                else {
                    contextMenu.items.items[0].disabled = true;
                    contextMenu.items.items[1].disabled = true;
                    //contextMenu.items.items[0].disabledCls= "x-item-disabled mbutton";
                    //contextMenu.items.items[1].disabledCls= "x-item-disabled mbutton";
    
                }
    
                if (Allow_Calculate) {
                    contextMenu.items.items[3].disabled = false;
    
                }
                else {
                    contextMenu.items.items[3].disabled = true;
                    //contextMenu.items.items[3].disabledCls= "x-item-disabled mbutton";
    
                }
    
                if (Allow_Edit) {
                    contextMenu.items.items[5].disabled = false;
    
                }
                else {
                    contextMenu.items.items[5].disabled = true;
                    //contextMenu.items.items[5].disabledCls= "x-item-disabled mbutton";
                }
                //App.ctl00_cphRightContent_RowContextMenu.dataRecord = this.store.getAt(index);
                contextMenu.showAt(e.getXY());
            }
    
        </script>
    Thanks.
  2. #2

    Awaiting reply........

    Did anyone got chance to review above sample.

    Waiting for reply

    Thanks,
  3. #3
    Hi

    try using contextMenu.items.items[i].setDisabled(true)

    refer to the docs...most classes provide config classed you can set when creating the item. Otherwise you need to use the method and not the property unless a property exists for it.

    http://docs.sencha.com/extjs/4.2.5/#...od-setDisabled

Similar Threads

  1. [CLOSED] grid panel context menu items.
    By Prasoon in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Mar 02, 2015, 6:02 AM
  2. Replies: 2
    Last Post: Apr 04, 2014, 5:11 AM
  3. [CLOSED] Disable/Enable Vertical Marker based on Context Menu
    By cwolcott in forum 2.x Legacy Premium Help
    Replies: 7
    Last Post: Jun 21, 2013, 1:44 PM
  4. Replies: 6
    Last Post: Aug 17, 2012, 2:02 PM
  5. Replies: 0
    Last Post: May 01, 2012, 9:43 AM

Tags for this Thread

Posting Permissions