I am looping through each node of ag-grid data and have to display column values.Attached is the plunkr:
https://plnkr.co/edit/cFBLm7DkAZL5oWbqdyub?p=preview.
I am not able to display the ag-grid data in the console.
var gridOptions = {
defaultColDef: {
sortable: true
},
columnDefs: columnDefs,
animateRows: true,
enableRangeSelection: true,
rowData: rowData,
checkbox : true,
onSelectionChanged : getData
};
new agGrid.Grid(gridDiv, gridOptions);
});
function getData(){
gridOptions.api.forEachNode( function (node) {
console.log("node vaalues are:"+node.data);
});
There are a couple things wrong with your code.
Inorder for onSelectChanged to be called you need to specify how you want row selection to work, try: rowSelection: 'single'
In your plunkr (not your snippet above), your getData function is in the wrong scope. By this I mean all of your code is inside the document.addEventListener, but the getData is not. Because of this, getData doesn't know what gridOptions is.
Updated plunkr: https://next.plnkr.co/edit/cXKVZrT9siHoodVa
Related
Code is:
Ext.define("Myapp", {
extend: '',
config: {},
initComponent: function () {},
getGrid: function () {
Ext.create("Ext.grid.Panel", {
...
columns: [
{
header: 'xx',
renderer: function (value) {
return '<a onclick=''>text</a>';
}
}
]
});
},
test: function(){
alert(1);
},
});
In the above code, I want call test function in onclick event. I tried Myapp.test(), But it didn't work.
Is there any way to do this?
You have to add a listener to the cell and check inside the listener function if the user clicked the 'a' tag.
A good example has been made by Tyr
Take a look at this fiddle
ExtJS components working like simple object literals, so you can extend them with anything you want. In this case, i added the property "active" which can be checked in the beforeEdit listener.
I use AngularJS 1.7 and ag-grid 18.0.1.
When I set angularCompileRows to true, I have this error in the console:
Uncaught TypeError: Cannot read property '$apply' of null
at eval (rowRenderer.js:586)
This is the code corresponding (this is agGrid code):
RowRenderer.prototype.checkAngularCompile = function () {
var _this = this;
// if we are doing angular compiling, then do digest the scope here
if (this.gridOptionsWrapper.isAngularCompileRows()) {
// we do it in a timeout, in case we are already in an apply
setTimeout(function () {
_this.$scope.$apply();
}, 0);
}
};
Here my options:
const gridOptions = {
rowData: null,
columnDefs: [...],
enableColResize: true,
onColumnResized: (params) => {
angularCompileRows: true,
suppressCellSelection: true,
enableSorting: true,
enableServerSideSorting: true,
rowModelType: 'infinite',
pagination: true,
paginationPageSize: 10,
unSortIcon: true,
suppressPaginationPanel: true,
suppressHorizontalScroll: true,
onGridReady: (params) => {
const dataSource = {
rowCount: null, // behave as infinite scroll
getRows: (rowsParams) => {
// call my API then rowsParams.successCallback(data, isLastPage);
},
};
gridOptions.api.setDatasource(dataSource);
},
};
The call stack
And the output of the debug option
The grid is rendering: headers are okay, but the content is empty.
Plunker https://plnkr.co/edit/j5ubZWit4CO5zmldgqnl?p=preview based on this exemple https://www.ag-grid.com/javascript-grid-infinite-scrolling/#example-2-equal-pagination-page-size-and-large-infinite-block-si and add angularCompileRows: true to options
EDIT: Here a plunker with an angular app https://plnkr.co/edit/7eOKSXbcCzLdYWtPygrS?p=preview
The error is not fired but the angularCompileRows do not seem to be called
If you're going to use angular with the grid, why not load angular first :). You're not loading angular and you are not using any angular code in the grid, how is it suppose to call $scope.$apply() without that?
Make angularCompileRows = false and your grid works. If you're going to use angular, start with an angular example.
This issue is very similar to this below issue:
Angular js UI grid is not getting updated with new content
but, what is my problem is, on rebind, i am using different data and columns. So when i do that on button click, the grid is not refreshed.
please check this sample : http://plnkr.co/edit/NIlEiAoZbt7ZcnXDPqrb
$scope.myfunc = function()
{
alert("Rebinding the data");
$scope.gridOptions = {};
$scope.gridOptions.columnDefs = [
{ field:'firstName' },
{ field:'lastName' },
{ field:'company' },
{ field:'employed' }
];
$scope.gridOptions.data = data2;
};
on this event, only one column (which exists on both datasets are binding properly).
-- NewBuddy
I can't see data2 in your plunk and its giving error.
Although, the below code should solve your problem.
$scope.gridOptions.onRegisterApi= function(gridApi) {
$scope.gridApi = gridApi;
};
on change of data/columns call the below function:
$scope.gridApi.grid.refresh();
I have a column in an ng-grid table that contains a certain field. I need to give it 2 different names based on the currently logged in user. How can I do that?
Constraints that make it less that straightforward. The name is loaded via an XHR as appConfig.columnName (stored on $rootScope).
columnDefs:
{
displayName: "{{ appConfig.columnLabel }}",
never interpolates, just displays as {{ appConfig.columnLabel }}
columnDefs:
{
displayName: $rootScope.appConfig.columnLabel,
fail sometimes because appConfig might not be defined yet. (This does work if I load a different view first)
I'm not sure how to wait on appConfig though, it is loaded as a service independent of which view is loading. And even if I do, how do I defer setting the config on the ng-grid?
Seems like this should be really easy, but is proving difficult.
Looking # this issue https://github.com/angular-ui/ng-grid/issues/128 I figured it out. I move the columnDefs to the $scope like so:
$scope.gridColumnDefs = [
...
{
displayName: $rootScope.appConfig && $rootScope.appConfig.columnLabel ? $rootScope.appConfig.columnLabel : "",
field: 'something',
}
...
]
Let the grid config watch the column defs like so:
$scope.gridOptions = {
...
columnDefs: 'gridColumnDefs',
...
};
Then watch the appConfig object on the $rootScope to await the arrival of the appConfig data and adjust the columnDefs with the title.
if(!$rootScope.appConfig.hasOwnProperty('columnLabel')) {
var unwatch = $rootScope.$watch('appConfig',function(newValue, oldValue) {
if(newValue.employerLabel) {
_.forEach($scope.gridColumnDefs, function(colDef) {
if(obj.field == 'something') {
colDef.displayName = $rootScope.appConfig.columnLabel;
}
});
unwatch();
unwatch = angular.noop; // $destroy listener is going to call unwatch
}
});
$scope.$on("$destroy", function() { // Don't leak this watcher on the $rootScope
unwatch();
});
}
I have created MVC 4.0 app using Web API which returns data in JSON format (I am serializing object to json using NewtonSoft.Json) and trying to bind data in ng-Grid. I am receiving data in following format:
"[{\"Name\":\"FIRST_NAME\",\"Value\":\"FIRST_NAME\"},{\"Name\":\"CURRENT_DATE_TIME\",\"Value\":\"CURRENT_DATE_TIME\"},{\"Name\":\"CLIENTID\",\"Value\":\"CLIENTID\"},{\"Name\":\"CALLMODE\",\"Value\":\"CALLMODE\"}, {\"Name\":\"new 321\",\"Value\":null}]"
When i tried to assign same to data: of ng-Grid, each char populated on different row. following is the javascript i have written:
var guidesRespApp = angular.module('guidesRespApp', ['ngGrid']);
//Get Data from restful API.
guidesRespApp.controller('MyCtrl', function ($scope, $http) {
$http.get('/api/datadictionary').success(function (thisdata) {
$scope.myData = thisdata;
});
$scope.filterOptions = {
filterText: '',
useExternalFilter: true,
};
//Setting grid options
$scope.gridOptions = {
data: 'myData',
multiSelect: true,
filterOptions: { filterText: '', useExternalFilter: false },
enableRowReordering: false,
showGroupPanel: false,
maintainColumnRatios: false,
groups: [],
showSelectionCheckbox: true,
showFooter: true,
enableColumnResize: true,
enableColumnReordering: true
};
// $scope.totalFilteredItemsLength = function() {
// //return self.filteredRows.length;
// };
});
If manually assigned like below, data is getting displayed in grid:
$scope.myData = [{"Name":"FIRST_NAME","Value":"FIRST_NAME"},{"Name":"CURRENT_DATE_TIME","Value":"CURRENT_DATE_TIME"},{"Name":"CLIENTID","Value":"CLIENTID"},{"Name":"CALLMODE","Value":"CALLMODE"}];
can anyone please help me to understand how to fix it?
Also i wanted to display count of filtered items when i key in values in filtertext.
As mentioned on http://angular-ui.github.io/ng-grid/ , Data being displayed in the grid is of type array and each element in that array mapped to a row being displayed. So I modified my code like below and it worked for me:
$http.get('http://localhost:12143/api/datadictionary').success(function (thisdata) {
//Convert data to array.
var myData = $.parseJSON(JSON.parse(thisdata));
$scope.myData = myData;
});
even var myData = $.parseJSON(angular.fromJson(thisdata)); also working. Just we need first to parse the data (for this I used JSON.parse()) and then convert to array (for this i used $.parseJSON()).
Try changing the get callback to one of the following:
$http.get('/api/datadictionary').success(function (thisdata) {
$scope.myData = JSON.parse(thisdata);
// or
$scope.myData = angular.fromJson(thisdata);
});
Reference this with regards to how webapi is returning json. ASP.NET WebAPI: How to control string content returned to client?