Apr 21, 2016, 10:54 AM
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.
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.