What's New?

Setting GridPanel datasource on button click rather than on page load

  1. #1
    Oct 05, 2010, 5:05 PM

    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 8:41 PM. Reason: please use [CODE] tags
  2. #2
    Oct 12, 2010, 8:39 PM
    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. Refresh DataSource on Window Load or Shortcut Click
    By dataknox in forum 2.x Help
    Replies: 0
    Last Post: May 08, 2012, 12:57 PM
  2. Setting TextField ReadOnly property to toggle on click of button
    By nil5286 in forum 1.x Help
    Replies: 4
    Last Post: Jan 04, 2012, 4:38 AM
  3. Setting the TextField ReadOnly property to toggle on click of Button
    By nil5286 in forum 1.x Help
    Replies: 2
    Last Post: Dec 20, 2011, 8:18 AM
  4. When i click delete button it will delete data in database by using linq2sql datasource
    By Arun in forum 1.x Help
    Replies: 0
    Last Post: Jul 23, 2010, 6:35 AM
  5. [CLOSED] Prevent the Page load when click again on the Tab
    By Neeraj Sharma in forum 1.x Help
    Replies: 2
    Last Post: Dec 22, 2008, 6:08 AM

Posting Permissions