PDA

View Full Version : [CLOSED] Disable GridCommand of a gridPanel on Command Click



otouri
Apr 12, 2013, 6:05 PM
I need to disable the grid command when a user click on any of the command "CreateLetterButton">
I need to use server side to accomplish this task.
I tried to use:


gpAvailableLetters.ColumnModel.Columns[4].Disabled = true;

didn't help i was only able to disable the column header

Aspx:



<ext:Panel ID="pnlAvailableLetter" Hidden="true" runat="server" Padding="15" AutoHeight="true"
Layout="FitLayout" ActiveIndex="0">
<Content>
<ext:GridPanel ID="gpAvailableLetters" runat="server" Cls="x-grid-custom">
<Store>
<ext:Store ID="stAvailableLetters" runat="server">
<Model>
<ext:Model ID="mdAvailableLetters" runat="server" IDProperty="FundName">
<Fields>
<ext:ModelField Name="DirectionLetterID" Type="Int" />
<ext:ModelField Name="FundID" Type="Int" />
<ext:ModelField Name="FundName" />
<ext:ModelField Name="EntryDate" />
<ext:ModelField Name="SystemUserName" />
<ext:ModelField Name="CreateLetterButton" Type="Boolean">
<Convert Handler="return value === 'Y';" />
</ext:ModelField>
<ext:ModelField Name="DeleteButton" Type="Boolean">
<Convert Handler="return value === 'Y';" />
</ext:ModelField>
</Fields>
</ext:Model>
</Model>
<Sorters>
<ext:DataSorter Property="FundName" Direction="ASC" />
</Sorters>
</ext:Store>
</Store>
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:Column ID="Column3" runat="server" Text="DirectionLetterID" Width="160" DataIndex="DirectionLetterID"
Visible="false" />
<ext:Column ID="Column5" runat="server" Text="FundID" Width="160" DataIndex="FundID"
Visible="false" />
<ext:Column ID="Column1" runat="server" Text="Fund Name" Width="160" DataIndex="FundName"
Flex="1" />
<ext:DateColumn ID="datecolumn2" runat="server" Text="Entry Date" Width="140" Sortable="true"
DataIndex="EntryDate" />
<ext:CommandColumn ID="CommandColumn1" runat="server" Width="140" Text="Create Letter"
Sortable="true" DataIndex="CreateLetterButton">
<Commands>
<ext:GridCommand Icon="Mail" Disabled="false" CommandName="CreateLetterButton" Text="Create Letter" />
</Commands>
<PrepareToolbar Fn="prepareToolbar3" />
<DirectEvents>
<Command OnEvent="cmdCreateLetterClick">
<EventMask ShowMask="true">
</EventMask>
<ExtraParams>
<ext:Parameter Name="DirectionLetterID" Value="record.data.DirectionLetterID" Mode="Raw"></ext:Parameter>
<ext:Parameter Name="FundName" Value="record.data.FundName" Mode="Raw" ></ext:Parameter>
</ExtraParams>
</Command>
</DirectEvents>
</ext:CommandColumn>
<ext:CommandColumn ID="CommandColumn2" runat="server" Width="140" Text="Delete" Sortable="true"
DataIndex="DeleteButton">
<Commands>
<ext:GridCommand Icon="Delete" CommandName="DeleteButton" Text="Delete" />
</Commands>
<PrepareToolbar Fn="prepareToolbar2" />
<Listeners>
<Command Handler="Ext.Msg.alert(command, record.data.FundName);" />
</Listeners>
</ext:CommandColumn>
</Columns>
</ColumnModel>
<BottomBar>
<ext:PagingToolbar ID="pgtAvailableLetter" runat="server">
<Items>
<ext:Label ID="lblPageSizeAvailableLetter" runat="server" Cls="toolbarPaging" Text="Page size:" />
<ext:ToolbarSpacer ID="tbsPageSizeAvailableLetter" runat="server" Width="10" />
<ext:ComboBox ID="cbPageSizeAvailableLetter" runat="server" Width="80">
<Items>
<ext:ListItem Text="1" />
<ext:ListItem Text="5" />
<ext:ListItem Text="10" />
<ext:ListItem Text="20" />
</Items>
<SelectedItems>
<ext:ListItem Value="10" />
</SelectedItems>
<Listeners>
<Select Handler="#{gpAvailableLetter}.store.pageSize = parseInt(this.getValue(), 10); #{gpAvailableLetter}.store.load();" />
</Listeners>
</ext:ComboBox>
</Items>
<Plugins>
<ext:ProgressBarPager ID="ProgressBarPager1" runat="server" />
</Plugins>
</ext:PagingToolbar>
</BottomBar>
</ext:GridPanel>
</Content>
</ext:Panel>


