jQuery Grid Plugin - jqGridForum

26/07/2009
13:08

Juan

Argentina / Mar del Plata

Member

Members

Forum Posts: 5

Member Since:
17/07/2009

Offline

1

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'),));
?>

26/07/2009
17:36

Juan

Argentina / Mar del Plata

Member

Members

Forum Posts: 5

Member Since:
17/07/2009

Offline

2

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>';
    }

14/08/2009
12:32

John Teague

Guest

Guests

3

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.

14/08/2009
14:09

Juan

Argentina / Mar del Plata

Member

Members

Forum Posts: 5

Member Since:
17/07/2009

Offline

4

thanks John, I´ll take it in to account

15/08/2009
02:57

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

5

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

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.

24/08/2009
12:31

balderas

New Member

Members

Forum Posts: 1

Member Since:
24/08/2009

Offline

6

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