I have to show two types of gridOptions without using two grid's trying to change the gridOptions dynamically not working(one time working).
working example http://plnkr.co/edit/4QKGIB?p=preview.
$scope.grid1=function(){
$scope.gridOptions = $scope.gridOptions1;
$scope.gridApi.core.notifyDataChange(uiGridConstants.dataChange.ALL);
}
$scope.grid2=function(){
$scope.gridOptions = $scope.gridOptions2;
$scope.gridApi.core.notifyDataChange(uiGridConstants.dataChange.ALL);
}
Basically you need to use angular.copy() while assigning columnDef to grid, which clones the array and set it to the gridOptions.
Code
$scope.gridOptions = angular.copy($scope.gridOptions1);
$http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500_complex.json')
.success(function(data) {
$scope.gridOptions1.data = data;
$scope.gridOptions2.data = data;
$scope.grid1();
});
$scope.grid1=function(){
$scope.gridOptions = angular.copy($scope.gridOptions1);
$scope.gridApi.core.notifyDataChange(uiGridConstants.dataChange.ALL);
}
$scope.grid2=function(){
$scope.gridOptions = angular.copy($scope.gridOptions2);
$scope.gridApi.core.notifyDataChange(uiGridConstants.dataChange.ALL);
}
Working Plunkr
Related
I need to enable and disable rowSelection for view depending on some condition. Problem here is,multiple views use the same html and controller. I need the rowSelection to be disabled for a certain view and enabled in other cases.
I have tried these.
1)Assigned a function for enableRowselection which would return boolean.(Didn't work)
2)Tried with isRowSelectable too.(Didn't work)
Code is as below.Not sure if it is implemented in right way. I'm a beginner in AngularJS and ui-grid
1)
$scope.gridOptions = {
enableRowSelection: isSelectionEnabled
}
isSelectionEnabled():boolean {
var seletionEnabled = true;
if (doesn't satisfy condition) {
seletionEnabled = false;
}
return seletionEnabled ;
}
2)
$scope.gridOptions = {
isRowSelectable: function() {
if(satisfies condition) return true;
return false;
},
}
I assume you know if you want to enable rowselection on creation of the ui-grid.
Try something like:
$scope.gridOptions.onRegisterApi = function(gridApi) {
$scope.gridApi = gridApi;
$scope.gridOptions.enableRowSelection = $scope.isSelectionEnabled();
};
$scope.isSelectionEnabled = function() {
// some logic here to determine whether to enable rowselection or not
return true; // or false
};
You can pretty much change $scope.gridOptions.enableRowSelection anywhere, once the ui-grid has been created.
See this plunker for an example and/or to try out if this is what you want.
the right property is "enableRowSelection", try the following:
$scope.gridOptions = {
enableRowSelection: function () {
if(condition){
return true
}
return false;
}
}
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();
Hi I am using angular ui grid, I have filter and grouping in the grid
I am expanding by default all rows using following
$scope.expandAll = function(){
$scope.gridApi.treeBase.expandAllRows();
};
$timeout(function() {
$scope.expandAll();
}, 500);
now if user filter on any column which is not available in data
And then remove or cancel, It does not expand automatically
It shows like above
I need all rows to expand automatically when user clear or cancel filter data
I found there is an event filterChanged, but I don't know how to use that
I am using following plunkr for testing
http://plnkr.co/edit/hhIW9R9aX1JlFe4nodJQ?p=preview
Thanks
Modify your onRegisterApi method to the following
onRegisterApi: function( gridApi ) {
$scope.gridApi = gridApi;
$scope.gridApi.core.on.filterChanged($scope, function() {
var grid = this.grid;
var isfilterclear = true;
angular.forEach(grid.columns, function( col ) {
if(col.filters[0].term){
isfilterclear = false;
}
});
if(isfilterclear) {
$timeout(function() {
$scope.expandAll();
},500);
}
});
}
see plunkr http://plnkr.co/edit/1FWDIe?p=preview
I'm calling these codes at the beginning of my $scope.generateReport function hoping it would clear the data that is currently shown on the grid once I click the button. Unfortunately, it's not clearing it.
I was thinking that by setting it with undefined values, ui-grid would automatically refresh itself thereby clearing the whole grid.
$scope.generateReport = function() {
$scope.gridOptions = {};
$scope.gridOptions.data = undefined;
$scope.gridOptions.columnDefs = undefined;
$scope.gridApi.grid.refresh();
........
}
// on my html template, I have a button that has an ng-click
// ng-click="generateReport()"
Here is a plunker with an example of one way to do it:
http://plnkr.co/edit/Q1anj7jyPHz3LAXoir4E?p=preview
$scope.clear = function() {
$scope.myData.length=0;
}
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?