DBGrid Built-In Navigation Bar: Display When Not In Paged Mode - How

[andyhill]

I use data filtering logic to control the amount of data fetched and do not want the Grid in Paged mode, however I DO WANT the Built-In Navigation Bar - please advise how to show the Built-In Navigation Bar when not in Paged Mode - Thanks (I searched the forum but too many non related search results).

[Sherzod]

Hello,

I will check. 

[Sherzod]

One possible solution:

OnFormReady ->

procedure TMainForm.UniFormReady(Sender: TObject);
begin
  with UniDBGrid1, UniDBGrid1.JSInterface do
    if not WebOptions.Paged then
      JSCall('addDocked', [JSObject(['xtype', 'toolbar', 'dock', 'bottom', 'height', '40px', 'items', UniDBNavigator1.JSControl])]);

end;

 

[andyhill]

UniDBNavigator1 is not the Built-In one but an externally added one, I need the Built-In PaginBar that has been modified by me in FormCreate Grid.UniEvents

MyScript:= 'pagingBar.afterCreate=function pagingBar.afterCreate(sender)'#13#10 +
                   '{'#13#10 +
                   I add all of the new Buttons and DatePickers etc. here, all good, they show and work perfectly when paged

[andyhill]

So far

GridPagingBarScript.txt

[andyhill]

This is what I found, there are several grids and I wanted to sync all Grid DatePicker's value no matter which grid DatePicker was clicked, I did this by using the same DatePicker ID (I know it was naughty).

Going back to unique DatePicker ID's - all good - except no date syncing.

Please show me how to set/update the value of the DatePicker in each of the Grids PagingBar at runtime - Thanks.

grdTest DatePicker id: "gridDate"

grdTest2 DatePicker id: "gridDate2"

etc.

Thinking Out Aloud ???
with grdTest2.JSInterface do begin
  with pagingBar.JSInterface do begin
    JSCall('getPicker().setValue', ['+MyDate+']);
  end;
end;

Please advise - Thanks

[andyhill]

Sherzod, can you please give me the JSCall to set the PagingBar DatePicker (id: "gridDate2" see GridPagingBarScript.txt above) Date - thanks

Also, how to show PagingBar when grid is not in paged mode.

[Sherzod]

Hello Andy,

I have given you the solution and you need to move all the components there first.

12 minutes ago, andyhill said:

how to show PagingBar when grid is not in paged mode.

 I think it's impossible.

[andyhill]

I want to keep my PagingBar so will suffer Paged Mode for now.

Please advise how I can set the Grid's PagingBar DatePicker(id: "gridDate2") outside of Grid event.

[Sherzod]

Once again, provide some of the code first, how you add it to the pagingBar?

[andyhill]

I have, see txt file above, extract below

MyScript:= 'pagingBar.afterCreate=function pagingBar.afterCreate(sender)'#13#10 +
             '{'#13#10 +
             '  '#13#10 +
             '  sender.add('#13#10 +
             '  [ '#13#10 +

             '    {'#13#10 +
             '      xtype: '#39'tbseparator'#39#13#10 +
             '    },'#13#10 +

             '    {'#13#10 +
             '      xtype: "datefield", '#13#10 +
             '      fieldLabel: "", '#13#10 +
             '      formatText: "Date", '#13#10 +
             '      labelWidth: "0px", '#13#10 +
             '      format: "d/m/Y", '#13#10 +
             '      value: new Date(), '#13#10 +
             '      id: "gridDate2", '#13#10 +
             '      width: 120, '#13#10 +
             '      startDay: 1, '#13#10 +
             '      listeners: '#13#10 +
             '      {'#13#10 +
             '        change: function(el, v) '#13#10 +
             '        {'#13#10 +
             '          ajaxRequest(sender, '#39'_DateChange_'#39', ["dtIndx=0", "val=" + Ext.Date.format(v, "d/m/Y")]) '#13#10 +
             '        }'#13#10 +
             '      }'#13#10 +
             '    },'#13#10 +
...

Please advise how I can set the Grid's PagingBar DatePicker(id: "gridDate2") outside of Grid event.

[Sherzod]

Ok, I will try to check. 

[Sherzod]

7 hours ago, andyhill said:

Please advise how I can set the Grid's PagingBar DatePicker(id: "gridDate2") outside of Grid event.

procedure TMainForm.UniButton1Click(Sender: TObject);
var
  DateFieldId: string;
begin
  DateFieldId := 'gridDate2';
  UniDBGrid1.JSInterface.JSCode('var dateValue=Ext.Date.parse("'+FormatDateTime('yyyy-mm-dd hh:nn:ss', Now) +'", "Y-m-d H:i:s");'#1'.pagingBar.getComponent("'+ DateFieldId +'").setValue(dateValue);')
end;

 

[andyhill]

Thank You Sherzod, will test.

As you have explained we have to have Paged Mode in order to display the Grid's in-built PagingBar, how can we make the PageSize Automatic ?

[Sherzod]

3 hours ago, andyhill said:

how can we make the PageSize Automatic ?

I don't quite understand.

[Sherzod]

If I understand you correctly, then you can control the PageSize property, and in addition hide unnecessary elements related to pagesize...

[andyhill]

Grid is displayed in Panel with Flex sizing that effects the Grid Size and Therefore the PageSize (including Orientation).

Constantly re-calculating the Grid Size and Re-Setting the PageSize is just not elegant - plus rows are not always flush with Grid Footer (grid size / font sizing etc.).

 

 

[Sherzod]

I mean WebOptions.PageSize...

[andyhill]

Yes, WebOptions:-

Paged:= True;
PageSize:= AUTO;

Grid is auto-sizing via flex container, Screen real-estate varies, Grid.Row.Cell.Font's vary, I want the Grid fully populated with maximum number of rows.

"Constantly re-calculating the Grid Size and Re-Setting the PageSize is just not elegant - plus rows are not always flush with Grid Footer (grid size / font sizing etc.) no matter how it is calculated"

[Sherzod]

@andyhill

I don’t understand what recalculation you are talking about.

13 hours ago, andyhill said:

PageSize:= AUTO;

You have three options at least I think.

1. After querying the database, you must find out the count of records, and set this value to WebOptions.PageSize.

2. Just set the value to the maximum, for example: 

WebOptions.PageSize := MaxInt;

3. Do not use pagingBar at all, and use your own, as I gave the example above.

It's all...

[Sherzod]

@andyhill

Was I able to help you?

[andyhill]

Yes Sherzod, the "dateValue=Ext.Date.parse" code above was perfect - thank you again.

I understand that I can add my own NavigationBar but I prefer to use the auto-built-in PagingBar one that comes with the Grid Component (this reduces component count on large projects).

I understand your MaxInt suggestion.

In the future, can we get Sencha to allow the PagingBar to be shown even when the grid is not in Paged Mode (I control which buttons are shown and which buttons are hidden). Also an Auto-PageSize would be a nice addition.

Thanks again.