Dynamically setting the "editoption" 'value' field for a select box in jqgrid

Posted by imomins on September 21, 2011 at 11:05 AM

1) call $.get() before constructing the grid

 

2)  put its result into a variable

 

3) set that variable in value:name pair of the select box editoptions

 

in colModel.

 

This didn't work because of $.get() executing  an AJAX call asynchronously

 

so that the abovementioned variable is assigned before the AJAX call is

 

finished and gets 'undefined' value accordingly.

 

The only way I found to make the stuff work is to use $.ajax() with async

 

set to 'false' ( instead of calling $.get() ) :

 

===========================

jQuery(document).ready(function(){

 

    var selectValue = $.ajax({

 

                url: "get_some_params_url",

 

                async: false

 

    }).responseText;

 

………….

 

    colModel : [

 

        ..........

 

        {

 

            edittype: "select",

 

            editoptions: {value: selectValue}

 

         },

 

        .........

 

    ],

 

}

 

========================

Which  is obviously not performance "friendly". It would be great to get

 

an option just to put a function making an AJAX call into 'editoptions', so

 

that the call will be fired off only when you click on a select box to pick the

 

value.

 

 

 

 

 

 

We have here a lot of possible solutions.

 

1. Setting the values direct via script – here is PHP example:

 

When you call the page with a grid – call it as php page and not as html

 

colModel [{....

 

{name:"mayname"...editable:true,edittype:"select",

 

editoptions:{'<?=$myeditoptions?>'}...},

 

...

 

]

 

where the variable $myeditoptions holds the values from the db

 

This is the recommendet solution. If this is not possible

 

2. We can use the method from previous post. We can cal this after the grid is constructed.It is not too late – why?

 

$.get("myurl",data:mydata,function(result,status){

 

if (status == "success") {

 

// get the result here, suppose that in myselect are the values

 

$("#mygrid").setColProp("myname",{editoptions:{myselects}});

 

 

}

 

}

 

3. Another possible solution is to use the userData in jqGrid -

 

(this is another elegant solution). See userData examples haw to do that.

 

Then

 

loadComplete : function() {

 

// get the userData here and convert it to format supported

 

// in colModel then the same tehchniquie as from 2

 

$("#mygrid").setColProp("myname",{editoptions:{myselects}});

 

 

}

 

~Enjoy


 

Categories: AJAX, JQUERY, JavaScript

Post a Comment

Oops!

Oops, you forgot something.

Oops!

The words you entered did not match the given text. Please try again.

You must be a member to comment on this page. Sign In or Register

0 Comments