Forum


10:29

In advance, I would like to thank you for your awesome plug-in. I've been greatly enjoying using it. Also, I'm sure that this question has been asked and answered before here, but my search-fu is weak at the moment.
The basics of the problem is that I have two selects. The first select box is the US states, the second is the counties within the state. What I would like to do is when a different state is selected from the dropdown, the appropriate list of counties would then be available in the county dropdown.
I have a dataEvent for 'change' bound and am retrieving the data, but am having issues getting the retrieved data to translate into a freshly populated select box for counties.
Please advise and thank you!
Nikk
21:52

Moderators
30/10/2007

Hello Nikk,
Yes, this is discussed many times and it seems that I should do a example for this.
I have edit this post finding a better solution – I will post it tomorrow.
Best 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.
17:04

Moderators
30/10/2007

Hello,
As promised. This example works ok on my demo
colModel:[
...
{name:'select_one',
editable: true,
edittype:"select",
editoptions: {
dataUrl:'test_one.php',
dataEvents :[
{ type: 'change', fn: function(e) {
var thisval = $(e.target).val();
$.get('test_two.php?myid='+thisval, function(data)
{ var res = $(data).html();
$("#select_two").html(res);
}); // end get
}//end func
} // end type
] // dataevents
} // edit option
},
{name:'select_two',editable: true,edittype:”select”, editoptions:{dataUrl:'test_two.php?myid=initialid'}}
…
],
You should perform of course additional checking, but you got the point.
This is for form editing. For inline edit you should use other id when you load the data -
i.e – $(rowid_select_two).html(res);
where rowid is the id of the selected row and can be obtained with getGridParam.
Enjoy
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.
00:41

30/12/2009

