Styjun

How to avoid typing 'git' at the begining of every Git command

Is Lambda Calculus purely syntactic?

The origin of the Russian proverb about two hares

Write a function that checks if a string starts with or contains something

Does putting salt first make it easier for attacker to bruteforce the hash?

Grep Match and extract

Why is Na5 not played in this line of the French Defense, Advance Variation?

What STL algorithm can determine if exactly one item in a container satisfies a predicate?

Why did Intel abandon unified CPU cache?

Solving ‘Null geometry…’ error during distance matrix operation?

Java Servlet & JSP simple login

I have a problematic assistant manager, but I can't fire him

Difference between prepositions in "...killed during/in the war"

Do you have to have figures when playing D&D?

How to safely destroy (a large quantity of) valid checks?

Is there a DSLR/mirorless camera with minimal options like a classic, simple SLR?

Analogy between an unknown in an argument, and a contradiction in the principle of explosion

bash vs. zsh: What are the practical differences?

Is using 'echo' to display attacker-controlled data on the terminal dangerous?

What aircraft was used as Air Force One for the flight between Southampton and Shannon?

Separate SPI data

Were tables of square roots ever in use?

Varying the size of dots in a plot according to information contained in list

Why am I getting a strange double quote (“) in Open Office instead of the ordinary one (")?

AG Grid: How to stick the scrolling at bottom

Ag-Grid Not Supporting Special SymbolHow can I disable right click/context menu for ag-grid?ag-grid won't scroll after renderingAg grid Align Master Detail grid columnsAG-Grid: How to implement Type ahead/autocomplete while filtering?How can i create this table in ag-grid? Is it possible?Dropping files onto ag-grid to upload to a folderag-grid in angular scroll bar is not workingag-Grid: toolPanel is only available in ag-Grid EnterpriseAG-Grid - How to increase row height dynamically?

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;

1

i'm using AG Grid Angular to create a log view, i will add a lot of entries per second to the grid, typically this type of view's has the newest entry at the bottom, so it would be great if there is a good way where the scrolling will stick at the bottom, so i can always see the latest entry. A bonus would be, if i can manually scroll up and the scrolling will stay at this position.

ag-grid ag-grid-angular

share|improve this question

asked Mar 24 at 20:32

PudelduscherPudelduscher

204117

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  See How to Ask, show us what you have tried so far. Go through how to create minimal reproducible example. Share ur code on plunk or stackblitz
  
  – Paritosh
  Mar 25 at 1:23
  

  
  
  
  

add a comment | 

1

i'm using AG Grid Angular to create a log view, i will add a lot of entries per second to the grid, typically this type of view's has the newest entry at the bottom, so it would be great if there is a good way where the scrolling will stick at the bottom, so i can always see the latest entry. A bonus would be, if i can manually scroll up and the scrolling will stay at this position.

ag-grid ag-grid-angular

share|improve this question

asked Mar 24 at 20:32

PudelduscherPudelduscher

204117

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  See How to Ask, show us what you have tried so far. Go through how to create minimal reproducible example. Share ur code on plunk or stackblitz
  
  – Paritosh
  Mar 25 at 1:23
  

  
  
  
  

add a comment | 

i'm using AG Grid Angular to create a log view, i will add a lot of entries per second to the grid, typically this type of view's has the newest entry at the bottom, so it would be great if there is a good way where the scrolling will stick at the bottom, so i can always see the latest entry. A bonus would be, if i can manually scroll up and the scrolling will stay at this position.

ag-grid ag-grid-angular

share|improve this question

asked Mar 24 at 20:32

PudelduscherPudelduscher

204117

share|improve this question

asked Mar 24 at 20:32

PudelduscherPudelduscher

204117

share|improve this question

asked Mar 24 at 20:32

PudelduscherPudelduscher

204117

asked Mar 24 at 20:32

PudelduscherPudelduscher

204117

asked Mar 24 at 20:32

PudelduscherPudelduscher

204117

1 Answer
1

active

oldest

votes

1

Here's one way to do it:

handle rowDataChanged in your markup:

<ag-grid-angular
 class="ag-dark"
 [rowData]="messages"
 [columnDefs]="columnDefs"
 [gridOptions]="gridOptions"
 (bodyScroll)="handleScroll($event)"
 (rowDataChanged)="handleRowDataChanged($event)">
</ag-grid-angular>

In the handler for rowDataChanged, call ensureVisibleIndex to scroll to the last row added:

 gridOptions: GridOptions = 
 suppressScrollOnNewData: true,
 
 handleRowDataChanged(event) 
 const index = this.messages.length - 1;
 this.gridOptions.api.ensureIndexVisible(index, 'bottom');
 

Demo:
https://stackblitz.com/edit/angular-ag-grid-stuck-to-bottom

In that code there is also some logic around when to keep the table scrolled to the end or not based on the scroll position.

share|improve this answer

edited Apr 22 at 17:48

answered Apr 19 at 23:03

inorganikinorganik

13.3k136284

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  that works perfect. thank you
  
  – Pudelduscher
  Apr 23 at 12:57
  

  
  
  
  

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55328287%2fag-grid-how-to-stick-the-scrolling-at-bottom%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

1

Here's one way to do it:

handle rowDataChanged in your markup:

<ag-grid-angular
 class="ag-dark"
 [rowData]="messages"
 [columnDefs]="columnDefs"
 [gridOptions]="gridOptions"
 (bodyScroll)="handleScroll($event)"
 (rowDataChanged)="handleRowDataChanged($event)">
</ag-grid-angular>

In the handler for rowDataChanged, call ensureVisibleIndex to scroll to the last row added:

 gridOptions: GridOptions = 
 suppressScrollOnNewData: true,
 
 handleRowDataChanged(event) 
 const index = this.messages.length - 1;
 this.gridOptions.api.ensureIndexVisible(index, 'bottom');
 

Demo:
https://stackblitz.com/edit/angular-ag-grid-stuck-to-bottom

In that code there is also some logic around when to keep the table scrolled to the end or not based on the scroll position.

share|improve this answer

edited Apr 22 at 17:48

answered Apr 19 at 23:03

inorganikinorganik

13.3k136284

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  that works perfect. thank you
  
  – Pudelduscher
  Apr 23 at 12:57
  

  
  
  
  

add a comment | 

1

Here's one way to do it:

handle rowDataChanged in your markup:

<ag-grid-angular
 class="ag-dark"
 [rowData]="messages"
 [columnDefs]="columnDefs"
 [gridOptions]="gridOptions"
 (bodyScroll)="handleScroll($event)"
 (rowDataChanged)="handleRowDataChanged($event)">
</ag-grid-angular>

In the handler for rowDataChanged, call ensureVisibleIndex to scroll to the last row added:

 gridOptions: GridOptions = 
 suppressScrollOnNewData: true,
 
 handleRowDataChanged(event) 
 const index = this.messages.length - 1;
 this.gridOptions.api.ensureIndexVisible(index, 'bottom');
 

Demo:
https://stackblitz.com/edit/angular-ag-grid-stuck-to-bottom

In that code there is also some logic around when to keep the table scrolled to the end or not based on the scroll position.

share|improve this answer

edited Apr 22 at 17:48

answered Apr 19 at 23:03

inorganikinorganik

13.3k136284

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  that works perfect. thank you
  
  – Pudelduscher
  Apr 23 at 12:57
  

  
  
  
  

add a comment | 

Here's one way to do it:

handle rowDataChanged in your markup:

<ag-grid-angular
 class="ag-dark"
 [rowData]="messages"
 [columnDefs]="columnDefs"
 [gridOptions]="gridOptions"
 (bodyScroll)="handleScroll($event)"
 (rowDataChanged)="handleRowDataChanged($event)">
</ag-grid-angular>

In the handler for rowDataChanged, call ensureVisibleIndex to scroll to the last row added:

 gridOptions: GridOptions = 
 suppressScrollOnNewData: true,
 
 handleRowDataChanged(event) 
 const index = this.messages.length - 1;
 this.gridOptions.api.ensureIndexVisible(index, 'bottom');
 

Demo:
https://stackblitz.com/edit/angular-ag-grid-stuck-to-bottom

In that code there is also some logic around when to keep the table scrolled to the end or not based on the scroll position.

share|improve this answer

edited Apr 22 at 17:48

answered Apr 19 at 23:03

inorganikinorganik

13.3k136284

<ag-grid-angular
 class="ag-dark"
 [rowData]="messages"
 [columnDefs]="columnDefs"
 [gridOptions]="gridOptions"
 (bodyScroll)="handleScroll($event)"
 (rowDataChanged)="handleRowDataChanged($event)">
</ag-grid-angular>

 gridOptions: GridOptions = 
 suppressScrollOnNewData: true,
 
 handleRowDataChanged(event) 
 const index = this.messages.length - 1;
 this.gridOptions.api.ensureIndexVisible(index, 'bottom');
 

share|improve this answer

edited Apr 22 at 17:48

answered Apr 19 at 23:03

inorganikinorganik

13.3k136284

answered Apr 19 at 23:03

inorganikinorganik

13.3k136284

answered Apr 19 at 23:03

inorganikinorganik

13.3k136284