What's New?

[CLOSED] GridPanel paging after databind during DirectEvent

  1. #1
    Jul 07, 2010, 8:00 PM

    [CLOSED] GridPanel paging after databind during DirectEvent

    I'm rebinding data to a GridPanel during a direct event. The data updates correctly, but the paging is wrong. All of the data is on the first page and the page numbers on the bottom bar aren't right. Is there something I need to do after the databind to update the grid?
    Last edited by geoffrey.mcgill; Jul 08, 2010 at 6:07 PM.
  2. #2
    Jul 07, 2010, 11:31 PM
    Hello, jmcantrell!

    Could I have a look at the handler of DirectEvent where data is rebinding? It would be much better if you provide me with an example to demonstrate the issue.

    Please look at this example:
    https://examples1.ext.net/#/GridPane...h_Remote_Data/

    Please note how the data is rebinding in the Store1_Refresh method and how the remoteLoad function is used. Perhaps you'll find some analogies with your code to solve the problem.
  3. #3
    Jul 08, 2010, 2:18 PM
    This illustrates it. Notice how after you click the refresh button in the toolbar, the data refreshes, but it's all on the first page. I have a slightly related question. Is there a way to customize what's in the paging toolbar? For example, can I remove the refresh button?

    <!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 id="Head1" runat="server">
    <title></title>

    <script runat="server">
                
        Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
            If Not IsPostBack And Not Ext.Net.X.IsAjaxRequest Then
                DataBind()
            End If
        End Sub
        
        Public Overrides Sub DataBind()
            Dim data As New List(Of Object)
            For i = 1 To 1000
                data.Add(New With {.foo = "Test " & Date.Now & " " & i})
            Next
            Store1.DataSource = data
            Store1.DataBind()
        End Sub
        
        Public Sub RefreshButton_Click(ByVal sender As Object, ByVal e As DirectEventArgs)
            DataBind()
        End Sub
        
    </script>

</head>
<body>
    <form id="form1" runat="server">
    
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        
        <ext:GridPanel ID="GridPanel1" runat="server" Height="300" AutoExpandColumn="foo">
            <Store>
                <ext:Store ID="Store1" runat="server">
                    <Reader>
                        <ext:JsonReader>
                            <Fields>
                                <ext:RecordField Name="foo" />
                            </Fields>
                        </ext:JsonReader>
                    </Reader>
                </ext:Store>
            </Store>
            <ColumnModel ID="ColumnModel1" runat="server">
                <Columns>
                    <ext:Column ColumnID="Foo" Header="Foo" DataIndex="foo" />
                </Columns>
            </ColumnModel>
            <SelectionModel>
                <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" SingleSelect="true" />
            </SelectionModel>
            <TopBar>
                <ext:Toolbar runat="server">
                    <Items>
                        <ext:Button runat="server" Text="Refresh" Icon="Reload">
                            <DirectEvents>
                                <Click OnEvent="RefreshButton_Click" />
                            </DirectEvents>
                        </ext:Button>
                    </Items>
                </ext:Toolbar>
            </TopBar>
            <BottomBar>
                <ext:PagingToolbar ID="PagingToolbar1" runat="server" PageSize="10" />
            </BottomBar>
        </ext:GridPanel>

    </form>
</body>
</html>
  4. #4
    Jul 08, 2010, 4:09 PM
    Thanks. It's accepted to test.

    To hide the refresh button please use the HideRefresh="true" property of a PagingToolbar control.
  5. #5
    Jul 08, 2010, 5:40 PM
    To fix please add the following code within the <ext:Store>:

    <AutoLoadParams>
                    <ext:Parameter Name="start" Value="0" Mode="Raw"  />
                    <ext:Parameter Name="limit" Value="10" Mode="Raw"  />
</AutoLoadParams>
  6. #6
    Jul 12, 2010, 6:47 PM
    That appears to have fixed the page breaks.

    One more issue that I noticed is that if you are on any page >1 (for example, 2) and the store gets databound to a new data source, the paging bar will show "Page 2 of 1" and the nav arrows are enabled.
  7. #7
    Jul 15, 2010, 10:04 AM
    Hello, jmcantrell!

    I've made the request to ExtJS team about this issue and waiting an answer.
    Now I would like to suggest you the following workaround.
    <ext:ResourcePlaceHolder runat="server" Mode="Script">
    </ext:ResourcePlaceHolder>

    <script type="text/javascript">
        Ext.ux.PagingToolbar.override({
            onChange: function() {
                // *** add ***
                var t = this.store.getTotalCount(),
                    s = this.pageSize;
                if (t === 0) {
                    this.cursor = 0;
                }
                else if (this.cursor >= t) {
                    this.cursor = Math.ceil((t + 1) / s) * s;
                }
                // *** end ***
                var d = this.getPageData(),
                    ps = d.pages;
                if (d.activePage > d.pages) // These two lines is
                    d.activePage = d.pages; // the workaround
                var ap = d.activePage;
                this.afterTextItem.setText(String.format(this.afterPageText, d.pages));
                this.inputItem.setValue(ap);
                this.first.setDisabled(ap == 1);
                this.prev.setDisabled(ap == 1);
                this.next.setDisabled(ap == ps);
                this.last.setDisabled(ap == ps);
                this.refresh.enable();
                this.updateInfo();
                this.fireEvent('change', this, d);
            }
        });
</script>
    Just add this code within the <head> of your page.

Similar Threads

  1. ASP:Repeater - Databind in DirectEvent Not Working - but works elsewhere?
    By Tbaseflug in forum 1.x Help
    Replies: 1
    Last Post: Mar 27, 2012, 2:36 AM
  2. [CLOSED] GridPanel.DataBind in TaskManager
    By srsantos in forum 1.x Legacy Premium Help
    Replies: 7
    Last Post: Jun 30, 2011, 8:48 AM
  3. [CLOSED] Dynamically Changing GridPanel Paging in DirectEvent
    By mbb in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Jun 18, 2011, 10:40 AM
  4. [CLOSED] [1.0] Paging not applied to Grid when loading data via DirectEvent
    By danielg in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Mar 24, 2011, 2:37 PM
  5. Remote Paging using Databind and DataReader - Is it easily possible
    By Cr@iG in forum 1.x Help
    Replies: 3
    Last Post: Mar 01, 2010, 10:27 AM

Posting Permissions