I'm new to angular, and I can't get any proper answer for that :( Please help
I need to get the selected row's data, then pass it to another page.
When configuring gridOptions you can register to ui-grid's API and get the selected rows:
Controller
private getGridOptions() {
return {
onRegisterApi: (gridApi: uiGrid.IGridApi) => {
this.selectedRows = gridApi.selection.getSelectedRows();
}
};
}
More on interaction with ui-grid's API - http://ui-grid.info/docs/#/api/ui.grid.class:GridOptions
Related
We have an Ag-Grid table with row selection via the built in checkbox functionality. The check boxes are conditionally displaying via the isRowSelectable options:
isRowSelectable: function (rowNode) {
return rowNode.data ? rowNode.data.published === false : true;
}
The published column is being updated as part of a modal called from another column. A redrawRows is being called when the modal is closed:
modal.result.then(() => {
const row = params.api.getDisplayedRowAtIndex(params.rowIndex as number);
//this.gridApi?.redrawRows([row] as any);
this.gridApi?.redrawRows();
});
The display values in the row are being updated when the modal is closed, however, the checkbox is not appearing when the published value is set to false. If I hang a breakpoint in Dev Tools the isRowSelectable code does not appear to be hit.
Any suggestions would be much appreciated.
Cheers,
-John
Can you try this and see if it works?
let itemsToUpdate = [];
let data = rowNode.data;
// modify data fields
// Ex: data.field1 = "new value";
itemsToUpdate.push(data);
this.gridApi.applyTransaction({update: itemsToUpdate});
https://www.ag-grid.com/javascript-data-grid/data-update-transactions/
Use refreshCells
this.gridApi?.refreshCells({force:true});
https://www.ag-grid.com/react-data-grid/view-refresh/#redraw-rows
I'm trying to implement server-side filtering for ag-grid
on grid ready event I configure datasource object:
onGridReady(params) {
this.gridApi = params.api;
this.gridColumnApi = params.columnApi;
var that = this;
params.api.setDatasource({
getRows(params) {
that._fetchData(data => params.successCallback(data));
}
});
}
the datasource is called and data gets displayed. but when I change filtering -- nothing happens. here is a sandbox to demo: https://codesandbox.io/s/wkop8pj6kl (https://gist.github.com/evgeny-t/90ef8e37fe747549a1d8203ef806df9e)
is it possible to do within the community version? What did I miss?
Please, add enableServerSideFilter flag to AgGridReact
You can also use enableServerSideSorting flag if required.
This thread helped me (https://github.com/ag-grid/ag-grid/issues/2237)
im stucked in a dumb problem, but i don't know how to go ahead, so i hope that someone of you can give me a help.
My problem is that i have a list of element, and i can acces for everyone of them, in which i can load the specific data of the element. In this view i can load the data from the REST backend call, and work all prettly, the problem that i have encountered is when i have to load a list with the select tag, and im working with ng-model and ng option. I want to load in that list the data selected that the element have in this moment, but when i try to put in ng-model the data that i give from the backend, that doesnt work, instead if i initialize the same element out of the service call backend that work and i can see the element selected. The service is working because i can see every value of the element, and even if i try to take the specific value i can see it if for example i put that in a paragraph. Thanks in advance.
this is where i load the list:
self.AzionePropostaLista=[
{ qsAzioneProposta:'SENSIBILIZZAZIONE', value: 'SENSIBILIZZAZIONE'},
{ qsAzioneProposta:'INIBIZIONE MANUAL ENTRY', value: 'INIBIZIONE MANUAL ENTRY'},
{ qsAzioneProposta:'INIBIZIONE BANDA', value : 'INIBIZIONE BANDA'},
{ qsAzioneProposta:'INIBIZIONE COMPLETA', value : 'INIBIZIONE COMPLETA'},
{ qsAzioneProposta:'REVOCA', value : 'REVOCA'},
{ qsAzioneProposta:'RINUNCIA', value :'RINUNCIA'},
{ qsAzioneProposta:'SBLOCCO', value :'SBLOCCO'},
{ qsAzioneProposta:'COMUNICAZIONE INTERNA', value :'COMUNICAZIONE INTERNA'},
{ qsAzioneProposta:'AUTOFIN.SOSPETTATO', value : 'AUTOFIN.SOSPETTATO'},
{ qsAzioneProposta:'VALUTATO SENZA RISCHIO', value :'VALUTATO SENZA RISCHIO'}
];
This is the data that im retriving from the backend service:
self.condition: "SENSIBILIZZAZIONE"
MerchantService.getThisAction({qs_key:$routeParams.qs_key,qs_data_proposta:formatData},function(response){
if(response.statusCode==0){
self.action = response.data;
self.condition = response.data.qsAzioneProposta; THIS DOESN'T WORK BUT I CAN SEE THAT VALUE
$log.debug("self.condition is"+self.condition);
}
else {
sweetAlert('Error','something missing or you are trying to acces an inexistent merchant', 'error');
$location.path("/home");
}
});
// self.condition = 'SENSIBILIZZAZIONE' THIS WORK
<div class="input-field col s4">
<select ng-model="$ctrl.condition" ng-options="azione.value as azione.qsAzioneProposta for azione in $ctrl.AzionePropostaLista"></select>
<label>Suggested action</label>
</div>
This is the data that i'm retriving from the backend
Your ng-model aggregates azione.value from ng-options therefore:
Change:
self.condition = response.data.qsAzioneProposta;
to:
self.condition = response.data.value;
DEMO
How do I reset my ExtJS filters in my grids. More specifically, how do I get the header to honour the changes to the filtering.
ie. This works fine :
grid.store.clearFilter();
But the header rendering is all wrong. I need to get into all the menu objects and unselect the checkboxes.
I am getting pretty lost. I am pretty sure this gives me the filterItems :
var filterItems = grid.filters.filters.items;
And from each of these filter items, i can get to menu items like so :
var menuItems = filter.menu.items;
But that's as far as I can get. I am expecting some kind of checkbox object inside menu items, and then I can uncheck that checkbox, and hopefully the header rendering will then change.
UPDATE :
I now have this code. The grid store has its filter cleared. Next I get the filterItems from grid.filters.filters.items and iterate over them. Then I call a function on each of the menu items.
grid.store.clearFilter();
var filterItems = grid.filters.filters.items;
for (var i = 0; i<filterItems.length; i++){
var filter = filterItems[i];
filter.menu.items.each(function(checkbox) {
if (checkbox.setChecked)
checkbox.setChecked(false, true);
});
}
The checkboxes do get called, but still nothing is happening :(
Try this code:
grid.filters.clearFilters();
This should take care of both the grid and its underlying store.
When you do
grid.store.clearFilter();
it can only clear the filters on the store but the grid's view doesn't get updated with that call. Hence to handle it automatically for both the grid's view as well as the grid's store, just use
grid.filters.clearFilters();
Hope it helps!
Cheers!
Your update help me but you forget the case where you have input text instead of checkbox.
So this is my addition of your solution:
grid.filters.clearFilters();
var filterItems = grid.filters.filters.items;
for (var i = 0; i<filterItems.length; i++){
var filter = filterItems[i];
filter.menu.items.each(function(element) {
if (element.setChecked) {
element.setChecked(false, true);
}
if(typeof element.getValue !== "undefined" && element.getValue() !== "") {
element.setValue("");
}
});
}
When you use grid wiht gridfilters plugin
and inovoke
grid.filters.clearFilters();
it reset applyed filters, but it don't clean value in textfield inside menu.
For clean textfield text you can try this:
grid.filters.clearFilters();
const plugin = grid.getPlugin('gridfilters');
let activeFilter;
if('activeFilterMenuItem' in plugin) {
activeFilter = plugin.activeFilterMenuItem.activeFilter
}
if (activeFilter && activeFilter.type === "string") {
activeFilter.setValue("");
}
Thanks to the answer from "Words Like Jared" at Angularjs + kendo-ui treeview, I got my treeview working and everything was fine. Until - someone wanted to update/filter the treeview based on checkboxes and the like. My problem is that the tree does not update to reflect the change in the datasource made in the controller.
Based on the jsfiddle in the answer mentioned above, I have created one to show my problem.
http://jsfiddle.net/rajeshmathew/LwDs5/
if ($scope.showLimitedRecords) {
$scope.thingsOptions = {dataSource: $scope.things2}
} else {
$scope.thingsOptions = { dataSource: $scope.things1 };
}
Checking the checkbox does not affect the tree.
I am a newbie to AngularJS and angular-kendo, and I am wondering if this kind of an update is even supposed to work. I might be going at this the wrong way. Any help/suggestions are much appreciated.
Thanks!
You could create the data source explicitly and then set the data using its API:
$scope.thingsOptions = {
dataSource: new kendo.data.HierarchicalDataSource({
data: $scope.things1
})
}
$scope.toggleFlag = function () {
if ($scope.showLimitedRecords) {
$scope.thingsOptions.dataSource.data($scope.things2);
} else {
$scope.thingsOptions.dataSource.data($scope.things1);
}
}
(updated demo)