I need to display jqGrid in the below format:
Fomat :
[1]: http://i.stack.imgur.com/CuRYJ.png
Any help would be appreciated.
Thanks
One can use rowspan to display the data in the format. See the answer. The main problem that such grid can almost only display the data. The other functionality starting with sorting by column content, selection of rows, editing and so on can't be used. Is it really what you need? Probably you can better just use the standard <table> with rowspan attributes? It will be still not so simple to group common input data in the format which you want to display.
Related
I have a requirement to display a single jqgrid into several lines (2 or 3). The user does not want to use the grid horizontal scroll bar and would like to see several data at once.
Anybody with an idea how to do this?
If I understand your question correctly you want to wrap rows in the grid because the grid have large number or rows. It's not possible because jqGrid are base on HTML <table> and the row (<tr>) of table can't be wrapped.
If you have grid with columns which text is long you can consider wrapping inside of cells of grid. See the answer, this one, this one and the answer too.
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)
In the jqGrid documentation to form_editing, I see how the form_editing is constructed.
<form ...>
<table>
<tr id='tr_myfield'>
<td> Caption</td>
<td>edited element named, in colModel, as "myfield"</td>
</tr> ...
</table>
</form>
Can I change this construction ?
It's necessary to me because I have too many columns to edit in my form and I want to display the form in most userfriendly way.
E.g when I have twenty columns to edit in my table. I have twenty rows in my form.
But I would obtain one row for two columns.
I understood that each rows are identifying by their index, so I can't just have two columns in the same row.
But if it's possible to faking it, be sure it's make me happy ^^
(e.g with two tables and a similar id or with form_editing parameters that I don't know ...)
PS : Sorry for my bad English.
There are rowpos and colpos properties of formoptions which would be helpful for you.
The demo demonstrate how you can change the standard editing form created by jqGrid to the following
If I understand correct your problem the usage of rowpos and colpos could be very helpful in your case.
If you need to customize the form, your best bet may be to create your own page and use a plugin such as jQuery UI Dialog to display your custom form. It will be more work since you cannot use the built-in form editing capabilities of jqGrid, but you will have complete control of the layout of the form.
Is it possible to display two editable text boxes in one cell of the JqGrid
Sorry, but the description of the problem in the comment to your question still don't contain any examples which shows why you have to display two text boxes in one cell. Moreover you still not answered on the question: which editing mode you use?
The problem is the following: if you use some software product you can use a lot of its standard features. In the case the implementation will be short and you can make very nice solution writing very small code. If you one the other side would try just follow your original imagination of how all should looks like you can spend many time and to write a lot of code. As the result from the point of view of the user who will work with your site all will be almost the same as in the simple solution. Is it really required?
If you would use form editing for example you can easy display additional textboxes, checkboxes or textareas from hidden columns. jqGrid automatically create controls for all hidden columns which have editable: true property. So what you need to do in the case is just to show hidden field in the form with respect of $.show (like in the answer).
I used the same concept in "trirand.com/blog/jqgrid/jqgrid.html#";
There in the Row editing --> Custom edit, JqGrid demo examples, its displaying three buttons on a one cell.
I have a jqgrid that has several columns including a checkbox column that indicates if an item is selected.
Underneath that I have a dropdown menu and a text box. The idea is that each item in the dropdown menu is a column in the jqgrid. Then all I need to do is modified all of the checked rows with the contents of the text box for that column. So a quick mass update mechanism if you will.
The problem is, is that I can't figure out how to update a specific cell. Any tips or documentation that can help me? Thanks!
You can use for example setRowData (see jqGrid documentation) or setCell to update the data in the grid. The functions getCol, getCell or getRowData could help you the examine the row data. Another old answers: this and this could be helpful if you decide to search data in the grid with respect of jQuery.
Here's the "answer" I came up with to my problem. I wanted to edit only rows that were editable. Using setCell would overwrite my editable field with a non-editable one. So I looked at the HTML for a given row while it is in the edit state and passed that into the 'setCell' method. It feels 'hackish' though and if someone knows a better way, I'm all ears.