I am new to JQgrid and we are using Perl Catalyst to build the application.
I need to have a drop down for the Operating system field
Please find the code for JQgrid
<title>Server Details </title>
<link rel="stylesheet" type="text/css" media="screen" href="[% c.uri_for('/static/css/cupertino/jquery-ui-1.10.3.custom.css') %]" />
<link rel="stylesheet" type="text/css" media="screen" href="[% c.uri_for('/static/plugins/jqGrid/css/ui.jqgrid.css') %]" />
<link rel="stylesheet" type="text/css" media="screen" href="[% c.uri_for('/static/plugins/jqGrid/css/print-container.css') %]" />
<script src="[% c.uri_for('/static/plugins/jqGrid/js/i18n/grid.locale-en.js')%]" type="text/javascript"></script>
<script src="[% c.uri_for('/static/plugins/jqGrid/js/jquery.printElement.js')%]" type="text/javascript"></script>
<script src="[% c.uri_for('/static/plugins/jqGrid/js/printing.js')%]" type="text/javascript"></script>
<script src="[% c.uri_for('/static/plugins/jqGrid/js/export_to_excel.js')%]" type="text/javascript"></script>
<script src="[% c.uri_for('/static/plugins/jqGrid/js/jquery.jqGrid.src.js') %]" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("#list").jqGrid({
url:"[% c.uri_for("server_details_json") %]",
datatype:'json',
mtype:'GET',
colNames:['Server Id' , 'Host Name', 'IP Address','Operating System','Operating System Version', 'Network Domain','Business Unit'],
colModel:[
{name:'server_id', index:'server_id', align:'centre',editable:false},
{name:'server_name', index:'server_name', align:'left',editable:true},
{name:'ip_address', index:'ip_address', align:'left',editable:true},
{name:'operating_system', index:'operating_system', align:'left',editable:true, edittype: 'select',
searchoptions: {value:getOptionsList(),
sopt:['eq']}},
{name:'operating_system_version', index:'operating_system_version', align:'left',editable:true},
{name:'domain', index:'domain', align:'left',editable:true},
{name:'business_unit', index:'business_unit', align:'left',editable:true},
],
pager:'#pager',
rowNum:10,
autowidth:true,
autoheight:true,
rowList:[10,20,30,1000000000000000000],
loadComplete: function() {
$("option[value=1000000000000000000]").text('All');
},
sortname:'server_id',
sortorder:'asec',
shrinkToFit:true,
viewrecords:true,
gridview:true,
height:'auto',
editurl:"[% c.uri_for("postrow") %]",
caption:'Server List '
});
$("#list").jqGrid('navGrid', '#pager',{
view:false,
del:true,
add:true,
edit:true,
search: true,
refresh: true,
print:true
},
{height:250,width:500,reloadAfterSubmit:true}, // edit options
{height:480,reloadAfterSubmit:false}, // add options
{reloadAfterSubmit:false}, // del options
{} // search options
)
// setup grid print capability. Add print button to navigation bar and bind to click.
setPrintGrid('list','pager','Server Details');
setExcelGrid('list','pager','/tams/Server_Details_CSV','Server Details1');
});
</script>
<script>
function getOptionsList(){
$.ajax({
type: "POST",
url:"[% c.uri_for("OS_json") %]",
async:false,
dataType: 'json',
success: function(data){
options=data.value;
},
failure :function(xhr,status,msg) {
alert("Unexpected error occured. !!!"+msg);
}
});
return options;
}
</script>
<body>
<table id="list"><tr><td/></tr></table>
<div id="pager"></div>
</body>`
The Json Data is like this
[{"value":"Windows","id":"86"},{"value":"AIX","id":"87"}]
Can some one help me Thanks in advance for your precious time
First of all you defined searchoptions.value for operating_system column which will be used during searching and not during editing. Moreover the property will work in Searching dialog only if you would add additional property stype: "select". So you should add editoptions: {value: getOptionsList() } to have <select> during editing.
The format of value for editoptions.value and searchoptions.value can be either the string like
"86:Windows;87:AIX"
or an object like
{"86": "Windows", "87": "AIX"}
and not [{"value":"Windows","id":"86"},{"value":"AIX","id":"87"}] which you currently use.
You should change the code of getOptionsList to construct the corresponding results. By the way I prefer to use String form instead of Object form because it allows to specify the exact order of <option> elements in the <select>. The order of options in case of usage object form can be different in different web browsers.
I would recommend you to change your code so that you don't use synchronous Ajax request. Instead of that you can use editoptions {dataUrl: "[% c.uri_for("OS_json") %]", buildSelect: function (data) {...}}. You should additionally define ajaxSelectOptions: {dataType: "json"}. The callback function buildSelect get the server response (data) and it should return the HTML fragment of <select> with all <option> elements. You can find some examples here, here and here.
UPDATED: The code of buildSelect can be something like
buildSelect: function (data) {
var html = "<select>", length = data.length, i, item;
for (i = 0; i < length; i++) {
item = data[i];
html += '<option value=' + item.id + '>' + item.value + '</option>';
}
return html + "/<select>";
}
if you want that results of editing of the select will be sent as select id (like 86 for "Windows") to the server (see the demo). If you want that server get the name (like "Windows") then you need fill value of <option> elements using value property and ignore the id value:
buildSelect: function (data) {
var html = "<select>", length = data.length, i, item;
for (i = 0; i < length; i++) {
item = data[i];
html += '<option value=' + item.value + '>' + item.value + '</option>';
}
return html + "/<select>";
}
see the demo. You can use Fiddler, Developer Tools of IE or other free tools to trace the exact HTTP traffic during editing.
Your colModel must be like,
{ name: 'Decision', width: 200, editable: true, formatter: 'select', edittype: 'select',
editoptions: {
value: {
'1': 'Option 1',
'2': 'Option 2',
'3': 'Option 3'
}
}
},
I guess, it must be editoptions instead of searchoptions.
Here is an example grid, thanks to Oleg
Related
In a SAPUI5 application I would like to update the content of a control (e. g. a tile) only when this is currently visible to the user.
I created a function like this:
updatePage: function() {
for (var i = 0; i < this.myTiles.length; i++) {
if (this.myTiles[i].updater) {
this.myTiles[i].updater();
}
}
setTimeout(this.updatePage.bind(this), 10000);
},
.. where the updater is a custom function I added to the tiles that is in charge to update their content.
The problem is: I want to check if the tile is currently visible to the user (i. e. is not in a page or in a tab that is not currently selected, but was rendered previously).
Is there a way to achieve this using object properties? Do I need to manage it manually?
You can utilize jQuery do achieve that.
// determine whether your control is still part of the active DOM
jQuery.contains(document, yourControl.$());
// determine whether your control is visible (in terms of CSS)
yourControl.$().is(':visible');
// combined
MyControl.prototype.isVisible = function() {
return this.$().length && // has rendered at all
jQuery.contains(document, this.$()) && // is part of active DOM
this.$().is(':visible'); // is visible
};
Elements could still be invisible to the user by being:
out of the viewport
visibility: hidden
opacity: 0
...
Also check this answer
BR
Chris
http://api.jquery.com/jQuery.contains/
http://api.jquery.com/visible-selector/
The web API IntersectionObserver is now supported by all major browsers, including Safari.
Basic syntax
const myObserver = new IntersectionObserver(callback/*, settings?*/);
myObserver.observe(domElement);
Demo
Below is a demo with UI5. Run the snippet and try to scroll there. The page title changes depending on the visibility of the target element:
globalThis.onUI5Init = () => sap.ui.require([
"sap/ui/core/mvc/XMLView",
"sap/ui/model/json/JSONModel",
"sap/ui/core/mvc/Controller",
], async (XMLView, JSONModel, Controller) => {
"use strict";
const control = await XMLView.create({
definition: document.getElementById("myxmlview").textContent,
models: new JSONModel({ "ratio": 0 }),
controller: new (Controller.extend("demo.MyController", {
onInit: function () {
this.intersectionObserver = new IntersectionObserver(entries => {
const targetEl = this.byId("myBox").getDomRef();
const entry = entries.find(entry => entry.target === targetEl);
const model = this.getView().getModel();
model.setProperty("/ratio", entry && entry.intersectionRatio);
});
},
onBeforeRendering: function () {
this.intersectionObserver.disconnect();
},
onAfterRendering: function () {
const targetEl = this.byId("myBox").getDomRef();
this.intersectionObserver.observe(targetEl);
},
onExit: function () {
this.intersectionObserver.disconnect();
this.intersectionObserver = null;
},
}))(),
});
control.placeAt("content");
});
<script id="sap-ui-bootstrap"
src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-libs="sap.ui.core,sap.m"
data-sap-ui-async="true"
data-sap-ui-theme="sap_horizon"
data-sap-ui-oninit="onUI5Init"
data-sap-ui-resourceroots='{ "demo": "./" }'
data-sap-ui-compatVersion="edge"
data-sap-ui-excludejquerycompat="true"
data-sap-ui-xx-waitForTheme="init"
></script>
<script id="myxmlview" type="text/xml">
<mvc:View controllerName="demo.MyController"
xmlns:mvc="sap.ui.core.mvc"
xmlns:core="sap.ui.core"
xmlns="sap.m"
displayBlock="true">
<App>
<Page title="Tile visible: {= ${/ratio} > 0}">
<FlexBox renderType="Bare"
height="360vh"
justifyContent="Center"
alignItems="Center">
<core:Icon id="myBox"
src="sap-icon://color-fill"
size="5rem"
color="Critical"/>
</FlexBox>
</Page>
</App>
</mvc:View>
</script>
<body id="content" class="sapUiBody sapUiSizeCompact"></body>
I am learning how to use Redux. I would like to create a simple application with only one button. When the button is clicked I want to do a rest api call and when the response comes back the response content needs to be displayed.
What I would like to do is send a store.dispatch(CardAction.GET_CARDS) message to Redux when user clicks on the button. I do not want to call rest api directly from the button's onClick handler.
When the answer is received I intend to to the same: send an event with store.dispatch(CardAction.UPDATE_UI) and somehow at the background I want to update the Redux's status.
I hope that this concept is align with React + Redux.
I have some JavaScript code done but some part of it are missing. Could you please help me to put parts together?
index.jsp
<!DOCTYPE html>
<%#page session="false"%>
<%#page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<html>
<head>
<meta http-equiv="CONTENT-TYPE" content="text/html; charset=UTF-8">
<base href="${pageContext.request.contextPath}/" />
<link rel="icon" type="image/x-icon" href="public/image/favicon.ico">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap-theme.min.css">
</head>
<body>
<div id="root"></div>
<script type="text/javascript" src="bundle.js"></script>
</body>
</html>
App.js
let store = createStore(reducers);
ReactDom.render(
<Provider store={store}>
<Card/>
</Provider>,
document.getElementById('root')
);
Card.js
export default class Card extends React.Component {
render() {
return (
<div>
...
<Button onClick={() => store.dispatch(CardAction.GET_CARDS)}>rest call</Button>
</div>
)
}
}
ActionType.js
export const GET_CARDS = 'get-cards';
export const UPDATE_UI = 'update-ui';
CardAction.js
export function getCards(param1, param2) {
return createAction(ActionType.GET_CARDS, (param1, param2) => ({ value1, value2 }))
}
export function updateUi() {
return createAction(ActionType.UPDATE_UI)
}
RootReducer.js
export const reducers = (state = {}, action) => {
return action
};
RestClient.js
export default {
cardPost(param1, param2) {
const url = ...;
fetch(url, {
method: 'POST',
credentials: 'include'
})
.then(response => {
if (response.ok) {
console.info('rest response have arrived');
store.dispatch(CardAction.UPDATE_UI)
} else {
console.info('error appeared during calling rest api');
//store.dispatch(CardAction.SHOW_ERROR)
}
})
.catch(function(err) {
console.info(err + ' Url: ' + url)
})
}
}
You should never call store.dispatch() from a component. Instead, you should import a previously built action and let the Redux flow do the remaining stuff. The reducer shouldn't return an action, instead, it should return a new state, without mutating the previous one. I'd suggest you should first compensate some of the comprehensible lack of experience with Redux, and then you can try to follow along with a React-Redux-Rest tutorial like this one: https://medium.com/#rajaraodv/a-guide-for-building-a-react-redux-crud-app-7fe0b8943d0f#.cnat3gbcx
[EDIT]
Here's what I'd do
// component Card.js
import {getCards} from "CardAction";
export default class Card extends React.Component {
render() {
return (
<div>
...
<Button onClick={getCards(param1, param2)}>rest call</Button>
</div>
)
}
}
// action CardAction.js
const receivedCards = (cards) => ({
type: "RECEIVED_CARDS",
cards
})
export function getCards(param1, param2) {
// idk where you're gonna use these params btw
// also please note that fetch() isn't supported by older browsers. Here I'm showing you a simple example with axios, which basically performs the same operation. Feel free to adapt this example code as you want.
return function(dispatch) {
return axios({
url: server + "endpoint",
timeout: 20000,
method: 'get'
})
.then(function(response) {
let cards = response.data;
dispatch(receivedCards(cards));
})
.catch(function(response){
console.log(response.data.error);
})
}
};
// reducer reducer.js
const initialState = {};
export default (state = initialState, action) => {
switch(action.type) {
case "RECEIVED_CARDS":
return Object.assign({},
state,
{cards: action.cards});
default:
return state;
}
}
I am trying to create an extension to display all the latest posts fetched from my feed using google feeds api. To implement this, I have added this code in background.js:
appAPI.ready(function() {
// Global variable to hold the toggle state of the button
var buttonState = true;
// Sets the initial browser icon
appAPI.browserAction.setResourceIcon('images/icon.png');
// Sets the tooltip for the button
appAPI.browserAction.setTitle('My Postreader Extension');
appAPI.browserAction.setPopup({
resourcePath:'html/popup.html',
height: 300,
width: 300
});});
and in popup.html,
<!DOCTYPE html><html><head><meta http-equiv="X-UA-Compatible" content="IE=edge">
<script type="text/javascript">
function crossriderMain($) {eval(appAPI.resources.get('script.js')); }</script>
</head>
<body><div id="feed"></div></body></html>
The script.js file is-
google.load("feeds", "1");
function initialize() {
var feed = new google.feeds.Feed("http://www.xxxxx.com/feed/");
feed.setNumEntries(10);
feed.load(function(result) {
if (!result.error) {
var container = document.getElementById("feed");
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
var div = document.createElement("div");
var link = document.createElement('a');
link.setAttribute('href', entry.link);
link.setAttribute('name', 'myanchor');
div.appendChild(document.createTextNode(entry.title));
div.appendChild(document.createElement('br'));
div.appendChild(link);
div.appendChild(document.createElement('br'));
container.appendChild(div);
}
}
});
}
google.setOnLoadCallback(initialize);
But I am unable to get desired result.The popup doesn't display anything.It just remain blank.
Since you are using a resource file for the popup's content, it's best to load the remote script from the crossriderMain function, as follows:
<!DOCTYPE html>
<html>
<head>
<!-- This meta tag is relevant only for IE -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script type="text/javascript">
function crossriderMain($) {
appAPI.db.async.get('style-css', function(rules) {
$('<style type="text/css">').text(rules).appendTo('head');
});
appAPI.request.get({
url: 'http://www.google.com/jsapi',
onSuccess: function(code) {
$.globalEval(code);
appAPI.db.async.get('script-js', function(code) {
// runs in the context of the extension
$.globalEval(code.replace('CONTEXT','EXTN'));
// Alternatively, run in context of page DOM
$('<script type="text/javascript">').html(code.replace('CONTEXT','PAGE DOM')).appendTo('head');
});
}
});
}
</script>
</head>
<body>
<h1>Hello World</h1>
<div id="feed"></div>
</body>
</html>
[Disclaimer: I am a Crossrider employee]
I want . Auto complete text box with multiple keyword. it's from database. if I use jQuery and do operation in client side mean. If the database size is huge, it leads to some issues. I need to know how this is done on the server side and get proper result.
I have already seen this topic but the operation is done on the client side. I need it from the database directly.
<html>
<head>
<title>Testing</title>
<link href="css/jquery-ui-1.10.3.custom.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.srchHilite { background: yellow; }
</style>
<script src="scripts/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="scripts/jquery-ui-1.10.3.custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
NewAuto();
});
function NewAuto() {
var availableTags = ["win the day", "win the heart of", "win the heart of someone"];
alert(availableTags); // alert = win the day,win the heart of,win the heart of someone
$("#tags").autocomplete({
source: function(requestObj, responseFunc) {
var matchArry = availableTags.slice(); // Copy the array
var srchTerms = $.trim(requestObj.term).split(/\s+/);
// For each search term, remove non-matches.
$.each(srchTerms, function(J, term) {
var regX = new RegExp(term, "i");
matchArry = $.map(matchArry, function(item) {
return regX.test(item) ? item : null;
});
});
// Return the match results.
responseFunc(matchArry);
},
open: function(event, ui) {
// This function provides no hooks to the results list, so we have to trust the selector, for now.
var resultsList = $("ul.ui-autocomplete > li.ui-menu-item > a");
var srchTerm = $.trim($("#tags").val()).split(/\s+/).join('|');
// Loop through the results list and highlight the terms.
resultsList.each(function() {
var jThis = $(this);
var regX = new RegExp('(' + srchTerm + ')', "ig");
var oldTxt = jThis.text();
jThis.html(oldTxt.replace(regX, '<span class="srchHilite">$1</span>'));
});
}
});
}
</script>
</head>
<body>
<div>
<label for="tags">
Multi-word search:
</label>
<input type="text" id="tags" />
</div>
</body>
</html>
take a look to Select2 it may help you.
Select2 is a jQuery based replacement for select boxes. It supports
searching, remote data sets, and infinite scrolling of results.
link
In your code, you have provided source as array. As you mentioned in comments, problem is how to get the data to source in jquery.
To make this work,
You need to do following
load jquery in header, which is you have already done.
Provid array,string or function for the source tag. [See api for
the source tag][1]
[1]: http://api.jqueryui.com/autocomplete/#option-source
In your serverside script, provid Jason encoded string.
If you check the API, you can see they have clear mentioned this.
Here is the jquery code
$(function() {
$( "#option_val" ).autocomplete({
dataType: "json",
source: 'search.php',
minLength: 1,
select: function( event, ui ) {
log( ui.item ?
"Selected: " + ui.item.value + " aka " + ui.item.id :
"Nothing selected, input was " + this.value );
}
});
});
</script>
Here is the php code, Sorry if you use differnt serverside script language.
<?php
// Create connection
$con=mysqli_connect("localhost","wordpress","password","wordpress");
// Check connection
if (mysqli_connect_errno($con))
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$result=mysqli_query($con,"select * from wp_users");
while($row = mysqli_fetch_array($result))
{
$results[] = array('label' => $row['user_login']);
}
echo json_encode($results);
mysqli_close($con);
?>
I have a couple of columns in jqGrid with edittype="select". How can I read the option value of the value currently selected in a particular row?
e.g.: When I provide the following option, how do I get "FE" for FedEx, etc.
editoption: { value: “FE:FedEx; IN:InTime; TN:TNT” }
getRowData() for the rowId/cellname returns only the text/displayed component of the select.
If I set a "change" data event on the column, the underlying fires change events only on mouse clicks, and not keyboard selects (there's numerous references to generic selects and mouse/keyboard issues).
Bottomline, when a new value is selected, I need to know the option value at the time of the change, and also prior to posting to the server.
You have to set the formatter of the column to 'select'
Example from the wiki:
colModel : [ {name:'myname',
edittype:'select', formatter:'select',
editoptions:{value:"1:One;2:Two"}} ...
]
See more here jqgridwiki
I was having the same problem and this worked like a charm
I just solved this question by using setting JqGrid unformat option and use the following function for unformatting cell value.
function Unformat_Select(cellvalue, options, cellobject)
{
var unformatValue = '';
$.each(options.colModel.editoptions.value, function (k, value)
{
if (cellvalue == value)
{
unformatValue = k;
}
});
return unformatValue;
}
The above method will be called everytime when grid need cell data like when you call "getRowData" method. However, my function only support key-paired value edit option. You need to change your data like the following pattern.
editoption:
{
value:
{
FE:'FedEx',
IN:'InTime',
TN:'TNT'
}
}
For more information about unformat option, you can see at the following link.
JqGrid Wiki - Custom Formatter
PS. It's possible to modify my function to support client-side dropdownlist value. But I think it's impossible to apply this function for server-side dropdownlist value.
Update
In the latest jqGrid 3.8.1, I just found some bug when user cancel editing row(or programmatically call "restoreRow" method), jqGrid will create label by using key of data (instead of value of data). I create the following function to fix this issue. For use this, you must it as custom formatter function of this column. This function maps cell value to value of list by comparing key or value.
function JqGridInlineEditor_SelectFormatter(cellvalue, options, rowObject)
{
var temp = '';
$.each(options.colModel.editoptions.value, function (key, value)
{
if (cellvalue == key || cellvalue == value)
{
temp = value;
return false;
}
});
return temp;
}
So, you can send key or value as column data to be rendered by the above custom formatter.
If in case you have requirement where each row has dropdown and it has values like
FE:'FedEx',
IN:'InTime',
TN:'TNT'
Now instead of saving the data to backend on dropdown change event;you want to save data on "Save" button click at row level but want to save dropdwon selected value (TN) not display text(TNT). You can create another hidden field to set selected country code on inline editing of dropdown. Here when user exit after cell inline editing afterSaveCell method will be called and you can set it as mentioned in below code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>http://stackoverflow.com/q/9655426/315935</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/redmond/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.3.1/css/ui.jqgrid.css" />
<style type="text/css">
html, body { font-size: 75%; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.3.1/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript">
$.jgrid.no_legacy_api = true;
$.jgrid.useJSON = true;
</script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.3.1/js/jquery.jqGrid.src.js"></script>
<script type="text/javascript">
//<![CDATA[
/*global $ */
/*jslint devel: true, browser: true, plusplus: true, nomen: true, unparam: true */
$(document).ready(function () {
'use strict';
var listOptions = "CN:Canada; US:United States; FR:France; IN:India";
var mydata = [{
name: "Toronto",
country: "CN",
continent: "North America",
countrycode: "CN"
}, {
name: "New York City",
country: "US",
continent: "North America",
countrycode: "US"
}, {
name: "Silicon Valley",
country: "US",
continent: "North America",
countrycode: "US"
}, {
name: "Paris",
country: "FR",
continent: "Europe",
countrycode: "FR"
}, {
name: "Pune",
country: "IN",
continent: "Asia",
countrycode: "IN"
}]
$("#gvManageMapping").jqGrid({
data: mydata,
datatype: "local",
colNames: ["Name", "Country", "Continent", "countrycode"],
colModel: [{
name: 'name',
index: 'name',
editable: false,
},
{
name: 'country',
index: 'country',
editable: true, edittype: "select", formatter: 'select', editoptions: {
value: listOptions,
}, editrules: { required: true, integer: false }, formatter: "select"
},
{
name: 'continent',
index: 'continent',
editable: false,
},
{
name: 'countrycode',
index: 'countrycode',
editable: false
}],
afterSaveCell: function (rowid, cellname, value) {
var selectedCountryCode, $this;
if (cellname === 'country') {
$this = $(this);
selectedCountryCode = $this.jqGrid("getCell", rowid, 'country');
$this.jqGrid("setCell", rowid, 'countrycode', selectedCountryCode);
}
},
pager: '#pager',
'cellEdit': true,
'cellsubmit': 'clientArray',
editurl: 'clientArray'
});
});
//]]>
</script>
</head>
<body>
<table id="gvManageMapping"><tr><td /></tr></table>
<div id="pager"></div>
</body>
</html>
The documentation for getRowData states:
Do not use this method when you editing the row or cell. This will return the cell content and not the actuall value of the input element
Is the row still being edited when you call getRowData()?
Update
Agreed, jqGrid does not handle <select> very well. In my application I actually was able to get around this by not specifying an edit option (meaning, key/value were both "FedEx"); the translation to ID is then done on the server. This is not the right way to code this, but it worked well enough for my needs at the time.