I have this data presented in a view with a jqGrid table.
It has a complex sorting order of rows done server side.
Now I need to be able to do some "free" sorting of the rows at the View.
By free I mean that the client needs to be able to move a row up or down to any place they want, skipping all the other sorting rules done at server.
Of course, this will need to be saved to the database later.
I thought that maybe add a column with an Up and Down arrow, that when clicked it will move the row to where it needs to be.
I'm not at my best with JavaScript, and I can't seem to find any examples of something similar to this anywhere.
Any tips on how could I approach do this?
Or is there a better option?
Thanks.
There is the Sortable Rows feature built into the jqGrid.
You set it up with the following API call:
jQuery("#yourgridid").jqGrid('sortableRows', options);
It uses the jquery-ui Sortable widget for this so the optional options parameter can be used for any of the available options for the widget which you can find here.
For Example:
jQuery("#yourgridid").jqGrid('sortableRows', { cursor: 'crosshair' });
You can see a sample of this on the Demo page. (New in Version 3.6 -> Sortable Rows)
Related
We have a request from our designers to build tables something like this, with rows that expand to show essentially another sub-table underneath. In KendoUI documentation, this is called "Hierarchy."
We use SlickGrid v2.3 with a few additional plugins. We currently have tables with a similar row expand/collapse like this: https://mleibman.github.io/SlickGrid/examples/example5-collapsing.html . That does not allow for a completely different set of columns in the sub-table.
The question is, can this be done in SlickGrid or not?
It might be hard to do with current SlickGrid, there's no code that handles the hierarchical part itself so that would be lot of work to implement in SlickGrid. However it is implemented in Slickgrid-Universal, which is a wrapper on top of SlickGrid. You can see Example 5 and Example 6 which shows 2 types of Tree Data grids (hierarchical or parentId refs). We use it in production for a project that we have. Also note that this is not a grid within a grid, it's rather an expand/collapse the same as what you found in example5-collapsing.html, the only differences with SlickGrid is that Slickgrid-Universal has the code to deal with hierarchical data (filtering/sorting) while SlickGrid itself doesn't and also another nice to know thing is that expand/collapse is actually using data filtering behind the scene and you can see that in the total items displayed when you have the footer enabled.
Please note that I'm the author of Slickgrid-Universal and also a major contributor to SlickGrid as well
At the moment, it can't be done. In order to achieve its speed, Slickgrid enforces a fixed row height and a single scrolling canvas. It's just a different approach than used by HTML display grids.
You could put together a workaround using mutiple slickgrids or an embedded slickgrid in a group row, I suppose, but it would be messy.
One thing I have done is develop a SlickCombo, which is essentially a grid presented as a multi-column dropdown. It's a full grid and can offer editing.
That's probably as close as you'd get.
A comment: the MLeibman repo is long dead - you should be using: https://github.com/6pac/SlickGrid
I am using jqgrid(4.5.4) and implemented multi-sorting in it using code below.
multiSort: true
The client also wants to see what column they sorted first and so on. Do we have a way to display it in jqgrid? If this feature doesn't exist, we request this in future release. Thanks
My suggestion is
To show the list of column-name, sort-icon and a close button next to it in the form of tags similar to stack overflow tags(this would be great).Just plain list is also fine. It can be displayed on top/below the grid. It should keep updating each time the sort is performed. We can remove sort on particular column by deleting the tag or clicking on column header(default behavior). The multi-sort order should still be preserved.
Don't know whether it is possible but is there way in which I could provide multi-column sorting in a repeat control which displays field values from a document collection?
The easiest way to get the multi-column sorting is to use a Data Grid.
Out of the Extension Library box you can use the Dojo Data Grid control. Brad Balassaitis wrote a good description how to use it in his blog Xcellerant. There you can find a link to an example database too. A good starting point is the XPages "REST_DojoGrid" in database XPagesExt.nsf which is included in Extlib download also.
As an alternative you could use data grids based on jQuery like jqGrid.
You could do a lot of complicated stuff, like putting docs into a java TreeMap object in order to sort them on the fly.
Or you simply use jQuery and the tablesorter plugin: http://tablesorter.com/docs/
I have two questions about column chooser. firs one is that I'm using header grouping for my grid, for example I have a Display header group with two columns of Type and Size, and also another header Group which name is Storage with two sub columns of Type and size. when I using columnChooser it shows: Type Size Type Size. is there any way to prepend the column header name to them? I also named these columns DS_Size DS_Type ,.... in colModel. is there any way to use these columns colModel name instead of colNames?
my second question is that I already using erichynds multiselect (see the link) for my search section and it have conflict with the one which jqGrid use (see also). how can I rename erichynds multiselect plugin to something else? I didn't find any $.fn. in it's source code
I actually asked three questions :P but the first two are one :D
Thank you for reading my questions :)
The answer on your main question you will find in the documentation of jqGrid:
Column Chooser is not compatible with the header grouping
I wrote many parts of the Header Grouping implementation and I know the code of columnChooser. So I know how the code of columnChooser can be modified to include support of Header Grouping. The main problem is that it's relatively much work just to remove the restriction. jqGrid is free open source product. Who are ready to invest his time to remove such limitations? I spend very much my time to help other people on the stackoverflow, but I have to feed my family :-). If you really need such feature you can implement the feature yourself. The most important information which you will need to modify the columnCooser you will find in the answer.
Now about the last part of your question: "conflicts" between who multiselect widgets. Simple look in the list of changes of Eric Hynds jQuery UI MultiSelect Widget (see here) shows that the plugin is alive. On the other side another one (see here) used in columnChooser will be not changed. Nevertheless it works and can be used later. Which "conflicts" exactly you has? In the old version of Eric Hynds jQuery UI MultiSelect Widget it was used the same widget name "ui.multiselect" which was conflict. Many later versions use "ech.multiselect" name (see here). So I don't know which conflicts exactly you mean. Probebly you should just get the last version of the code.
At the end of my answer I would recommend you to read the answer where I suggested some modifications to columnChooser which allows to improve the visibility and to make the dialog of Column Chooser really resizable. One can use just $.jgrid.extend({columnChooser : function(opts) {...}}); to overwrite the original version of columnChooser to the new one.
I am using the tablesorter and tablesorterpager plugin and I really like it.
http://tablesorter.com/docs/
http://tablesorter.com/docs/example-pager.html
However I need help with a problem I have. I use checkboxes for every row in a table for selecting items. I also have a “select all” checkbox in the table header.
When looking at the pager script I understand that the plugin completely removes all the table rows from the DOM and only renders the visible rows, the rest of the table is cached.
So when using code similar to this:
$("#theTable").find("input[name='cbitems']:not(:disabled)").each(
I will only get elements currently visible. Not elements in "hidden" pages.
So my question is; is there anyway to make the cached table accessible?
For example:
$("#theTable").cachedTable.find("input[name='cbitems']:not(:disabled)").each(
I have tried reading up on object oriented javascript (or what to call it), but no success.
To answer my own question:
The cached table is accesible, I had just left out the [0] part.
$($("#theTable")[0].config.rowsCopy).each(function() {
$(this).find("input[name='nodeitems']:not(:disabled)").attr('checked', check);
});