jQuery Grid Plugin - jqGrid - Topic: trying to create to dependant dropdowns

balderas on trying to create to dependant dropdowns

Mon, 24 Aug 2009 12:31:38 +0300

Hola Juan:

Tengo un jQGrid donde quiero enlazar dos combos (pais, estado), es decir que al seleccionar pais me proporcione el estado.

He intentado con lo siguiente

name:'id_pais',
index:'id_pais',
align:"right",
width:250,
editable:true,
edittype:"select",
editoptions:{value:fRellenarComboPais(),
dataEvents:[{type:'change',fn:function(e){
var gr = jQuery("#list").getGridParam('selrow');
var pais = e.currentTarget.value;
var estados = $.ajax({
url: '<%=request.getContextPath()%>/combos.do?reqCode=llenarComboEstado&pais='+pais,
async: false}).responseText;
//alert(municipios);
jQuery("#list").setColProp('id_estado',{editoptions: {value: estados}});
}}]},
editrules:{edithidden:true,required:true,number:true}
}, {
name:'id_estado',
index:'id_estado',
align:"right",
width:250,
editable:true,
edittype:"select",
//editoptions:{value:'',defaultValue:'1'},
editrules:{edithidden:true,required:true,number:true}
}

Pero al dar click sobre el pais no me despliega nada en estados.

Gracias de antemano

tony on trying to create to dependant dropdowns

Sat, 15 Aug 2009 02:57:21 +0300

Hello,

Thanks. The problem lie that we use ajax call and it is unknown when this call ends. Since of this all the other processes continue and it is quite possible of loss of information.

Instead will try to overcome this.

Regards

Tony

Juan on trying to create to dependant dropdowns

Fri, 14 Aug 2009 14:09:11 +0300

thanks John, I´ll take it in to account

John Teague on trying to create to dependant dropdowns

Fri, 14 Aug 2009 12:32:00 +0300

One item of note: If you are calling dataUrl: to use server side to create the select, and dataEvents: to perform, say for example, an onchange function, make sure you set dataEvents first in your editOptions:

{name:'assigned_to_id',
          index:'assigned_to_id',
          width:80,
          align:'center',
          sortable:true,
          editable:true,
          edittype:'select',
          editoptions:{
              dataEvents: [{ type: 'change', fn: function(e) {change_assigned_to();}}],
          dataUrl:'someurl.php'

},
}

Otherwise, at least for me, the grid fails to load without error. Anyone else out there let me know if I am mistaken here.

Juan on trying to create to dependant dropdowns

Sun, 26 Jul 2009 17:36:58 +0300

well, for now I endup doing this:

      {name:'nivel', index:'n.nombre', width:100, editable:true, edittype: 'select',
        editoptions : {
            value:niveles,
            attr: { title: 'Nivel' },
            dataEvents: [
                { type: 'change', fn: function(e) {
                         var gr = jQuery("#list").getGridParam('selrow');
                          var nivel = e.currentTarget.value;
                         var cursos = $.ajax({
                             url: '/iae/index.php?r=curso/getCursosOptions&nivel='+nivel,
                               async: false}).responseText;
                        $('#'+gr+'_curso').html(cursos);
                    }
                }
            ]
        }

now it works, but have to do two diferent server actions, one with the select and options tags for the onchange and one with only the values for the onSelectRow, but it works!!! and I'm hapy

I'm a newbe with jqgrid, jquery, javascript and php, so…. please if you drop by and have a little time help me with some advice on how improbe my code, I want to learn all of this quick!!

Below I post all the code, with the server code to, just in case someone may need it or someone just want to help me to improve it

Thanks

* client code

jQuery(document).ready(function(){

/ server code

    public function actionGetNiveles()
    {
        $Niveles = Nivel::model()->findAll();
        $Niveles = CHtml::listData($Niveles, 'id','nombre');
//        echo '<select>';
//        foreach($Niveles as $id => $nombre){
//            echo '<option value='. $id .'>'.$nombre.'</option>';
//        }
//        echo '</select>';
        $sel = '';
        $i = 0;
        foreach($Niveles as $id => $nombre){
            $sel .= $id .':'.$nombre;
            if (++$i < sizeof($Niveles))
            $sel .= ';';
        }
        echo $sel;
//    $sel = copy($sel,0,length($sel)-1);

    }

    public function actionGetCursos()
    {
        $Niveles = Curso::model()->findAll('id_nivel=:parent_id',
            array(':parent_id'=>(int) $_GET['nivel']));
        $Niveles = CHtml::listData($Niveles, 'id','nombre');
//        echo '<select>';
//        foreach($Niveles as $id => $nombre){
//            echo '<option value='. $id .'>'.$nombre.'</option>';
//        }
//        echo '</select>';
        $sel = '';
        $i = 0;
        foreach($Niveles as $id => $nombre){
            $sel .= $id .':'.$nombre;
            if (++$i < sizeof($Niveles))
            $sel .= ';';
        }
        echo $sel;
    }
    public function actionGetCursosSelect()
    {
        $Niveles = Curso::model()->findAll('id_nivel=:parent_id',
            array(':parent_id'=>(int) $_GET['nivel']));
        $Niveles = CHtml::listData($Niveles, 'id','nombre');
//        echo '<select>';
//        foreach($Niveles as $id => $nombre){
//            echo '<option value='. $id .'>'.$nombre.'</option>';
//        }
        echo '<select>';
        foreach($Niveles as $id => $nombre){
            echo '<option value="'.$id .'">'.$nombre.'</option>';
        }
        echo '</select>';
    }

Juan on trying to create to dependant dropdowns

Sun, 26 Jul 2009 13:08:35 +0300

Hi all.

I have a grid with one lookup, 'niveles', that has a descendant lookup, 'cursos', when the user select from the 'niveles' lookup the data in the 'cursos' lookup mast be actualized. This is what I tried so far:

In the onSelectRow it works fine, the only thing here that bothers me is that I can't get the id of 'nivel', don't know how, instead, I'm using 'id_nivel', a hidden column only for this.

// The code so far

//——————————
    onSelectRow: function(id){
         if(id && id!==lastsel){
             var ret = jQuery(”#list”).getRowData(id);
             var cursos = $.ajax({
                     url: '/iae/index.php?r=curso/getCursos&nivel='+ret.id_nivel,
                     async: false}).responseText;
            jQuery(”#list”).setColProp('curso',
                    {editoptions: {value: cursos}});
             jQuery('#list').restoreRow(lastsel);
             jQuery('#list').editRow(id,true);
             lastsel=id;
             $('#save').attr('disabled',false);
            $('#cancel').attr('disabled',false);
         }
    },
//——————————

Then I'm tring to get the data for the descendant lookup when the user changes the master data, 'niveles', but can't get it to work, this is the last code I tried:

     {name:'nivel', index:'n.nombre', width:100, editable:true, edittype: 'select',
        editoptions : {
            value:niveles,
            attr: { title: 'Nivel' },
            dataEvents: [
                { type: 'change', fn: function(e) {
                         var nivel = e.currentTarget.value;
                         var cursos = $.ajax({
                             url: '/iae/index.php?r=curso/getCursos&nivel='+nivel,
                             async: false}).responseText;
                        jQuery("#list").setColProp('curso',{editoptions: {value: cursos}});

                    }
                }
            ]
        }
      },

but with not success

Well thanks a lot for reading this post and maibe someone else had problems with this like me, below I drop the code in case you want to see what is wrong
(sorry for my english!)

<?php
$this->widget('application.components.Grid',array('items'=>array('theme'=>'vader'),));
?>