jQuery Grid Plugin - jqGrid - Topic: Dynamically change Form Editing

palobo on Dynamically change Form Editing

Mon, 24 Nov 2008 16:45:11 +0200

Hi diptendu.

This is how I got mine to work. I'm sure there may be better ways of doing this but here goes:

$("select#emp").change(function(){
$.post("/ajax/getcclist", { emp_id: +$("#emp").val()}, function(data){
var ccoptions = "";
if (data == "false")
{
    ccoptions += \\'<option value="0">No Options Selected</option>\\';
}
else
{
    obj = eval(\\'(\\' + data + \\')\\');
    ccoptions += \\'<option value="0"></option>\\';
    for (i = 0 ; i<obj["emp_id"].length; i++)
    {
      ccoptions += \\'<option value="\\' + obj["emp_id"][i] +
      \\'">\\' + obj["code"][i]+" - "+obj["emp_name"][i] + \\'</option>\\';
     }
   }
   $("select#ccusto").html(ccoptions);
});
});

You call this in the onInitializeForm event in your add/edit options.

Hope this helps some.

Cheers,

diptendu on Dynamically change Form Editing

Mon, 24 Nov 2008 07:39:40 +0200

Hello palobo,

Would you kindly share the code that you finally got working.

Regards,

Diptendu

palobo on Dynamically change Form Editing

Wed, 19 Nov 2008 09:12:09 +0200

Thanks all,

Got this working finally!

Cheers,
P.

tony on Dynamically change Form Editing

Wed, 19 Nov 2008 06:40:01 +0200

Hello,

The same can be applied in onInitializeForm event -

i.e. define for the second select empty values (or what you want) and

apply this logic

Regards

Tony

palobo on Dynamically change Form Editing

Mon, 17 Nov 2008 12:29:15 +0200

Hi Tony.

My code without jqGrid, standard form looks something like this:

$("#delag").change(function(){

      var delag_id = $("#delag").val();
    $.post("'.$this->view->baseUrl().'/ajax/supselect",
    {delag_id: delag_id}, function(data){
        var options = "";
        if (data == "false")
        {
            options += \\'<option value="0">Nenhum fornecedor criado.</option>\\';
        }
        else
        {
            obj = eval(\\'(\\' + data + \\')\\');
            for (i = 0 ; i<obj["id"].length; i++)
            {
            options += \\'<option value="\\' + obj["id"][i] +
            \\'">\\' + obj["name"][i] + \\'</option>\\';
            }
        }
        $("select#supplier").html(options);

Then when the user selects a value from the second select (#supplier) the onchange triggers another post to the server fetching the next round ou values for a third select.

Any pointers as to how I go about this with a jqGrid form?

Cheers and thansk for all the help.
P.

tony on Dynamically change Form Editing

Mon, 17 Nov 2008 07:42:51 +0200

Hello,

Imagine that there is no jqGrid. How will your code look like?

Tony

palobo on Dynamically change Form Editing

Sat, 15 Nov 2008 17:12:12 +0200

HI.

This seems to be similar to what I need. I have a few select boxes that need to change dynamically based on the previous selection, example, First choose country, next selct box shows only cities of that country, then choose city, next shows prvinces of that city… and so on.

Tony, I didn't quite understand what you meant. I have a field in the colum of edittype select say name:country.

onInitializeForm : function (form_id) {

$(”select#country”,form_id).change(function() {
if( $(this).val() == “some_value”)
{
//post to server and get value for cities…
}
});

All is good here, but then how do I change the options for the select name cities (for example).

Thanks to all in advance.

Cheers,
P.

tony on Dynamically change Form Editing

Thu, 18 Sep 2008 10:07:55 +0300

Hello,

Did you mean dpended listboxex?

Currently not possible, but simply you can do that easy using the same

event

something like

onInitializeForm : function (form_id) {

$("select#carrier",form_id).change(function() {

if( $(this).val() == "some_value") {

// chnge the values in the model of way what you want

}

})

jdeenadayalan on Dynamically change Form Editing

Thu, 18 Sep 2008 09:25:39 +0300

Hi Tony,

I am new to use jQGrid and i think its awesome.Although i have difficulty in acheiving the following.When using Form Editing how to i dynamically change the form once it is loaded. For e.g.

colModel:[{name:'bbid',index:'bbid', width:40, sorttype:"int",hidden:true,editable: true},

{name:

'user',index:'user', width:130,editable:true,editoptions:{readonly:true,size:10}},

{name:

'person',index:'person', width:70,editable:true,hidden:true,editoptions:{readonly:true,size:10}},

{name:

'carrier',index:'carrier', width:70,edittype:"select",editable:true,editoptions:{value:"197:Verizon;198:T-Mobile"

} },

{name:

'model',index:'model', width:90,edittype:"select",editable:true,editoptions:{value:"1:7290;2:8700;3:8100;4:8800;5:8320;6:7250;7:8703;8:8830"

}},}).navGrid('#pager2',

{}, //options

{height:250}, // edit options

{height:250,closeAfterAdd:true,reloadAfterSubmit:true}, // add options

{url:

'Invoice?sort=delete'

}, // del options here it passes the id as the parameter

{} // search options

);

});

In the edit options when i change the option box (colname:'carrier') i want to load the next option box(colname:'model') with different values.

I tried doing something like this but did not work:

onInitializeForm: function(id){

jQuery('#list2).editrow(id,true,changeoption);

}

function changeoption(id){

//setcolprop...

}

Any help would be great...

Thanks