Grid paging

[Yannis]

Hello,

I bind a gridpanel thrue a static ajax method that use the javascript loaddata method.
On my store object, I didn't set the DataSourceID property either the OnRefresh event.

My grid is bound correctly.
- If I press the Refresh button of the bottom bar, I have a JS error (root.length => length is not defined).
I think it does a postback and use the loadData without parameter.

- If I press the next or prev button of the paging bar of the grid, the refresh icon is activated but nothing is doing...

I want to trap the Move event of the grid but it is not fired !

How can I trap the next, previous or refresh action of the paging bar in javascript ?
What does it do when I click on the next page ?

Thank you...

[huynd]

Sorry, but i don't understand your problem. Please give me a simple sample.

[Yannis]

Hi,

Here a simple sample :

In Page.aspx :

<ext:Store ID="Store1" runat="server" SerializationMode="Complex" DirtyWarningText="false">
  <Reader>
    <ext:JsonReader ReaderID="ID" Root="Results" TotalProperty="TotalCount">
      <Fields>
        ...
      </Fields>
    </ext:JsonReader>
  </Reader>
  <SortInfo Direction="ASC" />
</ext:Store>

<ext:GridPanel ID="GridPanel1" runat="server" FireSelectOnLoad="True" StoreID="Store1"
  EnableDragDrop="True" Shim="False" BodyBorder="False" TrackMouseOver="True"> 
  <ColumnModel>
    <Columns>
      ...
    </Columns>
  </ColumnModel>
  <BottomBar>
    <ext:PagingToolbar ID="tbPaging" runat="server" DisplayInfo="true">
    </ext:PagingToolbar>
  </BottomBar>
</ext:GridPanel>

In a js file :

function bindGridPanel(start, limit) {
  if (!loadingGridPanel) {
    loadingGridPanel = true;
    Coolite.AjaxMethods.BindGridPanel(param1, param2, param3, start, limit, {
      success: function(result) {
        rows = eval("(" + result + ")");
        // Load the data into the store using the Results and TotalCount
        Store1.loadData(rows);
        loadingGridPanel = false;
      },

      failure: function(errorMsg) {
        showError(errorMsg);
        loadingGridPanel = false;
      }
    });

And finally in the Page.aspx.cs :

    [Cool.AjaxMethod]
    public static string BindGridPanel(string param1, string param2, string param3, int start, int limit)
   {
      // New instance of a class that publish a List<> and an integer property
      ResultInfo r = new ResultInfo();
      r.Results = GetData(param1, param2, param3, start, limit, out Count);
      r.TotalCount = Count;
      return Cool.JSON.Serialize(r);
   }

When I call the bindGridPanel JS method the grid is perfectly binded.
The static argument offers a quick way to bind the grid.
However I can't use the paging button of my grid because it does a postback and try to load data.
I'd like to trap the paging next and prev button in javascript and call the bindGridPanel with the good parameter start and limit.

Thank you for your help.

[huynd]

Hic, i'm sorry but i afraid that i can't help you because i haven't any experience in your problem.

With your problem, i have 2 subject to discusion:

1. Try to use the Listeners property of the PagingToolbar:

<ext:PagingToolbar runat="server" PageSize="10">
                <Listeners>
                    <Change Handler="bindGridPanel" />
                </Listeners>
            </ext:PagingToolbar>

2. Why didn't you use the OnRefresh event of the store ? Because i alway use that for paging grid panel.

<ext:GridPanel ID="gridMain" runat="server" StripeRows="true" Frame="true" Collapsible="false"
                AutoScroll="true" AutoExpandColumn="Details" Icon="ApplicationViewList"  Layout="Fit" Header="false">
                
                <Store>
                    <ext:Store ID="Store1" runat="server" OnRefreshData="OnRefreshData">
                        <Proxy>
                            <ext:PageProxy />
                        </Proxy>
                        <Reader>
                            <ext:JsonReader IDProperty="ID">
                                <Fields>
                                    
                                </Fields>
                            </ext:JsonReader>
                        </Reader>
                        <BaseParams>
                            <ext:Parameter Name="start" Value="0" Mode="Raw" />
                            <ext:Parameter Name="limit" Value="10" Mode="Raw" />
                        </BaseParams>
                    </ext:Store>
                </Store>
                <SelectionModel>
                    <ext:RowSelectionModel SingleSelect="true">
                        <SelectedRows>
                            <ext:SelectedRow RecordID="ID" />
                        </SelectedRows>
                    </ext:RowSelectionModel>
                </SelectionModel>
                <View>
                    <ext:GridView ForceFit="true">
                    </ext:GridView>
                </View>
                <ColumnModel ID="columnmodelGridMain" runat="server">
                    <Columns>
                       
                    </Columns>
                </ColumnModel>

                <BottomBar>
                    <ext:PagingToolbar ID="pagingToolbar" runat="server"  PageSize="10">
                    </ext:PagingToolbar>
                </BottomBar>
              
            </ext:GridPanel>

and onrefresh event handle code:

var start = e == null ? 0 : e.Start;
            var limit = e == null ? 0 : e.Limit;
            
            var store = gridMain.Store.Primary;

            store.DataSource = datasorce;
                ((PageProxy)store.Proxy.Proxy).Total = total_record;
                store.DataBind();

Regards,
Huy

[Yannis]

Hi,

Thank you for your reply.
I did with OnRefresh event before. It works fine for sorting and paging.

However I have to send some parameters to the server to execute the query (param1, param2 and param3 in my sample).
How can I send them just before the refresh event ?

The solution I found is to upgrade the bindGridPanel javascript method :

function bindGridPanel() {
  if (!loadingGridPanel) {
    loadingGridPanel = true;
    Coolite.AjaxMethods.BindGridPanel(param1, param2, param3, {
      success: function(result) {
                // The param1, param2 and param3 was sent to the server and can be used for the server query to bind the store
                // They are stored in some server variables to be used on the OnRefresh event.

                // Force the refreshment of the grid (call the OnRefresh event)
                GridPanel1.bottomToolbar.changePage(0);


        loadingGridPanel = false;      },
 
      failure: function(errorMsg) {
        showError(errorMsg);
        loadingGridPanel = false;
      }
    });

The problem is that the OnRefresh event is not static and force a browse of all the components.
It is more slow...

If you have a better solution, I'd appreciate.
Thanks.