[CLOSED] Change the text of a GridCommand without reloading Gridpanel?

  1. #1

    [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.

    <%@ 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]
  2. #2
    Hi,

    Just call the following code after 'record.data.HasImage.setValue(true);' in the command handler
    this.view.refreshRow(record);
  3. #3
    Hi Vlad,

    Thanks for your quick response, and for the technique mentioned. Unfortunately that doesn't work for me. I simplified the code but what I'm actually from the GridCommand is calling a DirectMethod, which opens a ext:window to upload a file to a server using a FileUpload control and a DirectEvent, and then closing the window. So it's much more complicated. At the bare minimum, I have to wait for a return of True (the user did upload a file) or False (the user did not upload a file or cancelled out) before seting the GridCommand text.

    I am working on a code sample to more closely model what it is that I have to do.
  4. #4
    Hi,

    Please use Success handler of DirecrMethod.

    Example
    <%@ Page Language="C#" %>
    
    <%@ 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 void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                Store store = this.GridPanel1.GetStore();
                store.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}
                };
                store.DataBind();
            }
        }
    
        [DirectMethod]
        public bool Upload()
        {
            return true;
        }
    </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":
                    X.Upload({
                        success: function(result, response, extraParams, o) {
                            record.data.HasImage = result;
                            GridPanel1.getView().refreshRow(record);
                        }
                    });
                    break;
                case "SomeOtherCommand":
                    break;
            }
        };
    </script>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Testing</title>
    </head>
    <body>
        <form runat="server">
        <ext:ResourceManager runat="server" DirectMethodNamespace="X" />
        <ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
            <Store>
                <ext:Store 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>
            </Store>
            <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>
        </form>
    </body>
    </html>
  5. #5
    That's closer but the problem that I have is that I have left the Command Handler function when the success call returns. The DirectMethod that I call opens a window (and performs some other database tasks), and then ends. The button in the newly-opened window is what calls a DirectEvent that returns a success or failure.

    I am working on getting the code sample together but unfortunately my work tasks have taken me in another direction for now. I will get back to this as soon as I can. Thank you for your assistance.
  6. #6
    You should be able to execute this code

    record.data.HasImage = result;
    GridPanel1.getView().refreshRow(record);
    in Success handler of DirectEvent which is fired from Window.

    Just you have to store 'record' somewhere to use it in another scope.

Similar Threads

  1. Replies: 2
    Last Post: Jul 11, 2012, 5:18 PM
  2. Replies: 12
    Last Post: Dec 21, 2010, 2:27 PM
  3. Replies: 1
    Last Post: Nov 23, 2010, 7:31 PM
  4. [CLOSED] Gridpanel Gridcommand example?
    By Dave Ko in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Sep 30, 2009, 8:22 PM
  5. Replies: 12
    Last Post: Jun 17, 2009, 12:07 PM

Tags for this Thread

Posting Permissions