Forum
Log In
Home
Topic RSS
03:45
18/12/2010
Offline
I am using form edit. There are two select boxes in the form. One select box is the country, another select box is the state. The state select box depends on the country selected and will be populated dynamically. For example:
Country:
US (option value=1)
UK (option value=2)
State for US:
Alabama (option value=1)
California (option value=2)
Florida (option value=3)
Hawaii (option value=4)
State for UK:
London (option value=5)
Oxford (option value=6)
As you can see above the id of state for uk starts with 5. When I edit a record which contained Country id=2 (UK) and State id=6 (Oxford), the edit form will shows correctly - Country is UK and State is Oxford. But if you drop down the state select box the option text is correct (it shows London Oxford) but the option value will starts from 0. What should be correct is that the option value should starts from 5.
If you select and change the country drop down box to US then change back again to UK, the option value will be populated correct (starts from 5).
My question is, how can we populate the select box for the state with the correct option value based on the country in edit box when the edit form loads?
Thanks.
01:30
10/08/2009
Offline
Hi Alex,
I answered on your question here. Moreover another thread on the same subject could be interesting you you.
Best regards
Oleg
03:45
18/12/2010
Offline
Thanks Oleg for your help. I will take a look at it.
Alex
07:37
23/12/2010
Offline
Hi Oleg ,
I show your demo , its working fine .
But my requirement is something different . You have generated the code for inline editing, but In my case I am using Edit popup that's generated using inbuilt navigator of jqGrid.
In the edit popup , when I change the value of country, It is not displaying the new values of states .
So How can I implement this ?
Thanx in advance.
14:15
Moderators
30/10/2007
Offline
Hello,
There is no difference where this is used.
Please check the Oleg's exmaple again.
Kind Regards
Tony
For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.
09:05
23/12/2010
Offline
Hi Tony,
I have checked the code of Oleg again , its not working. I have make chage only at one line . I have removed comment for generating the edit popup, but the code is not working for popup.
I have pasted the code below, please check it ...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DT.....t;>
<html xmlns="http://www.w3.org/1999/xhtml&q.....t;>
<head>
<title>How to filter subcategory dropdown list based on another category dropdown</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/aja....." />
<link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jq....." />
<link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jq....." />
<!--<link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jq....." />-->
<script type="text/javascript" src="http://ajax.googleapis.com/aja.....pt>
<!--<script type="text/javascript" src="http://ajax.googleapis.com/aja.....-->
<script type="text/javascript" src="http://ajax.googleapis.com/aja.....pt>
<!--<script type="text/javascript" src="http://ajax.googleapis.com/aja.....-->
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jq.....pt>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jq.....pt>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jq.....pt>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jq.....pt>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jq.....pt>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jq.....pt>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jq.....pt>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jq.....pt>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jq.....pt>
<!--<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jq.....pt>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jq.....-->
<script type="text/javascript">
//<![CDATA[
jQuery(document).ready(function () {
var countries = { '1': 'US', '2': 'UK' };
var states = { '1': 'Alabama', '2': 'California', '3': 'Florida', '4': 'Hawaii', '5': 'London', '6': 'Oxford' };
var statesOfCountry = {
1: { '1': 'Alabama', '2': 'California', '3': 'Florida', '4': 'Hawaii' },
2: { '5': 'London', '6': 'Oxford' }
};
var mydata = [
{ id: '0', Country: '1', State: '1', Name: "Louise Fletcher" },
{ id: '1', Country: '1', State: '3', Name: "Jim Morrison" },
{ id: '2', Country: '2', State: '5', Name: "Sherlock Holmes" },
{ id: '3', Country: '2', State: '6', Name: "Oscar Wilde" }
];
var lastSel = -1;
var grid = jQuery("#list");
var resetStatesValues = function () {
grid.setColProp('State', { editoptions: { value: states} });
};
grid.jqGrid({
data: mydata,
datatype: 'local',
colModel: [
{ name: 'Name', width: 200 },
{ name: 'Country', width: 100, editable: true, formatter: 'select',
edittype: 'select', editoptions: {
value: countries,
dataInit: function (elem) {
var v = $(elem).val();
// to have short list of options which corresponds to the country
// from the row we have to change temporary the column property
grid.setColProp('State', { editoptions: { value: statesOfCountry[v]} });
},
dataEvents: [
{
type: 'change',
fn: function(e) {
var v = parseInt($(e.target).val(), 10);
var sc = statesOfCountry[v];
// To be able to save the results of the current selection
// the value of the column property must contain at least
// the current selected 'State'. So we have to reset
// the column property to the following
//grid.setColProp('State', { editoptions:{value: statesOfCountry[v]} });
//grid.setColProp('State', { editoptions: { value: states} });
resetStatesValues();
var res = '';
for (var stateId in sc) {
if (sc.hasOwnProperty(stateId)) {
res += '<option role="option" value="' + stateId +
'">' + states[stateId] + '</option>';
}
}
var row = $(e.target).closest('tr.jqgrow');
alert("row"+row.length);
var rowId = row.attr('id');
alert("rowId"+rowId);
$("select#" + rowId + "_State").html(res);
}
}
]
}
},
{
name: 'State', width: 100, editable: true, formatter: 'select',
edittype: 'select', editoptions: { value: states }
}
],
onSelectRow: function (id) {
if (id && id !== lastSel) {
if (lastSel != -1) {
//grid.setColProp('State', { editoptions: { value: states} });
resetStatesValues();
grid.restoreRow(lastSel);
}
lastSel = id;
}
},
ondblClickRow: function (id, ri, ci) {
if (id && id !== lastSel) {
grid.restoreRow(lastSel);
lastSel = id;
}
//grid.setColProp('State', { editoptions: { value: states} });
resetStatesValues();
grid.editRow(id, true, null, null, 'clientArray', null,
function (rowid, response) { // aftersavefunc
grid.setColProp('State', { editoptions: { value: states} });
});
return;
},
editurl: 'clientArray',
sortname: 'Name',
height: '100%',
viewrecords: true,
rownumbers: true,
sortorder: "desc",
pager: '#pager',
caption: "Demonstrate dependend select/dropdown lists (edit on double-click)"
}).navGrid('#pager', { edit: true, add: false, del: false, search: false, refresh: false });
});
//]]>
</script>
</head>
<body>
<table id="list"></table>
<div id="pager"></div>
</body>
</html>
You can see line number 132 where I have made chages. I have enabled edit popup .I have created the font BOLD which are changed .
So , please give me a solution of it.
Thank You.
08:58
23/12/2010
Offline
Hi Tony,
Oleg have replied to this post. He has attached demo on this link...
Thank You,
Gunjan Shah.
Most Users Ever Online: 715
Currently Online:
26 Guest(s)
Currently Browsing this Page:
1 Guest(s)
Top Posters:
OlegK: 1255
markw65: 179
kobruleht: 144
phicarre: 132
YamilBracho: 124
Renso: 118
Member Stats:
Guest Posters: 447
Members: 11373
Moderators: 2
Admins: 1
Forum Stats:
Groups: 1
Forums: 8
Topics: 10592
Posts: 31289
Newest Members:
, razia, Prankie, psky, praveen neelam, greg.valainis@pa-tech.comModerators: tony: 7721, Rumen[Trirand]: 81
Administrators: admin: 66
