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();
Related
My project outputs results to a DataTable from an AngularJS controller function, but I'm running into some strangeness when I try to modify my search params. The first rendering of the table works as expected. But when I select different options and run the search again, extra rows appear in the table, but the info section shows the previous search's row count, and changing the number of rows shown via the length menu causes the new rows to disappear. Here's my table declaration, using attributes to wire up DataTables:
<table ui-jq="dataTable" ui-options="dataTableOptions" id="search-results" class="display nowrap datatable cell-borders" style="width: 100%;">
And this is my AngularJS controller code:
$scope.dataTableOptions = {
dom: "lfBrtip",
lengthMenu: [[25, 50, -1], [25, 50, "All"]],
language: {
emptyTable: 'No items matched your search criteria'
},
buttons: [
{
text: 'Export',
className: 'button button:hover',
extend: 'csv'
}
]
};
$scope.getItemInfo = function (model) {
$http({
method: 'POST',
url: $scope.getUrl('/My/ServerSide/Url'),
data: { model: $scope.model }
}).then(function successCallBack(response) {
$scope.model.SearchResults = response.data;
}, function errorCallback(response) {
alert("There was an error gathering the entity information. Please try again");
});
};
I'm not sure why submitting new queries with different params doesn't simply update the data in the DataTables table. Any suggestions?
I ended up using a bit of an ugly hack to get this to work. Even DataTables author wasn't sure how to get around the issue of using AngularJS with DataTables, so I had to force a reinitialization every time the form posted. I persisted the search params to localStorage, and called location.reload(). Then when the page loads and the AngularJS init() function runs, I pick up the search params and call the search function from inside an Angular document ready function, like this:
$scope.init = function () {
$scope.ValidationErrors = [];
$scope.model = {};
$scope.model.SearchResults = [];
$scope.model.ItemNumber = localStorage.getItem("itemNumber");
$scope.model.StartDate = localStorage.getItem("startDate");
$scope.model.EndDate = localStorage.getItem("endDate");
angular.element(document).ready(function () {
if ($scope.model.ItemNumber) {
$scope.getItemRecords();
}
});
localStorage.clear();
};
And then of course I clear the localStorage after the query. Not terribly elegant, but it'll have to do for now.
I am using function like : gridApi.selection.clearSelectedRows();
But how can I deselect the row in the following function event :
gridApi.selection.on.rowSelectionChanged($scope,function(row){};
The situation: I am open a popup and when I close the modalService I should unselect the last row I clicked.
Thanks
Store last selected row object
$scope.lastSelectedRow = {};
$scope.gridOptions.onRegisterApi = function (gridApi) {
$scope.gridApi = gridApi;
gridApi.selection.on.rowSelectionChanged($scope,function(row){
if(row.isSelected) {
// always store pointer to last row only if it is selected
$scope.lastSelectedRow = row;
}
});
}
Now you can unselect that row when you close the modal Instance
$scope.clearLastSelectedRow = function() {
$scope.gridApi.selection.unSelectRow($scope.lastSelectedRow.entity);
};
More details here
did you forget to store the gridApi? should look like below:
$scope.gridOptions.onRegisterApi = function (gridApi) {
$scope.gridApi = gridApi;
};
see this related post
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 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
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;
}