How to hide ag-grid if rowData is null? - javascript

I have a use case where the ag-grid (Angular Grid) I am using must not appear at all if the rowData is null that is returned from the Model code.
As of now I am unable to find a way to do it at the grid level.
What would be the right way to implement this? If hiding the div element is the way to do it, how does one doit in aright way from JavaScript?

If you want to hide the grid if no rows, then use an ng-if or an ng-show, pointing to the gridOptions.data.
<div ng-grid="gridOptions" ng-show="gridOptions.rowData.length>0"/>
or
<div ng-grid="gridOptions" ng-if="gridOptions.rowData.length>0"/>
If you use show, then the grid will stay there, but Angular will apply css to hide the element.
If you use if, then the grid directive will not be initialised by AngularJS until you have data present in rowData.

Related

Getting the position of an element inside an Angular Material Dialog Container

I'm trying to retrieve an element inside a material dialog container so that I can use it's position.
I am using Material Angular, and specifically the Dialog.
So far I have tried the getBoundingClientRect() after getting the element with it's associated id.
Using document.getElementById(elementId).getBoundingClientRect() returns {"x":0,"y":0,"width":0,"height":0,"top":0,"right":0,"bottom":0,"left":0}
Where elementId is the id of the button that is inside the mat-dialog.
For anyone that comes across this from my stupidity, the answer is that the element I was looking for was hidden and had no position.
I had two buttons with the same id, and it just got the first one that was in the DOM.
Changing the id of the button fixed that.

How to embed dropDown HTML inside ag-grid column Headers?

Below is the snapshot of ag-Grid and Kendo grid.
My question is how can I embed a dropdown/html inside the ag-Grid
just like I did in kendo. I've tried to bind it with headerCellTemplate but it removes the columnName header from the grid and overwrite it with the dropDown html. I want it exactly same as in the Kendo grid.
Use the headerCellRenderer instead of headerCellTemplate attribute and build the following node :
A parent div
A child span with the headerName, you can get it from the params.colDe.headerName.
A child select element
For more details check the 2nd example of this link : https://www.ag-grid.com/angular-grid-header-rendering/index.php

dgrid ColumnHider: disabling the hide columns menu?

I have a dgrid with a permanently hidden column that needs to be there, because I need to filter the table on its values. I am using ColumnHider in order to hide it and it works fine.
However, using ColumnHider also shows the small "+" button in the table corner that is used to hide/show columns, and I really don't want that button to show (hiding/showing columns is not a functionality we need to offer). I know I can use the unhideable property on the column, but this simply removes them from the menu. Even if I set all columns as unhideable, the button is still there with an empty menu.
Apart from hiding it with CSS, which I did, is there a way to tell ColumnHider not to show that menu at all?
Thanks, regards.
There's no programmatic way to completely hide the ColumnHider menu. The simplest way is with CSS, e.g.:
.dgrid .dgrid-column-hider-toggle {
display: none;
}
It's also possible to just suppress a column from ColumnHider's list by adding unhidable: true to the column's definition.
However, it's not fully clear to me whether you even need the ColumnHider extension. Regardless of what's in your actual data, if you don't want a particular field to be displayed in the grid, just don't define a column for it in columns (or whichever property you're using, e.g. subRows or columnSets). You'll still have the full data item available to you e.g. for renderCell functions and if you extend renderRow.

Angular ng- grid - hide/remove column input from column menu

When you use the flag 'showColumnMenu' with true value.
the ng-grid is rendered with button on the right end top panel.
Using this button we can hide/show the column on the grid.
In my Case I don't want to make it possible for some column to be visible on the grid - Meaning I want the the column menu box will be rendered with out some column.
Iv'e created plunker which demonstrated my problem
> http://plnkr.co/edit/VXOzBIRfyY3FoCTct9PI?p=preview
In that plnkr - I set column 'Id' to be invisible using (visible: false)
But if the user click on the column menu on the right end panel
he will be able to set it visible..
EDIT
Another scenario that I need to cover is case where there is some other
column say 'name' that I don't want the let the user configure it (by setting it as invisible) inside the column menu - meaning that column 'name' must always be on the grid!
and the user does not need to see it in the column menu..
So, if only i could hide those columns (id,name) inside the column menu
my problem will be solved..
Thanks!
You can do that editing a bit menuTemplate.html in ng-grid source file
Find line starting from :$templateCache.put('menuTemplate.html',
and line
<label><input ng-disabled=\"col.pinned\" type=\"checkbox\" class=\"ngColListCheckbox\" ng-model=\"col.visible\"/>{{col.displayName}}</label>\r" +
change to
<label ng-hide=\"col.colDef.alwaysVisible\"><input ng-disabled=\"col.pinned\" type=\"checkbox\" class=\"ngColListCheckbox\" ng-model=\"col.visible\"/>{{col.displayName}}</label>\r" +
now you can add
alwaysVisible:true
to columnDefs and it's done
Please see here working demo http://plnkr.co/edit/qmoILJ5LTMSlH7Uv9Rw8?p=preview
Why not just turn off the column menu? It sounds like you basically don't want to use it anyway. Is it important for your users to be able to hide the age column, when they can't control any other?
For hiding ID, I'd recommend not putting in the list of columns in the first place. Even if you don't include it in the grid, it will still be present in the data and accessible by your code. The grid is just a place to display information to the user, so don't put info in there that you don't want to display.
Edit: Check out UI-Grid, the updated version of the Ng-Grid project: http://ui-grid.info/
It has a new ColumnDef property, "EnableHiding" for exactly this case.
Here's their documentation for upgrading from ng-grid: http://ui-grid.info/docs/#/tutorial/099_upgrading_from_2

Dojo datagrid - getSelected() of row that has not been drawn

I'm trying to select rows dynamically on a datagrid using the grid.selection.setSeleted() and grid.selection.getSeleted() methods.
I can select rows that are currently undrawn (i.e you must use the horizontal scroll bar to see them). But when I try to get the row contents using grid.selection.getSeleted(), the array returns nulls instead of the row data.
Is there any way to get the selected row data even if it is not currently drawn? Although it's slower can I force dojo to draw the entire grid, even if some of it is not displayed?
Have al look : http://dojotoolkit.org/reference-guide/1.8/dojox/grid/DataGrid.html#working-with-selections
It's a good example how to use getSelected()
and this is a Post from the dojo Forum. It discribes an error that's maybe familiar to yours.
http://dojo-toolkit.33424.n3.nabble.com/dojox-grid-DataGrid-selection-getSelected-odd-behaivour-td3941395.html
Regards

Categories

Resources