When using infinite scrolling on the agGrid, neither of these 2 events ever get called. Is there a way to capture that data has been updated?
Here is my grid configuration
<ag-grid-angular
#agGrid
style="width: 100%; height: 100%;"
id="ri-search"
class="ag-theme-balham"
[columnDefs]="columnDefs"
[defaultColDef]="defaultColDef"
[components]="components"
[rowSelection]="'multiple'"
[rowDeselection]="true"
[rowModelType]="'infinite'"
[paginationPageSize]="10"
[cacheBlockSize]="100"
[cacheOverflowSize]="2"
[maxConcurrentDatasourceRequests]="2"
[infiniteInitialRowCount]="1"
[maxBlocksInCache]="2"
[pagination]="true"
[paginationAutoPageSize]="true"
[getRowNodeId]="getRowNodeId"
(gridReady)="onGridReady($event)"
(onRowDataUpdated)="onGotData1($event)"
></ag-grid-angular>
and here is the event handler
onGotData1(params){
console.info('hi');
}
on got data never gets called.
You need to handle (rowDataUpdated)="onGotData1($event)". You are expecting wrong event.
Reference: Grid Events
Similarly, rowDataChanged is another event you are looking for.
Related
On this page of documentation:
https://www.ag-grid.com/archive/27.1.0/vue-data-grid/framework-data-flow/
The Vue3 code Snippet:
<ag-grid-vue
style="width: 600px; height: 150px;"
class="ag-theme-alpine"
v-model="rowData"
v-on:update:modelValue="modelChanges"
//..other bindings/attributes
methods: {
dataModelChanged(rowData) {
this.$store.dispatch('applyTransaction', rowData);
}
}
is the line:
v-on:update:modelValue="modelChanges"
meant to be?
v-on:update:modelValue="dataModelChanged"
Unfortunately the example repo is old Vue2 and not really useful for helping understand this in action as it doesn't use this binding.
Below is code for ag grid and its getting error on " this.gridApi.setColumnDefs(this.columnDefs)" can somebody guide how to resolve this issue:
<ag-grid-angular "
class="ag-theme-balham"
#agGrid
[columnDefs]="columnDefs"
id="newGrid"
[enableSorting]="true"
[enableFilter]="true"
[modules]="modules"
[paginationAutoPageSize]="true"
[rowData]="rowData"
[defaultColDef]="defaultColDef"
(gridReady)="onGridReady($event)"
[pagination]="true">>
</ag-grid-angular>
Am calling this method on GreadReady() as well as ngOnit but showing error on "this.gridApi.setColumnDefs(this.columnDefs)". Actually this.gridAPI getting undefine. and showing error in console ="Cannot read property 'setColumnDefs' of undefined"
public getcolumnData()
{
let columnDefs=[];
this.GetGridData();
let header:any =[];
Object.keys(this.JSONDATA).forEach(function(key) {
header.push(key)
});
console.log("header.........",header)
columnDefs=[...columnDefs,{headerName:header,field: header }];
});
this.gridApi.setColumnDefs(this.columnDefs)
}
gridApi for the ag-grid is only available after onGridReady event. More details regarding how you could have instance of gridApi can be found on almost every ag-grid example.
Reference: Column Definition Example
Now, what to be done.
In this case, you don't need to explicitly call gridApi.setColumnDefs. While iterating the column details received from server, simply push them inside columnDefs of the component. In your template, you have already passed the columnDefs array to the ag-grid.
this.columnDefs = [];
this.columnDefs.push({
headerName: header, field: header
// ... other details
});
I've been working with ag-grid, and on looking at other samples I've seen the following snippet of code that people use to save the ag-grid api as a variable for later use.
HTML:
template: `
<ag-grid-angular
id="grid"
style="width: 100vw;"
[style.height] = 'height'
class="ag-theme-balham ag-grid"
[columnDefs]="columnDefs"
[gridOptions]="gridOptions"
(gridReady)="onGridReady($event)"
></ag-grid-angular>`
Typescript:
onGridReady(params){
this.resizeGrid();
this.gridApi = params.api;
this.columnsApi = params.columnApi;}
I've been trying to do something similar, however when I try the same, params is showing up as "undefined". I've tried all manner of methods to try to get the api, but it's just not working for me. My grid loads correctly with the data I've passed to it, but it keeps telling me the params.api is undefined. What am I missing here?
Managed to figure it out after a bit more trial & error, posting the solution just in case anyone is having the same problem.
I took out the (gridReady)="onGridReady($event)" from my HTML code, and added the following to my GridOptions declaration:
onGridReady: this.onGridReady.bind(this),
After that I created a new method to set the api, which seems to work just fine.
onGridReady(event: any){
this.gridApi = event.api;
this.gridApi.sizeColumnsToFit();
}
Can you try removing the gridOptions from your HTML template
<ag-grid-angular
style="width: 600px; height: 500px;"
class="ag-theme-balham"
[columnDefs]="columnDefs"
[animateRows]="true"
[pagination]="true"
[sortingOrder]="sortingOrder"
(gridReady)="onGridReady($event)"
></ag-grid-angular>
Note: Not using gridoptions in the above HTML template.
And if you want to load data from the API. In .ts file
onGridReady(params) {
this.gridApi = params.api;
console.log('grid api', params.api);
this.gridColumnApi = params.columnApi;
// const dataValue = [{firstName: 'Ragavan', age: 31}, {firstName: 'Mike', age: 50}];
this.http.get('https://your-mock-url/params')
.subscribe(data => {
params.api.setRowData(data);
}
);
}
Try the above code. Hope it should work.
i have tried these below ways to d drag and drop operation in protractor
browser.actions().
mouseDown(element1).
mouseMove(element2).
mouseUp().
perform();
browser.actions().
dragAndDrop(element1, element2).
perform();
browser.actions().
mouseMove(element1).
mouseMove({x: 50, y: 0}).
doubleClick().
perform();`
i have tried above all the three options , but drag and drop functionality did not work, only source element (in this case element 1) was highlighted and it is displaying below error in console
Error: Timeout - Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL.
The DOM code is below
<div class="catHoverDivClass ng-star-inserted" id="categoryNameVal" name="categoryNameVal" style="word-wrap: break-word;white-space: normal;width: 130px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;max-width: 100%;" ng-reflect-klass="catHoverDivClass" ng-reflect-ng-class="[object Object]">
Parent Category
</div>
<div class="catHoverDivClass ng-star-inserted" id="categoryNameVal" name="categoryNameVal" style="word-wrap: break-word;white-space: normal;width: 130px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;max-width: 100%;" ng-reflect-klass="catHoverDivClass" ng-reflect-ng-class="[object Object]">
Category4
</div>
browser.driver.actions().mouseDown(element(sourceElement)).mouseMove(element(sourceElement)).mouseUp(destination).perform();
this is working for me.
I'm looking for a infinite scroll script, but can't find one which really fits my needs. I have found one which would be great, but the problem is that the script works after the User scrolls down using the browser SCROLLBAR. Instead it should load and display more data depending on the div "scroll" position.
How can i do that? It doesn't have to be this script but it should include a mysql query function so I can implement mine easily, because I'm really a newbie in Javascript, jQuery etc. A tutorial would do it also...but can't really find one. All of them are depending on the browser's scroll position.
That's the script I'm using:
github.com/moemoe89/infinite-scroll/blob/master/index.php
I made only one modification:
news_area{ width:400px; height:95px; overflow:auto;}
Thanks in advance!
Instead of $(window).scrollTop() use any container that you would want to get it's scrolling position from, like $('.scrollable').scrollTop().
$('.scrollable').on('scroll', function(){
var $el = $(this);
$('.scrolled').text($(this).scrollTop());
if( $el.innerHeight()+$el.scrollTop() >= this.scrollHeight-5 ){
var d = new Date();
$el.append('more text added on '+d.getHours()+':'+d.getMinutes()+':'+d.getSeconds()+'<br>');
}
});
div {
height: 50px;
border: 1px solid gray;
overflow: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Scrolled from top: <span class="scrolled">0</span></p>
<div class="scrollable">
text<br>
text<br>
text<br>
text<br>
text<br>
text<br>
</div>