Setting GridPanel datasource on button click rather than on page load

  1. #1

    Setting GridPanel datasource on button click rather than on page load

    I have a grid that I'm wanting to refresh the datasource when the user clicks a button on the screen. The button is a search button that brings back results based on criteria on the screen.

    I noticed that the grid only shows data based on databinding at the time of page load rather than trying to set databinding on the click of a button.

    I try setting the following on the click event, but the grid still shows the data that was loaded on the page load event.

                this.Store1.DataSource = transData;
                this.Store1.DataBind();            
    
                if (Ext.IsAjaxRequest) )
                this.GridPanel1.RefreshView();
    How can I get the grid to refresh on the click event of a button?


         <ext:GridPanel ID="GridPanel1" 
                runat="server" 
                StoreID="Store1" 
                StripeRows="true"
                SelectionMemory=Enabled
                Stateful=true
                Title="Array Grid"            
                >
                
                <SelectionModel>
                    <ext:RowSelectionModel ID="SearchResultSelection" runat="server" SingleSelect="True" />
                </SelectionModel>
                
                <LoadMask ShowMask="true" />
    
                <Listeners>                  
    
                    <Command Handler="Coolite.AjaxMethods.GridCommand(command, this.getColumnModel().getDataIndex(colIndex), record.data.TransactionID, rowIndex )" />                  
                    <RowMouseDown Handler="Coolite.AjaxMethods.RowSelected(rowIndex);" />
                    <KeyDown Handler="Coolite.AjaxMethods.GridKeyDown()" />
                    
                </Listeners>            
                <Buttons>                        
                
                <ext:Button ID="btnSearch" runat="server" Text="Search" >
                        <AjaxEvents>
                            <Click OnEvent="btnSearch2" >           
                            </Click>                                                             
                        </AjaxEvents>
                    </ext:Button>
                </Buttons>
    Last edited by geoffrey.mcgill; Oct 12, 2010 at 9:41 PM. Reason: please use [CODE] tags
  2. #2
    Hi,

    For the future please read this guide
    http://forums.ext.net/showthread.php...ing-New-Topics

    In particular wrap any code in [CODE] tags.

    The following code works fine in Ext.Net 1.0.
    BTW, I would suggest you to migrate to this toolkit's version as soon as possible. It's much more powerful and flexible toolkit than previous ones.

    Example Ext.Net 1.0
    <%@ 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)
            {
                Store store = this.GridPanel1.GetStore();
                store.DataSource = new object[] { 
                                             new object[] { "test1" },
                                             new object[] { "test2" },
                                             new object[] { "test3" }
                                    };
                store.DataBind();
            }
        }
        protected void UpdateGrid(object sender, DirectEventArgs e)
        {
            Store store = this.GridPanel1.GetStore();
            store.DataSource = new object[] { 
                                             new object[] { "new test1" },
                                             new object[] { "new test2" },
                                             new object[] { "new test3" }
                                    };
            store.DataBind();
        }
    </script>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Ext.Net Example</title>
    </head>
    <body>
        <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
            <Store>
                <ext:Store runat="server">
                    <Reader>
                        <ext:ArrayReader>
                            <Fields>
                                <ext:RecordField Name="test" />
                            </Fields>
                        </ext:ArrayReader>
                    </Reader>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column Header="Test" DataIndex="test" />
                </Columns>
            </ColumnModel>
        </ext:GridPanel>
        <ext:Button runat="server" Text="Update the grid" OnDirectClick="UpdateGrid" />
        </form>
    </body>
    </html>
    If this example won't help you please post your sample code in the above manner.

Similar Threads

  1. Replies: 0
    Last Post: May 08, 2012, 1:57 PM
  2. Replies: 4
    Last Post: Jan 04, 2012, 5:38 AM
  3. Replies: 2
    Last Post: Dec 20, 2011, 9:18 AM
  4. Replies: 0
    Last Post: Jul 23, 2010, 7:35 AM
  5. Replies: 2
    Last Post: Dec 22, 2008, 7:08 AM

Posting Permissions