leerickx on jqgrid cascading dropdown

Mon, 18 Feb 2013 12:42:54 +0200

Hello everybody… i'm lost ,

I try to realize cascading dropdown. My data is in tables.

If i choose an item in the first ddl the second ddl change right.

But the first time that i want edit or add my second ddl present all items from the table (ddlprojet – table :projet).

How I can do change this ? Thanks for all.

My html code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>My First Grid</title>

<style>

html, body {

margin: 0;

padding: 0;

font-size: 75%;

}

</style>

$(function(){

$("#list").jqGrid({

//=============

// Grid Setup

url:'example.php',

datatype: 'xml',

mtype: 'GET',

pager: '#gridpager',

width: 700,

height: '130%',

rowNum:10,

rowList:[10,20,30],

sortname: 'secteur',

sortorder: 'desc',

viewrecords: true,

gridview: true,

editurl: "addupdatedeldata.php",

onSelectRow: function(rowid) {

if (rowid != null) {

var record = $("#list").getRowData(rowid);

var pgm="ddlprojet.php?id_secteur="+record.idsecteur;

$("#list").setColProp('select#idprojet',{editoptions:{dataUrl:pgm}});

}

caption: 'FICHE PROJET',

// Column definition

colNames:['id','date', 'secteur','projet'],

colModel :[

{name:'id', index:'id', width:55},

{name:'date', index:'date', width:90, editable:true},

{name:'idsecteur', index:'idsecteur', width:80, align:'right', editable:true, edittype:"select",

editoptions:{dataUrl:'ddlsecteur.php', dataEvents:[{type: 'change',

fn: function(e) {var thisval = $(e.target).val();

$.get('ddlprojet.php?id_secteur='+thisval,

function(data)

{ $("select#idprojet").html(data);

}); // end get

}//end func

} // end type

] // dataevents

} // edit option

{name:'idprojet', index:'idprojet', width:80, align:'right', editable:true, edittype:"select", editoptions:{dataUrl:'ddlprojet.php?id_secteur=idsecteur'}}

]

});

//=============

// NavGrid Setup

$("#list").jqGrid('navGrid','#gridpager',

{edit:true,

add:true,

del:true,

search:true},

{viewPagerButtons:false,

recreateForm:true

//refresh:true

});

</script>

</head>

<body>

</body>

</html>

my ddlsecteur.php

<?php

include("dbconfig.php");

$sql = "SELECT * FROM secteur";

echo '<select>';

$result = mysql_query($sql) or die("Couldn't execute query.".mysql_error());

while($row = mysql_fetch_array($result,MYSQL_ASSOC)) {

echo '<option value="'.$row['idsecteur'].'">'.$row['secteur'].'</option>';

}

echo '</select>';

//mysql_close($db);

my ddlprojet.php

<?php

include("dbconfig.php");

if(isset($_GET['id_secteur'])){

$id_secteur=$_GET['id_secteur'];

$sql="select idprojet, projet, idsecteur from projet where idsecteur=$id_secteur";

}

else {

$sql="select projet.idprojet, projet.projet from projet inner join secteur on secteur.idsecteur=projet.idsecteur where secteur.secteur='$id_secteur'";

//$sql="select idprojet, projet, idsecteur from projet where idsecteur=$id_secteur";

}

$rs = mysql_query($sql);

echo "<select>";

while ($reg=mysql_fetch_array($rs)) {

echo "<option value='".$reg['idprojet']."'>".$reg['projet']."</option>";

}

echo"</select>";

mysql_close($db);

well I see that I'm missing something but I do not see.

I can display secteur in my first dll within dataUrl but I've proble when I edit a row, the select secteur is no good.

function loadsecteur(){var sect = null;$.get("ddlsecteur.php", function(data){sect = data; $('#idsecteur').html(sect);}});

{name:'idsecteur', index:'idsecteur', width:80, align:'right', editable:true, edittype:"select",

editoptions:{value:loadsecteur,

dataEvents:[{type: 'change', fn: function(e) {var thisval = $(e.target).val();

$.get('ddlprojet.php?id_secteur='+thisval, function(data){ $("select#idprojet").html(data);

}); // end get }// end func} // end type ] // dataevents }// edit option},

but how not display in the ddlprojet all item of my table projet

Should I change and add a function there ?

$("#ficheprojet").jqGrid('navGrid','#gridpager',{edit:true,add:true,del:true,search:true}, {//prmEdit closeAfterEdit:true, viewPagerButtons:false, recreateForm:true //refresh:true }, {//prmAdd closeAfterAdd:true }

thanks for all.

jQuery Grid Plugin - jqGrid - Topic: jqgrid cascading dropdown

leerickx on jqgrid cascading dropdown