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.
Related
I have an Advanced PDF Form in Netsuite that prints Sales Proposals with pictures, and also an Order Acknowledgement. The code is very similar. Recently we decided to add them to the Picking Ticket, and I basically copied and pasted what I had on the Order Ack - because the data for both comes from the Sales Order in Netsuite.
For some reason the images just won't show on the picking ticket. I have tried changing the source code slightly, like using record.item etc., but the table starts with <#list record.item as item> so I shouldn't need that.
<td colspan="7" line-height="150%" style="vertical-align:top;">
<#if item.custcol_item_image_url?starts_with("http")>
<img src="${item.custcol_item_image_url}" style="height:40px;width:40px;margin:1px" />
</#if></td>
Basically I'm just getting a blank. FYI I also have another field that references from the Sales Order in the same way, ie. ${item.custcol_xyz} and that one works. Any ideas?
The custom field needs to be set to "show" on the Sales Order form in order for it to be available in your template. Customize your form, and under the Sublist Fields subtab, ensure that the field is question is checked to display on the form.
If you want to hide it in the UI, there is a workaround that you can try, which is to clear the label for the field. This works most of the time, but not always.
Is it possible to have a slickgrid inside another slickgrid (without modal ) ?
As an example, using Magic TCG and the example http://6pac.github.io/SlickGrid/examples/example-grouping-checkbox-row-select.html .
I want a slickgrid were I can order the collections and when I select the collection, it will open another slickgrid in the same window, with the cards.
On the "main-grid" will have the columns related to collections (e.g. collection name, # of cards in that collection, etc) and on "child-grid" will have the columns related to the cards (e.g. card name, card cost, card info, etc).
EDIT: I forgot to tell I replicated the code from the first grid and then tried to called it but got this error :
SlickGrid requires a valid container, #myGrid2 does not exist in the DOM.
I'm calling it like this :
<div id="myGrid" style="width:100%;height:500px;">
<div id="myGrid2" style="width:100%;height:500px;">
</div>
</div>
Is it possible or do I need to use modal ?
Thanks in advance
It is indeed possible, I have a slick-combo control (not publicly released) that provides a multi-column combo inside a cell using a dynamically created Slickgrid.
It looks like you want a side-by-side grid, not a grid-within-a-cell. Could you provide more information around how you want the screen visually to look (a diagram would be good)
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.
I need to display records of information from my database to my users. Currently, I have this info bound to a datagrid. However, there are too many fields to display and my tables are going off the page. I don't really want my pages to have horizontal scrolling, and I don't want to decrease the font size.. so I was wondering if anyone had any better ideas to go about displaying long rows of data? Just ask if any additional info is needed, thx :)
My go-to solution for something like this is to round up the most essential information (anything that will immediately identify what/who the row's about) and put the rest in a following row in a new TD and interior table. Hide/show that with javascript, and you're golden.
Example HTML
<tr>
<td>Joe</td>
<td>Jones</td>
<td>555-555-5555 (m)</td>
<td class="more">more..</td>
</tr>
<tr class='showme'>
<td class='showthis' colspan="4">
<h2>More info</h2>
<table>
<!-- yet more info here -->
</table>
</td>
</tr>
jQuery to make it work
$("td.more").click(function(){
// don't hide/show the next TR itself, may cause cross-browser issues
$(this).closest("tr").next("tr.showme").find(".showthis").slideToggle();
});
Necessary CSS
.showthis { display:none; }
/* you'll want to play with padding and such for open/close states, too */
You can make it a lot more sophisticated, of course, but this is the basic functionality.
There's several ways. Largely it depends on the data.
Optional columns (user configurable -
allow the user to hide columns they
don't want). This way you can also have columns that would be "nice to have" but the user doesn't always need.
Use small icons instead of words
where applicable For example, instead of "True"
put a small checkmark.
Use Ellipsis (...) on long text, with a
div title attribute so they see full
text when they mouseover.
I know you don't like the idea of horizontal scrolling, but perhaps if you implemented it such that the first few meaningful columns were fixed/frozen the horizontal scroll would be less annoying to the users?
Horizontal scrolling on a page is the devil! But, you can at least contain it somewhat in this situation by wrapping your GridView in a div and enable horizontal scrolling on only the div itself (i.e just the grid).
<div style="overflow-x: auto;">
//GridView
</div>
Split the data into two rows. Try to keep it logical, for instance, the first column of the first row will be "First Name" and the first column of the second column will be "Last Name". Then the second column will be "street address" for the first row and "city, state, zip" for the second row. Etcetera.
You may be better served using a ListView instead of GridView in this case.
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.