Is there a hide/show column functionality on jqGrid like in flexigrid? - jqgrid

Is there a hide/show column functionality on jqGrid like in flexigrid? I want the user be capable of hiding columns, so it will be easy for them to review related columns(informations)

Check out hideCol() and showCol()
$('#tblId').hideCol('column');
$('#tblId').showCol('column');
Instead of the column name you can use the column index, too.
But I haven't seen this feature implemented (e.g. selecting from the header directly).

JQGrid1.Columns.FromDataField(ColumnName).Visible = false;

Related

Kendo grid expanding column

I'm using kendo grid (which is awesome!) and one of my columns contains a description field. Does kendo come with support for expanding columns? i.e. if over a certain length display a '+' expand icon or will I need to use a third party library?
Thanks
If you want to expand a record, you might use detailTemplate and maybe also detailInit event. Remember that detailTemplate might be either a string (KendoUI template) or a function. This demo shows how to use it.
If you want to expand a column, you should use a template in the column (see it here) definition and program there the logic needed.
Grids do come with a resizing property. Not sure if this fits your needs though.
http://demos.kendoui.com/web/grid/column-resizing.html

JqGrid - custom theme for modal window

I have two types of columns in my jqgrid table. Each type has own prefix in the column name. How to group column fields on edit form? Which function should I use?
Thanks.
One can use rowpos and colpos property of the formoptions to specify the position of fields in the editing form. See the demo from the answer for more details. In another answer and in the demo (see Add form) of the old answer you will find some examples more advanced techniques of customization of the form editing.

jqGrid special Sorting

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)

jqgrid - dynamically load different colModel edittypes(Text box and check box) in two rows of same column

I'm doing some R&D work on displaying different colModel edittypes(Text box and check box) in two rows of the same column in a JqGrid. Because I need to display different edit-types for a same column depending on the back-end database values. Its possible to display different edit-types for different columns. Please help me on this to carry out my R&D work.
You don't explained which editing mode you use. The solution of the problem can be different depend on the editing mode.
I would you recommend to change the properties of the column, for example the edittype value, directly before the editing of the row be started.
In case of form editing you can change the properties inside of call . In the answer are shown how to show of hide some column property inside of beforeShowForm callback. Another answer or this one are examples of the usage beforeInitData which seems be the best for your case. Inside of beforeInitData you can change any properties of colModel before the form will be constructed.
Typical usage of inline editing consist from the calling of editRow inside of onSelectRow or inside of ondblClickRow. So one can use setColProp method for example to change column properties before there will be used. See examples here and here.

How do I edit a jqgrid from javascript

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.

Resources