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.
Related
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........ :)
I am using codedUI to test a windows application. In one of the screen there is third party grid (code Jock control). I am able to retrieve the Grid as WinTable. I am able to traverse through all the rows and cells inside Grid. I am able to retrieve the text in cell inside the Grid.
Issue : For one particular grid there is 3 Columns out of which 1 Contains Check Boxes entirely and remaining 2 Columns Filled with text. I am not able to select that chekbox inside the Grid with coded UI.
I have tried with checked, TryGetClickablePoint properties but not working.
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.
I have a grid that doesn't have header. The requirement is to sort the grid manually. I have a list of columns in a combobox and radio buttons to specify column name and sort direction respectively. How can I sort that grid on a button's click? Similarly how can I hide/show columns in the same grid using the same approach(selecting columns from a list and clicking a button)?
There are API methods you can call for both your tasks.
For sorting, mind that sorting is done by store, not by grid. You can find relevant methods in Ext.data.Store documentation - search for keyword 'sort'.
For columns manipulation, you would get the column from items collection of Ext.grid.header.Container.items and then you would call show or hide method on that column.
I have just started with angularjs. Just wanted to know that if it is possible to create a sub grid inside another ng-grid. There would be some links in a column of the grid and when I click a particular link a grid corresponding to that link should be formed inside the already existing grid.The original grid would be having say 5 columns while the new grid will have say 4 columns. So something on the lines of colspan or something similar is what I look for.
If you are open for writing Angular Directive then you can use any grid ,other than ng-grid which has subgrid feature.
I know like Kendo Grid has subgrid feature and jqgrid has subgrid feature. I wrote a Grid using Google Closure library , this also has subgrid feature.
If I understand your question, you need something like master/details inside grid, it not part of base functionality. nggrid has fixed row height, for virtual scrolling purpose. On our project we have created custom grid plugin base on nggrid
Solution that we used is:
write custom sort function, which populate duplicated rows always below main
when we click expand button we duplicate current row n-times depend on subgrid height
in main row we create css overlay container which hides duplicated rows
load overlay container content via ajax
When we click hide button, we hide overlay, and remove duplicated rows.