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........ :)
Related
I am showing a list of columns using a react table. I have a drop down as a first column which shows list of columns that needs to be shown/hidden. But The problem is whenever a column is being hidden by making show as false ,the table width does not get adjusted.
This is after I have hidden all the columns using settings icon , there is a lot of space after status column. I want to avoid it . I am using width property to set width for each column. I want the width to get auto adjusted
Are you using react-table? If so I found this example. I think this is what you are looking for.
react-table simple table
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.
I am using NG-grid to display data in a table. I need to hide certain cells in a row if the 2nd cell in that same row gives back a certain response. I am writing a method that for each cell it will check to see what the value of the 2nd cell in this row is. My problem is I have no idea how to reference the value in that 2nd cell. Is it something like {{row.entity[col.field[1]]}}??? Thanks you
If you have access to the column name, you can use {{row.getProperty(\'columnName\')}}.
You can look at the row templates for an example.
Folks,
I am using ng-grid to display a list of items.
I want to give my users ability to rearrange the rows in the list.
i.e move the rows up and down as they please.
Now,
However when I update the grid data in the backend i.e say change the index of a particular row, that row does not automatically change locations in the front-end.
What am i missing here ?
I have created a plunker to describe the problem
http://plnkr.co/edit/s1hrTSqF2zeZo3Btaln0
The grid doesn't use the index of the array to order it, so even if you are changing it, because the data is still there nothing happens.
What you could do is define an order field and update the value then changing the values as shown in this plukr. The order field you can hide it from the grid if required using columnDefs to explicitly defined which column should be shown.
Regards
I need to be able to dynamically change the width of a column in my grid according to the length of the data which is loaded for that column. For example, I have a column for "Name", and the names might get really long but I want to be able to show the entire name.
when data is loaded to your store there is fired event 'load'...
loop thru the results, find out longst name, and adjust ColumnModel...