Jan 26, 2011, 8:59 PM
[CLOSED] Change the text of a GridCommand without reloading Gridpanel?
Gentlemen,
I wrote a page that uses a gridpanel to display some key:value pairs and a CommandColumn of GridCommands that allows the user to upload an image for any of the listed records. If the user has already uploaded an image for a particular record, the GridCommand text will say "View Image" instead of "Upload Image" (and launch different code if they click on it) and this has been accomplished with a PrepareToolbar.
The problem I have is I want to change the text of the GridCommand to "View Image" AFTER the user has clicked a button that says "Upload Image". I want to do this without specifically calling Gridpanel.Reload(), as there might be other columns with dirty data that I do not want to lose.
Below is a stripped down example of my code. Thanks in advance for any help.
I wrote a page that uses a gridpanel to display some key:value pairs and a CommandColumn of GridCommands that allows the user to upload an image for any of the listed records. If the user has already uploaded an image for a particular record, the GridCommand text will say "View Image" instead of "Upload Image" (and launch different code if they click on it) and this has been accomplished with a PrepareToolbar.
The problem I have is I want to change the text of the GridCommand to "View Image" AFTER the user has clicked a button that says "Upload Image". I want to do this without specifically calling Gridpanel.Reload(), as there might be other columns with dirty data that I do not want to lose.
Below is a stripped down example of my code. Thanks in advance for any help.
<%@ Page Language="vb" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Not Ext.Net.X.IsAjaxRequest Then
Me.storItem.DataSource = New Object() {New Object() {1, "Software Package #1", False},
New Object() {2, "Software Package #2", False},
New Object() {3, "Software Package #3", False},
New Object() {4, "Software Package #4", True},
New Object() {5, "Software Package #5", False},
New Object() {6, "Software Package #6", True}}
Me.storItem.DataBind()
End If
End Sub
</script>
<script type="text/javascript">
var prepareCommand = function (grid, toolbar, rowIndex, record) {
var firstButton = toolbar.items.get(0);
switch (record.data.HasImage) {
case true:
firstButton.setText("View Image");
break;
case false:
firstButton.setText("Upload Image");
break;
}
};
var commandHandler = function (cmd, record) {
switch (cmd) {
case "UpLoadImage":
// The real application calls a directmethod here
record.data.HasImage.setValue(true);
break;
case "SomeOtherCommand":
break;
}
};
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Testing</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<ext:ResourceManager runat="server" />
<ext:Store ID="storItem" runat="server">
<Reader>
<ext:ArrayReader>
<Fields>
<ext:RecordField Name="inventoryID" Type="Int" />
<ext:RecordField Name="InventoryName" Type="String" />
<ext:RecordField Name="HasImage" Type="Boolean" />
</Fields>
</ext:ArrayReader>
</Reader>
</ext:Store>
<ext:GridPanel ID="grdInventory" StoreID="storItem" runat="server" Height="200">
<ColumnModel>
<Columns>
<ext:Column DataIndex="inventoryID" />
<ext:Column DataIndex="InventoryName" />
<ext:CheckColumn DataIndex="HasImage" />
<ext:CommandColumn>
<Commands>
<ext:GridCommand CommandName="uploadImage" />
</Commands>
<PrepareToolbar Fn="prepareCommand" />
</ext:CommandColumn>
</Columns>
</ColumnModel>
<Listeners>
<Command Fn="commandHandler" />
</Listeners>
</ext:GridPanel>
</div>
</form>
</body>
</html>
Last edited by Daniil; Jan 31, 2011 at 2:36 PM.
Reason: [CLOSED]