Hello Tony,
I tried to work with the example you gave above. withl slight variatiion and does not work right
Here is the js
The js
the target select list has something like
0:SELECT ZERO;1:SELECT ONE
$(”#targetsel”).html(targetSelect(thisval))this does not work becasue it needs html.
how do i populate key:value pairs on the dorpdown.
- Thanks Shah
14:42

Moderators
30/10/2007

Hello,
On your
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.
17:35

01/03/2010

Tony,
Thanks for your support, but I can't seem to get this to work. Will a dataEvent ever fire when the grid is populated with local data? I am using inline editting and managing all the data loading and storing ajax calls myself, thus using local data in the grid. I'm trying to implement the above in a grid as a subgrid. Here is the part of the subgrid code i'm using to try to do this:
colModel: [
{name:'id',index:'id', width:55},
{name:"condvar",index:"condvar",width:150, editable: true, edittype:"select", editoptions:{value:"bkflag:bkflag;bkchapter:bkchapter;proptype:proptype", dataEvents :[{type:'change', fn:function(e){
alert("yo");
var thisval = $(e.target).val();
alert(thisval);
lookupField(thisval, subgrid_table_id, row_id);
}}]}
},
The issue is that the dataEvent never fires, thus the alerts in there to test that. Is there any way to simply add the onChange property to the select box? This really is the last hurdle I need to get past to finish this project.. Please help
Thanks
Jeff
var subgrid_table_id;
subgrid_table_id = subgrid_id+"_t";
$("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' class='scroll'></table>");
jQuery("#"+subgrid_table_id).jqGrid({
datatype: "local",
colNames: ['ID', 'Condition Variable','Condition','Value for Condition','Type of Value Used'],
colModel: [
{name:'id',index:'id', width:55},
{name:"condvar",index:"condvar",width:150, editable: true, edittype:"select", editoptions:{value:"bkflag:bkflag;bkchapter:bkchapter;proptype:proptype", dataEvents :[{type:'change', fn:function(e){
alert("yo");
var thisval = $(e.target).val();
alert(thisval);
lookupField(thisval, subgrid_table_id, row_id);
}}]}
},
{name:"condition",index:"condition",width:150, editable: true, edittype:"select",editoptions:{value:"equal:equal;notequal:notequal;greater:greater;greaterequal:greaterequal;less:less;lessequal:lessequal"}},
{name:"condval",index:"condval",width:150, editable: true},//, edittype:"select", editoptions:{value:"true:true;false:false"}},
{name:"condtypeval",index:"condtypeval",width:150,editable:true, edittype:"select", editoptions:{value:"double:double;string:string;var:var"}}
],
onSelectRow: function(id){
if(id && (id!=lastsel2 || row_id!=lastsel2row)){
if(lastsel2!=0 && lastsel2row!=0){
var tempgrid = "#timelinetable_"+lastsel2row+"_t";
jQuery(tempgrid).saveRow(lastsel2, false, 'clientArray');
jQuery(tempgrid).restoreRow(lastsel2);
timeconditions[lastsel2row][lastsel2]=jQuery(tempgrid).getRowData(lastsel2);
}
jQuery("#"+subgrid_table_id).editRow(id, true);
lastsel2=id;
lastsel2row=row_id;
}
},
loadui:"disable",
height: 100,
imgpath: 'jqgrid/themes/basic/images',
caption: "Conditions for Override "+timeoverrides[row_id].cutid+" "
});
insertTimeConditionData(row_id, subgrid_table_id);
},
18:42

13/01/2010

Hi Tony
I have followed your example as per your post on 19/12/2009 (17:04hrs).
I have put in the code as you suggested for inline editing & it works ok. However, when adding a new record & I select the first dropdown, the 2nd dropdown doesnt load. It must be because I am specifying the wrong element to be updated(because my column definition is specific for inline editing as as use the rowId)
What can I do so that in my col definition that it will work for both Form Editing(when adding a record) & inline Editing(when editing a record) ?
Also one other thing, when I put in this code as you suggested
my 2nd column did not update(I got no error in firebug).
So what i did to make this work, I did this:
document.getElementById(rowId+'_specification.size').innerHTML = res;
any thoughts on this other question?
thanks Tony!
My code looks identical to yours and it still isn't picking up the events. Any help would be greatly appreciated.
I'm building my colModel like the following:
var colModels = [];
var colModel = { name: 'Product', Index: 'Product', editable: true, edittype: 'select', editoptions: { dataEvents: [
{ type: 'change', fn: function (e) { alert('change!'); } },
{ type: 'click', fn: function (e) { alert('click!'); } }
]
}, editrules: { required: true}
};
colModels.push(colModel);
Then I assign the colModel and it looks fine, but the events aren't firing. Any insight? I do load the drop down
after the grid is generated.
21:18

13/09/2010

Hi everybody,
as all of you guys, I need a dropdown2 (subcategories) populated when another dropdown1 (categories) is changed.
I have an inline grid.
If I use the approaches explained in this forum (dataUrl and Ajax calls) everything works fine but what I want now is to
avoid all those Ajax requests to increase my site performance.
My idea is to load every option in the first load of the page so I have created a JQuery function (populateFromLocalValues)
to change the dropdown2 values working with them locally.
When I change a value in dropdown1 the values are correctly populated in dropdown2 throughtthe implementation of a
change function in the "change dataEvent" of the dropdown1.
My problem comes when I have to initialize the values of dropdown2 when I select a row. I'm using the following code:
{name:'subcategory_id',index:'subcategory_id', width:110, align:"right", sortable:false, editable: true, edittype:"select",
editoptions:{
dataInit :
function (elem) {
populateFromLocalValues(elem);
},
dataUrl: 'fake_url_that_i_dont_need'
}
}
The code before is working because I can get from elem and my locally stored values everything I need to init the
dropdown2 values.
I cannot use "value: buildSelect()" because I don't have the context "elem" to invoque populateFromLocalValues there so
I use dataInit to load my dropdown. But my problem is that I have to define a fake "dataUrl" option because if not ,
"dataInit" is not triggered. It would be very easy to change your code to ignore the fake dataUrl and avoid one unnecesary
request (my data is already stored locally). I hope you understand my question.
Thanks in advance.
20:16

13/01/2010

When adding its no problem as its a new record you are creating.
The problem with select boxes that link to each other is in inline editing.
Using inline edit the rows all contain their correct data before you select a row. The when selecting a row all the select urls are fired.
What is the best approach? I currently have a situation where I have 5 columns each with a select list. The first select, causes the 2nd one to fire. As the second one fires, it should cause the 3rd. and so on. They selects are all related to each other and the selected values are passed from one select to another to retrieve appropriate data.
Any help on this issue is really appreciated as I am stuck.
Thanks
02:57

30/01/2010

Dear all,
I tried to implement dynamic select dropdown on toolbar searching, but I cann`t populate subcategory dropdown.
Can you show me where is something wrong?
here is my code:
{name:'Country' , index:'Country' , width:100 , editable:true, editoptions:{size:20, maxlength:'40'}, editrules:{required:true}, formoptions:{elmprefix:"(*)"}, sortable:true, stype:'select', search:true, searchoptions:{dataUrl:'filterselect/filterselectcountry.php',
dataEvents: [ {
type: 'change',
fn: function(e) {
var thisval = $(e.target).val();
// do what yoou need
$.get('filterselect/filterselectcity.php?country='+thisval, function(data)
{ var res = $(data).html();
$("#City").html(res);
}); // end get
} //end func
} ] // end type, dataevents
}},
{name:'City' , index:'City' , width:70, editable:true, editoptions:{size:15}, editrules:{required:true}, formoptions:{elmprefix:"(*)"}, sortable:true, stype:'select', search:true, searchoptions:{dataUrl:'filterselect/filterselectcity.php?City=initialid'}}
And here is filterselectcity.php
<?php
include '../config/connections.php';
$City = $_GET['City']; //some variable
echo "<select>
<option value=''>All</option>";
if ($City <> '')
{$query="SELECT * FROM table WHERE City = '$City' GROUP BY City";}
else
{$query="SELECT * FROM table GROUP BY City";}
$result = $db->query($query);
$numresult=$result->num_rows;
for ($i=0; $i<$numresult; $i++)
{
$row = $result->fetch_assoc();
echo "<option value='$row[City]'>$row[City]</option>";
}
echo "</select>";
?>
Thank you for your assistance.
Best Regards,
Candra
07:07

30/01/2010

10:40

30/01/2010

Most Users Ever Online: 715
Currently Online:
55 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