Code Behind:


protected void cmdCreateLetterClick(object sender, DirectEventArgs e)
{
int DirectionLetterID = int.Parse(e.ExtraParams["DirectionLetterID"]);
string FundName = e.ExtraParams["FundName"];
gpAvailableLetters.ColumnModel.Columns[4]..Disabled = true;


}

Baidaly
Apr 13, 2013, 12:14 AM
Hello!

Unfortunately, you cannot do this from server side directly. The only way to do this is to use prepareToolbar on client side: http://examples2.ext.net/#/GridPanel/Commands/Prepare_Toolbar/ . Can you say in which case this command should be disabled? Can it be tied to the values in the grid's store?

Baidaly
Apr 13, 2013, 1:09 AM
Please, don't duplicate threads. You should create only one thread for each problem.

http://forums.ext.net/showthread.php?3440

Thank you!

otouri
Apr 15, 2013, 1:56 PM
When a user selects a row to create a letter the following events happens:
1- The database is updated and to reflect the status of the the selected row from queued to pending
2- The data grid needs to be refreshed to reflect the removal of the the selected row.
3- the remaining of the rows should have the create button disabled to disallow user from selecting another row. the button de;ete should remain enabled.

how can i accomplish the prepareToolbar to gray the all create buttons after the grid refreshes.

otouri
Apr 15, 2013, 5:41 PM
Hello,

Do you have any updates?

I tried to use the prepare function used here: http://examples2.ext.net/#/GridPanel/...epare_Toolbar/ but with no success.

I tweaked the function to disable the CreateButton based on a session value (set on server side), the prepare function will fail saying undefined variable
Then i tried to added a ext:hidden and updated the text on a serverside and that also didn't work same kind of error.




var prepare = function (grid, toolbar, rowIndex, record) {
var firstButton = toolbar.items.get(0);


if (hfToPendingLetterID.getValue() != '') {


firstButton.setDisabled(true);
firstButton.setTooltip("Disabled");
}
}

Server side function:



protected void cmdCreateLetterClick(object sender, DirectEventArgs e)
{
int DirectionLetterID = int.Parse(e.ExtraParams["DirectionLetterID"]);
string FundName = e.ExtraParams["FundName"];
this.hfToPendingLetterID.Text = "param2";
}


Please note that my ResourceManager is declared in the master page

Baidaly
Apr 15, 2013, 10:52 PM
Try the following example:



<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
this.Store1.DataSource = new object[]
{
new object[] { "3m Co", 71.72, 0.02, 0.03, "9/1 12:00am" },
new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, "9/1 12:00am" },
new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, "9/1 12:00am" }
};

this.Store1.DataBind();

DisableCreateButton.Value = false;
}
}

protected void Button_Click(object sender, DirectEventArgs e)
{
DisableCreateButton.Value = true;
GridPanel1.Refresh();
}
</script>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Ext.NET Examples</title>

<script>
var prepare = function (grid, toolbar, rowIndex, record) {
var firstButton = toolbar.items.get(0);

if (App.DisableCreateButton.getValue() == 'true') {
firstButton.setDisabled(true);
firstButton.setTooltip("Disabled");
}
};
</script>

</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />

<ext:Hidden runat="server" ID="DisableCreateButton"></ext:Hidden>

<ext:GridPanel
runat="server"
ID="GridPanel1"
Width="600"
Height="300">
<TopBar>
<ext:Toolbar runat="server">
<Items>
<ext:Button runat="server" Text="Click me">
<DirectEvents>
<Click OnEvent="Button_Click"></Click>
</DirectEvents>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<Store>
<ext:Store ID="Store1" runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="company" />
<ext:ModelField Name="price" Type="Float" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column
runat="server"
Text="Company"
Width="160"
DataIndex="company"
Flex="1"
/>
<ext:Column
runat="server"
Text="Price"
Width="75"
DataIndex="price">
<Renderer Format="UsMoney" />
</ext:Column>
<ext:CommandColumn runat="server" Width="120">
<Commands>
<ext:GridCommand Icon="NoteEdit" CommandName="Create" Text="Create" />
</Commands>
<PrepareToolbar Fn="prepare" />
<Listeners>
<Command Handler="Ext.Msg.alert(command, record.data.company);" />
</Listeners>
</ext:CommandColumn>
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel runat="server" Mode="Single" />
</SelectionModel>
</ext:GridPanel>
</form>
</body>
</html>

otouri
Apr 16, 2013, 1:43 PM
Thank you so much that is exactly what I was looking for