How to add extra input field(checkbox) to column header in Angular ui-grid - angularjs

I want to put a checkbox in ui-grid column header to group row according to that column. I don't know how to add extra input field to column header. What would be the approach to do this ?

The headerCellTemplate property on the columnDef should let you control what you want in the header. I'd also look at the menu item that grouping adds for grouping a column, you'd want to make the same call to group and ungroup the individual columns.

Related

How to hide specific columns in the grid column menu (ExtJS 6.5.3)?

I have a grid, which has some columns that are set hidden. However, if I click on the column head and open up the menubox it shows all columns in the column section. It also includes those columns that are set hidden in the grid itself. My question is how I can remove those columns from this list as well?
You can set hidden to true and hideable to false. That will hide the column and omit it from column menu.

How to add input tag to the last row of ui grid on button click

I am having a situation where I want to add input box at the end of the table. Is it possible to do this in ui-grid. I know rowTemplate, but it applies to whole column. I want to apply only to the last row of the table.

How to display too many columns in angular ui grid

In the angular ui grid i have too many columns to display.
Want to display extra columns as expand collapse under each row.
Which means expand/collapse button will be provided for each row and while exanding a particular row the extra columns headertemplate will b displayed along wil b displayed along with column values.
Is it poasible with angular ui grid
As far as , there is no an option for that.
You can use the following to make things work as you wish:
remove default row headers by setting to false enableExpandableRowHeader
adding a custom row header by calling $scope.gridApi.core.addRowHeaderColumn
For reference :
http://ui-grid.info/docs/#/tutorial/114_row_header.
http://ui-grid.info/docs/#/tutorial/216_expandable_grid.

uiGrid switch rows and columns

This is a bit of a general question into the possibilities of ui grid. I have had tremendous success with ui grid thus far. Now I have a use case where I want to switch the rows and columns of the grid.
Basically, I would like the headers to be displayed 'vertically' in the first column and to have the rows become columns.
Is this possible with ui grid?
As far as i know UI-grid doesn't support this. I doubt if you can do that. May be try building ColumnsDef and Data dynamically and pass it to gridOptions. Or else add extra column and this should be the first column where you will pass all the header values. Change the background of the cells to look like header cells. Now add second column where you pass the entire first row values. Hide the original header row completely. see now u got your required grid........ :)

extjs showing hidden columns under 'Columns'

In extjs I have a GridPanel. The GridPanel has some hidden columns. Now when I click on the Grid menu, there is an option called 'Columns'. When you mouseover 'Columns' you can check/uncheck the columns you want to show/hide.
Be default the hidden columns are also showing up on mouseover. Is there a way to avoid this?
You can use such a property for your columns:
hideable:false
In this case these columns can not participate in showing/hiding.
from column def reference:
hidden : Boolean
Optional. true to initially hide this column. Defaults to false. A hidden column may be shown via the header row menu.
If a column is never to be shown, simply do not include this column in the Column Model at all.

Resources