ExtJS Dynamically resizing Grid column - extjs

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...

Related

react-table: click table cell to expand row height and column width to display its contents

I'd like to be able to configure certain columns such that clicking on a cell results in the expansion of the height of its row, and column width if necessary, in order to fit and display the entire contents of the cell. (I've truncated these cell contents in my default table view in order to maintain a consistent grid layout.) Solution please within the context of the react-table V7 kitchen-sink example. Thank you. P.s. Also displaying cell contents on hover (tooltip style), if possible.

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........ :)

Data Values not visible in the DevExpress grid

I am using DevExpress Winforms for representing my Grid Structure.
What is happening is that i'm using DevExpress in an already developed application.
I am assigning the DataSet table to DataSource in the grid layout view.
I am using XtraGrid and Column Header is in camelcase.
What is happening is that Column Headings are being displayed, it is showing that 30 entries are loaded but nothing is being displayed. As in no data value is visible.We found the issue field name is case sensitive.
How do we handle this ?
Any helps/ leads will be appreciated.
If you have visible columns and you can see rows with empty cells I'll bet the field names (GridColumn.FieldName) do not match with column names of your DataTable.
The field names have nothing to do with the header captions (GridColumn.Caption) but the caption is automatically determined out of the fieldname if it is not set to another string.

Grid not updating upon change in model in angularjs

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

ExtJS 4 - How to avoid grid column value becoming null when column editor is combo-box?

I have a column in a grid with editor as combo-box.
When the grid is loaded then all the column values get displayed properly.
The issue is, when user clicks at the column (having combobox as editor) to edit it then the column value becomes null as shown in the attached screenshot.
I understand that the value becomes null as the store of combobox has not been loaded yet.
I can not use autoLoad true due to the heavy amount of data present in the combobox store. Moreover, even if I use autoLoad:true for the store with paging in it, then that too safeguards only those values which are present in the first page and not all.
Thus, how can I maintain the value in grid column when that value is not present in the store of combobox used as editor for the column?
Could anyone guide at this?
PS: I am using ExtJS Ver 4.0.2a
I have been able to find a solution for this.
It has more to do with the version of ExtJs. If we upgrade to 4.0.7 and then use forceSelection:false for a combobox then things work fine as expected. That is, the combo-box accepts a value which doesn't exist in its store and doesn't set the current value to null.
Hope this helps someone else too looking for something similar.
I would suggest having the grid record contain both that columns value, as well as display value. If the combo store lookup is unable to find a matching value (because that combo store hasn't been loaded yet), then revert to showing the display value stored with the grid record.
You might also need to have the afteredit event on the grid update that grid records display value after that column is edited for a particular row.

Resources