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.
Related
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.
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
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.
I have a set of tables in a build that use the Tablesorter 2.0 jQuery plugin to sort columns of data. It works perfectly fine until I get to a more complex table that has multiple TH rows.
Tablesorter 2.0 automatically detects the first set of THs and makes them the sorting trigger. There's no way to override this with a selector.
My complex table has multiple TBODYs with rows of THs on top like so:
I'm going to give www.datatables.net a go to see if it has a way around this but I'm worried I could run into JS conflicts with both plugins running on the site.
Any other suggestions of how to achieve table sorting within each TBODY using the row where you see 'My Equity' as the sort headers NOT the dark grey header row at the top?
An example of the source HTML is here: http://pastebin.com/CYd06L87
Datatables is a very powerful grid sorter and you should have no problem using multiple TH's. They also have solutions for table details, which might be an alternate way to approach this task. For example, you could have two main rows, one for your equity and one for your equity, all in the same table. Then, setup row details to accomplish your goal...just one possibility.
Here's the row details tut: http://datatables.net/release-datatables/examples/server_side/row_details.html
There's also a solution for summing row totals.