I have a grid with 3 columns: title, content and date created. My largest column with most content is the content column. However this column can hold much more text than one row of the grid. Ext JS automatically trims the text from a certain point on.
Can I stop it from automatically trimming the values in the rows and just show the whole content? I would post my code, but it's an entire MVC pattern, which spreads over several files and it would take a lot of time to gather it all.
You need to use Preview or RowExpander plugin
http://docs.sencha.com/ext-js/4-0/#!/api/Ext.ux.RowExpander
http://docs.sencha.com/ext-js/4-0/#!/api/Ext.ux.PreviewPlugin
Here is the sample page you might want to look at:
http://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/grid/paging.html
Basically idea is to have custom template which will render whole your data instead of having rows of the same height.
Related
I have a DataTable that receives its column definitions and data in an Ajax call. The below example and jsbin is simplified and for illustrative purposes only but, basically, I'm setting up individual column filtering except for certain columns (based on those column definitions). DataTables have an example of individual column filtering at
https://datatables.net/examples/api/multi_filter.html
This works well but when I change the initialization of the table and add a vertical scroller, I end up with two footers - one in the dataTables_scrollBody and another in the dataTables_scrollFoot
For certain cells in the footer, I want to disable column filtering and instead apply a custom search and I do so by applying a class to those cells. In the example I've setup, this is the customSearch class. When I added a vertical scroller, my custom search stopped working and this was because my $('.customSearch').val() no longer finds the value typed into the cell. It was then I checked the length and realized the selector returned two elements and not one as it does before the vertical scroller is enabled.
Hopefully the above makes sense but, in short....
A table with headers and footers is dynamically generated based on an Ajax call. Individual column filtering is working but when I change the initialization of the DataTable to add vertical scroller, two footers is inserted and this breaks my custom search. Am I setting up the table wrong or why is it that I end up with two footers?
The example setup can be found at
https://jsbin.com/madenupuzi/
Thanks in advance for your help
I'd forgotten that I'd posted this but I'd also posted on the datatables forum where I was told that this is what happens when using a scroller and how the table is inserted into a header, body and footer. To obtain the original footer, I was told, I believe, that one had to use table().footer() and that did indeed work.
I am using DataTables for jQuery (https://datatables.net/) to create a table. I am using JavaScript to populate the table. When it is initially created, the columnn with has some adjustment (some columns are wider than others), but it is not perfect, for example there is a two line row as in the first picture below. After resizing and maximizing again, the table is readjusted to the optimal state, with plenty of room for the row with a long name. How to I get this adjustment directly after I load the table?
Try columns.adjust() here you can see how.
I know that JQGrid doesn't support column freezing for grouping tables. But is there a customized JQGrid API to freeze the first column of JQGrid grouping table?
I don't see any simple way to implement freezing column together with grouping. When you call setFrozenColumns new "frozen body" <div> will be created over the body of the grid. jqGrid makes copy of the body of the grid in the div. The table with first frozen column will be copied from the main grid body in the table in the "frozen body" <div>. One can see for example + icon in the grouping header. In case of supporting of frozen columns one need to create the same icon on the "frozen body". The original icon will be not seen more till one calls destroyFrozenColumns method. The grouping header have grouping text which is over the whole columns of the grid. jqGrid uses colspan attribute in the cells of the header row. It could be not so simple to place in the "frozen body" so that text could be long and be over the whole rows. I suppose that the with on the header will be restricted to the width of the "frozen body".
I included the above comments just to describe that there are a lot of implementation details which need be solved if one would decide to implement freezing column together with grouping. I can repeat that I don't see any simple way to do this. One have to change many parts of the grouping module (grid.grouping.js) and probably the code of setFrozenColumns and destroyFrozenColumns to implement the requirement.
In my current Webproject I have to implement a table containing all days of a month, resulting in ~30-31 table columns. Since such a huge table isn't very pretty, I wanted to implement something similar to the tables of Doodle Polls. Doodle folds a table, replaces the hidden columns with a pic and if you click on that picture it unfolds the columns -> displays the hidden columns.
But how do I achieve such a behaviour? I'm new to Javascript and not that familiar with fancy CSS3 techniques.
Especially, how do I replace the hidden columns with a picture?
The tutorials I've found only allow to hide specific columns and not to replace them.
PS: I also tagged RoR, since the project I'm working on is built with RoR and maybe there is also a Rails solution for that problem?
PPS:
You could hide the columns you want to hide first and have a column with the image displayed in the table. When the image (folding) is clicked you can hide the column containing the picture and make the other columns visible again. This is not really about some fancy css3 stuff but you need basic knowledge of how to interact with DOM elements through javascript (hide / show) elements. That should do the trick.
See this tutorial at w3schools. All that you need is get the elements you need (Image Column and all TDs in the hidden columns) ant then apply a css style to them (hidden / visible).
I need to populate my subgrid which shows some of the columns from main grid without actually going and getting data again using URL? Example:Main Grid is getting data from server (10 columns) using jsonReader. Out of which I want to show 7 columns in the parent row and 3 columns in the subgrid row . Can I do this? (Or some other way to achieve this expand concept?)
One possible workaround to use the sub-grid as 1-1 with main grid, instead of as parent-child : query all the columns as normal in the parent grid, but set the ones you don't want in main row as hidden. Then in sub-grid load event, access those fields using the "parent" row id and create them as custom fields or simply emit custom html.
This does cause duplication of the fields though, since the original main grid fields are still present, even if hidden. The html ids will get duplicated and may cause conflicts if you don't handle them.
Perhaps there is a cleaner way to do it than this (which I'm sure #Oleg will show us any minute now!)
But I wish jqgrid had a documented feature to more easily handle this kind of thing. It is very useful because you get the benefit of full inline editing in the subgrid, so you can design a much nicer edit form (eg. multiline textareas) than when confined to one straight line.
Note the presence of this feature in other grids.
Jquery EasyUI Datagrid demo
Telerik Grid Editing Demo