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
Related
I'm trying to create a table that looks like a spreadsheet with editable inputs inside each td. I'm using Angular's ComponentFactoryResolver as explained here, to add a row to the table when user clicks the add button.
Once the row is added, I use EventEmitter to emit all the data of that row as the last column value is changed.
I've tried to re implement the same functionality on this StackBlitz.
I'm having the following issues:
I'm unable to emit data from the newly added components. (Check Console)
Once I add a new row, the first row (not dynamic) also stops giving me the emitted data.
I'm not sure how to delete a row if user don't needs it as I don't have the reference to it.
This is what I am suggesting. You can create a list of row objects in the parent (table) component and use *ngFor to loop it over.
<app-row
*ngFor="let row of rowList"
[row]="row"
(entryUpdate)="onEntryUpdated($event)">
</app-row>
Please have a look at this
I want to edit treecolumn cell values using basic celleditor with combobox, but values contains html tags. I tried to use this solution, but it doesn't work correctly (doesn't complete edit on blur, doesn't expand if clicksToEdit: 1).
Link to example.
How to fix that?
I added <input> element into fieldSubTpl with opacity:0 and another div element for show value. Here a fiddle link.
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.
I am having Kendo Razor Grid in which I am having a Toolbar with Create button. I am having 2 different kendo grids in same page. I want to Hide only one of the Grid's Toolbar. How can I do this ?
We can hide Toolbar using the below code. As it points to class, toolbar on both grids will hide. I want only one of them to hide. How can I do this ?
$(".k-grid-toolbar").hide();
Can you just add the id of the grid you want to target in your jQuery selector?
$("#GridID .k-grid-toolbar").hide();
Try to add unique id attribute for each toolbar.
such as the first Grid's Toolbar's id as myid1, the second Grid's Toolbar's id as myid2 . Let's hiding the frist Grid's Toolbar, something like this,
$(".k-grid-toolbar#myid1").hide();
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