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.
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.
Situation:
I'm playing a little by using the Matt Kruse's library I found at the page Table Sorting, Filtering, Etc at the URL http://javascripttoolbox.com/lib/table/source.php.
It works pretty well but I wish to implement a little improvement (maybe it would be better to use the locution "new feature") and I don't know where to start because I'm a newbie in js and that js file uses more advanced programming statements I don't fully understand, not yet at least.
I have a single html file with some tables in it. Some of them are filterable and sortable thanks to that library. The number of tables may vary, the number of columns (fields) in each table may vary as well, and the number of records (rows) of each table may vary as well too. Of course the content is different in each table too.
By placing a specific css class in the th element of the targeted column I choose, I indicate to the Matt Kruse's library to create in that column a html element that is populated of a list of html elements that are computed dynamically by the js it self by picking a distinct and sole value of each record for that column.
When I wish to apply a filter to the table on the basis of certain column, I have just to choose the relative from the corresponding box and the table gets filtered accordingly, as I expect to. It works just hiding the records (the html rows) with not matching criteria in that specific column with a filter applied on it. Of course it is possible to use filters on more than one column at once if needed. It works pretty similarly to MS Excel.
The problem
When I apply a filter to a column the other columns filter drop-down combo boxes (the html elements that contain the compiled options for filtering other columns) continue to show all options instead of hiding those that are filtered in the table and are no more needed. So it becomes pretty tricky especially on complex tables to choose filtering criteria from other columns because the user has to understand by himself what are the criteria that aren't usable because the corresponding rows are already hidden by a filter already applied to another column.
One more thing: when I edit the content of one or more table cells, the filter of the relative column(s) doesn't update to match the editing made, but it seems to be to stay static.
Goal of this question
If I use a spreadsheet (as LibreOffice Calc, or MS Excel, or Google online spreadsheet, or else) when I filter a column other columns' filter drop down menu are filtered as well. If I remove a filter somewhere, other columns filters drop down are updated accordingly.
All this behavior is what I would like to implement into Matt Kruse's library. In this way it would be easier to filter by multiple columns because the boxes containing the filter criteria of the other columns will show just the filter criteria left by the all the previously applied filters.
What I have already tried
I tried to implement something to do that but it was so slow that I was too much ashamed of its execution time that I already deleted the whole algorithm I created.
For comparison using the Matt Kruse's library algorithm implies just few instants to compile all tables data into filter elements (on all tables as well). But the algorithm I've implemented needed more than 30-40 seconds for just one table. Way too inefficient.
Substantially I wrote few "for loops" that for each into each of the filtered table, compares the value of the option with each one of the corresponding column and if finds a mach keeps the option visible, else it hides that element into the . I attached that algorithm to the change event of each , so when I clicked and selected the the event was triggered and all the content of the table was updated. It worked as expected but, as I said, what I implemented was way slower.
So the question is:
How do I modify the Matt Kruse's js file to implement the feature I want keeping the highest possible performance?
(If Matt Kruse is reading this, feel free to pick up this idea and implement the new features needed above: I'm sure it would be greatly appreciated).
Thanks everybody in advance for the contribution.
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 need to represent huge data(37 columns,1000+ rows) in web. I would like to fix header row of this table and then manipulate data accordingly.
There are lots of possible solutions in web, some of them depends on css and some depends on javascript.
I have tried lots of them, and each time I ve stucked at the same point where table header cells and table row cells are not aligned.
First way i have tried : https://s12-chicago.accountservergroup.com/~gomathik/demos/scroll.html
Second way i have tired : http://www.imaputz.com/cssStuff/bigFourVersion.html#
They both, fixed the header of course. But i still have the alignment problem.
Do you have any suggestions?
I m begginer to html and css, any help would be appreciated.
Thank you in advance!
i have some experience in this and i can give you some thoughts/ pointers:
easiest way to do this is to set table style to fixed, then you can change column widths with css and they will stay that wide regardless of content inside.
after your column widths is pre-defined, you can clone the thead into another table above your table and it will act like a fixed header
otherwise you will need to:
set the height of the header to 0px
clone the header into a table above the table
set the width of the new header's table to the width of original table
set the outerwidth of each cell in the new table to the outer width of the same header cell in the original table
also, none of the solutions for doing this seem to be good. i found that writing a custom solution is always better then trying to arm wrestle an existing generic plugin into doing what i need.
I worked on a project where the goal was to visualize large data sets (10-20 columns, 500+ rows), among other visualizations, as a table.
I used Google Visualization API Table. It's simple to use and controlled with JavaScript (don't scare off!).
It has nice support for formatting (through DataTable class). It actually uses HTML table markup with some extra JavaScript and CSS in there. The Table class takes care of the cell alignment. Take a look at the examples.