Let's say I need to set height for my ag-grid. I have to set it on the columns configuration, like that (in an Angular controller):
this.myAgGridOptions = {
columnDefs: ...,
rowData: ...,
headerHeight: 42,
rowHeight: 42
}
Now, if I have 10 different agGrid in my whole application, is there a way to set these properties only once for all of them, and not for each agGrid declaration?
My question is for the Angular 1 version of AgGrid, but if the solution can be used for any version of AgGrid, it will be great.
Thanks
What will probably work best is to use the extend method that angular provides
So you could have something like this:
this.GlobalAgGridOptions = {
headerHeight: 42,
rowHeight: 42
}
this.myAgGridOptionsOne = {
rowData: rowDataOne,
columnDefs: columnDefsOne
}
this.myAgGridOptionsTwo = {
rowData: rowDataTwo,
columnDefs: columnDefsTwo
}
angular.extends(this.mygridOptionsOne, this.GlobalOptions);
angular.extends(this.mygridOptionsTwo, this.GlobalOptions);
Now both the grid options should have the global options. I guess I am supposing that you are going to be creating somewhat different gridOptions for each grid that you plan on creating. I hope I am supposing correctly
Related
I've got a dx-select-box in AngularJS that loads an array with around 3k rows, which makes performance very slow. I would like to enable paging, but I haven't found the way to do it. I've followed the documentation:
Array data binding doc: https://js.devexpress.com/Documentation/Guide/Widgets/SelectBox/Data_Binding/Simple_Array/Array_Only/
Enable paging on select box:
https://js.devexpress.com/Documentation/Guide/Widgets/SelectBox/Enable_Paging/
But no matter what I haven't been able to put the two of them together and get them working. I have also tried this solution with no luck.
Here's the HTML code:
<div id="stockShelfs" dx-select-box="vm.stockShelfsOptions"></div>
And here's the JS:
this.stockShelfsOptions = {
valueExpr: 'stockShelfId',
displayExpr: 'name',
searchExpr: 'name',
searchEnabled: true,
acceptCustomValue: true,
value: this.product.stockShelfId,
placeholder: translate('POr_VelgStockShelf'),
bindingOptions: {
dataSource: 'vm.stockShelfs',
},
Does anyone know how this could be achieved, if possible?
I got it working by getting rid of the bindingOptions config:
dataSource: new DevExpress.data.DataSource({
store: new DevExpress.data.ArrayStore({
data: vm.stockShelfs,
key: "stockShelfId",
paginate: true,
pageSize: 1
})
}),
And then doing the two way binding inside the onCustomItemCreating function
I have a ui-grid bound to an object array called data like this:
$scope.grd = {
enableRowSelection: true,
multiSelect: true,
enableRowHeaderSelection: false,
columnDefs: [
{ field: 'id', name: 'ID' },
{ field: 'name', name: 'Name' },
{ field: 'tags', name: 'Tags' }
],
data: "data"
};
if I now replace an item in the array like this:
$scope.data[i] = replacementData;
the grid is updated correctly but the selection state is lost.
I guess the selection module simple doesn't support this though the core module does.
Is there a way to get the selection state of an item before replacing it?
I found this GridRow class in the docs of the selection module that has an isSelected property but no ideas how to get it...
Here is a Plunk that demonstrates the behavior - notice that the selectionCount is also wrong after the row is replaced, so there must be some kind of selected item info somewhere.
Update: It seems that replacing an item in the bound array doesn't remove the GridRow that ui-grid uses internally (that also is the reason why the selectedCount is wrong). Calling unSelectRow before replacing the item fixes the count but the GridRowstill exists...
Ended up copying all the properties from the replacementData over the old data object. That way the selection state is kept, and no new GridRow get's created.
Updated Plunk
angular.extend($scope.data[i], replacementData);
I understand how to hide a column in Angular UI-grid:
$scope.gridOptions = {
columnDefs: [
{ name: 'id', visible : false },
],
};
But if I only define which columns I want hidden, the grid automatically assumes that I also define which columns I want to have visible, however this is not the case so this results in an empty grid.
Is it possible to configure the grid to show 'all columns except those configured to be hidden'?
Yes, it's certainly possible as stated in GridOptions api.
You just need to add excludeProperties instead of columnDefs and assign it an array of strings where every string is a property to hide in your grid.
In your example you should just write:
$scope.gridOptions = {
excludeProperties: ['id'],
};
How do I clear AND refresh ALL of my (general Angular and built-in UI-Grid) filters on a button click?
Background: I have built an application that uses the UI-Grid and takes advantage of the built-in filtering functionality. It also has a cross-column search written in angular.
Current Battle I want to be able to clear and refresh my filters on a single button click. So far I have been able to implement this for the cross-column search but have not been successful implementing it for the built-in column filters (which ironically I thought would be the easy part!).
Research Done On Problem:
1) Searched through the UI-Grid tutorials ... fail
2) Looked at the provided UI-Grid API ...partial success! Seems like I think I found what I'm looking for in the "clearAllFilters" function (here is the source code) but I cannot figure out how to implement it so onto step 3...
3) Googled like mad for implementation demos/examples/help/hints/anything!? ...fail
4) Asked for help on Stack Overflow :)
Thanks in advance.
Sorry, I didn't see the clearAllFilters() function of ui grid. So it becomes simpler. You can do this:
$scope.clearFilters = function() {
$scope.myGridApi.grid.clearAllFilters();
};
you can do this:
//get the grid api
$scope.myGridOptions.onRegisterApi = function(gridApi) {
$scope.myGridApi=gridApi;
}
You have to bind this function to your clear button :
$scope.clearFilters = function() {
var columns = $scope.myGridApi.grid.columns;
for (var i = 0; i < columns.length; i++) {
if (columns[i].enableFiltering) {
columns[i].filters[0].term='';
}
}
};
Please try this:
$scope.gridApi.core.clearAllFilters();
The $scope.gridApi was from the initial setting of my ui-grid element
$scope.gridOptions = {
flatEntityAccess: true,
paginationPageSizes: [10, 25, 50, 75, 100],
paginationPageSize: 25,
enableFiltering: true,
enableColumnResizing: true,
enableGridMenu: true,
onRegisterApi: function (gridApi) {
$scope.gridApi = gridApi;
},
columnDefs: [{
I think this is the simple way(just replacing the grid data with original/actual json data), you can simply create and call below clearFilters function on click of a button.
$scope.clearFilters = function() {
$scope.yourGridOptions.data = $scope.originalData;
}
I have a JSON data. Simplified example:
[{"name":"xxx","age":23},{"name":"yyy","age":25}]
Data can vary (even keys can be different).
I want to show this as a table on UI using AngularJs. I am a new to Angular world. I am using ng-grid for this.
In my JS file :
//queryResponse is having above mentioned JSON data.
$scope.gridOptions = {
data: 'queryResponse',
rowHeight:46,
headerRowHeight:40,
enablePaging: false,
showFooter: false,
enableRowSelection: false,
columnDefs: [....]
};
What should be there in columnDefs as I can't hard codedisplayName, it should be taken from keys of JSON data like name & age for above mentioned code?
Simply remove columnDefs property from gridoptions and will display your key's as heading. Include columnDefs with displayName only if you want to display a static heading for specified key