jQuery Grid Plugin - jqGridForum

Topic RSS

Dynamically change Form Editing

18/09/2008
09:25

jdeenadayalan

New Member

Members

Forum Posts: 1

Member Since:
18/09/2008

Offline

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

18/09/2008
10:07

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

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

}

})

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.

15/11/2008
17:12

palobo

Portugal

Member

Members

Forum Posts: 41

Member Since:
13/11/2008

Offline

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.

17/11/2008
07:42

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

Hello,

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

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/11/2008
12:29

palobo

Portugal

Member

Members

Forum Posts: 41

Member Since:
13/11/2008

Offline

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.

19/11/2008
06:40

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

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

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.

19/11/2008
09:12

palobo

Portugal

Member

Members

Forum Posts: 41

Member Since:
13/11/2008

Offline

Thanks all,

Got this working finally!

Cheers,
P.

24/11/2008
07:39

diptendu

Member

Members

Forum Posts: 17

Member Since:
21/10/2008

Offline

Hello palobo,

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

Regards,

Diptendu

24/11/2008
16:45

palobo

Portugal

Member

Members

Forum Posts: 41

Member Since:
13/11/2008

Offline

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,