How do I edit a jqgrid from javascript - jqgrid

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.

Related

extjs 4 How to change ordering of shown column dropdown on grid

Using extjs 4.1.1
I have a grid with lots of columns >20.
Initially, most of these columns are hidden.
If a user wants to unhide the column, they select the menu on any column, then select the "columns" choice, this expands another dropdown/dropout which shows all of the columns. Those with checkboxes next to them are shown.
My issue is this:
The columns in the dropdown are shown in the order in which they are defined/displayed in the grid. The order in which they are displayed in the grid has been chosen for a good reason( e.g. id as the first column). However, when a user wants to display one of the hidden columns, it is hard for them to find it in the list. This is because the list is sorted in the order the columns are defined. I want to sort the column dropdown/dropout list in alphabetical order, without effecting the order of the columns in the grid.
How can this done?
I think I found the solution to your question.
First of all I don't have the Ext JS 4.1.1. framework on my current PC. So I tried to figure out you problem reading the Ext JS 4.1.3. documentation available on Sencha's site. But I don't think that they have made drastical changes in this part of the framework between the two minor releases so my solution should work in your case too.
I have tried out my solution using JSFiddle. Unfortunately they did not have the 4.1.1. ext-all.css file, so I have linked manually the 4.0.2 file available at Sencha, so the menu is looking a bit missplaced.
The header menu and it's submenus are managed by the Ext.grid.header.Container class. The column submenu is constructed by the getColumnMenu method. The whole menu is purged and reconstructed on every drag and drop or other event which should affect the grid view. As a result it is enough to overwrite this method in order to solve the problem. Because the headercontainer class is too deep in the framework it is hard to extend it, so you have to make use of the Ext.base.override method.
The column submenu's menu items are created from the result of the
items = headerContainer.query('>gridcolumn[hideable]')
query. So you have to first sort alphabetically the result, before creating the menu items. I have added to the class the sortColumns method which does all the sorting stuff.
So here is what I did: link to my solution.
I hope that this is what you were looking for.

split each "record" on jqgrid to two rows

I have a jqgrid that has a lot of information for each record. It's causing a lot of horizontal scrolling and I'd like to avoid that.
I thought about using a subgrid, but every example I've seen for subgrid has the sub-info collapsed and I don't really want that. I just want the 2nd row for each record to be indented a bit.
Is there a good way to handle this besides using a subgrid. The other drawback to subgrid I've found is that it wants to load secondary data on the click to expand it. I'd rather just have all of the data loaded on the initial grid load.
TIA

How to appened Data in JQGrid table Cell?

I have created JQGrid.
I have put the Data in cell and one html Link in cells.
OnClick of that link I need to open JQGrid Specific popUp.Popup have one combobox .I'll select one option and click submit button and that data needs to be appear in clicked cell.
Thanks
The construction which you suggest seems me too complex. Probably you can consider to use more simple user interface?
Nevertheless you can just use setCell method to set new contain of the cell of the grid.

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.

jQgrid multiselect with dynamic changed cell value based on dropdown selection

I just found that sample
http://www.ok-soft-gmbh.com/jqGrid/DataToMultiSelect2.htm
I want to have something similar:
I want to be able to post selected values on server and also i want to have a dropdown and based on that dropdown selection another cell value of that row gettign changed
How can i do that?
|Id|Dropdown|ValueChangedOnDropdownChanged|
1 A[A/B] A selected
2 B[A/B] B selected
*[A/B] it is dropdown options
I am not sure that I understand your question correct. The demo which you reference in your question I created before for the answer and this one.
Look at the another old demo. It shows how to implement dependent select (dropdown) list. The demo shows how to it in inline editing, form editing and the searching toolbar. In case of the usage of server base data you will have to use dataUrl and buildSelect to implementation of the same behavior. The dataUrl should be used instead of the v property of the searchoptions or editoptions. The buildSelect can be used ton only to modify the server response, but just as the good place to rebuild the dependent select (dropdown list).

Resources