0

I have a jqGrid control which includes a dropdownlist field. The items in the list come from a method on the server side using ajax, but I'm not sure how to structure the returned json to make it compatible with the grid. I looked at this question and according to the answers, it seems like the grid expects the following format for dropdowns:

[value] : [display text]

I'm relatively new to JavaScript and am not sure what type of data this is (I'm assuming it's a key-value pair?) so I don't know how create an array of this type from my json object. This is what I tried:

function populateTable(){
    $.ajax({
        type: "POST",
        url: "MyHttpHandler.ashx",
        data: "{}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (result) {
            var jsonObject = jQuery.parseJSON(result.d);

            var dropdpwnvalues = new[];

            for(var i = 0; i< jsonObject.length; i++){
                dropdpwnvalues.push({ jsonObject[i].id : jsonObject[i].name });
            }

            // The rest of the function
    );
}

dropdpwnvalues variable is the one that gets bound to the grid. Note that jsonObject does have an id and name on it, but this syntax

dropdpwnvalues.push({ jsonObject[i].id : jsonObject[i].name });

is obviously incorrect. Any ideas how I can make the list from this json object?

Community
  • 1
  • 1
Arian Motamedi
  • 7,123
  • 10
  • 42
  • 82
  • dropdpwnvalues.push({ value: jsonObject[i].id , displayText: jsonObject[i].name }); ? – Joe Jul 26 '14 at 12:55
  • I suppose that you makes many things wrong in your current code code. For example the line `var jsonObject = jQuery.parseJSON(result.d);` shows the you makes **unneeded** additional conversion of returned **Object** of data to `String`. Instead of that you should return **Object** from your `"MyHttpHandler.ashx"` method. .NET Framework will makes the serialization to JSON *automatically*. `$.ajax` will deserialize the data from JSON to object and `result.d` will be the object which you can directly use. No explicit call of `jQuery.parseJSON` will be needed. – Oleg Jul 27 '14 at 15:35
  • You posted too less information about jqGrid which you create so I have to guess. You can have additional problems because the format of data which you use **for filling** of grid means that you use ids in the data used for filling the grid. It means that you need to use `formatter: "select"` to display the data as text (names instead of ids). It's important that you have to set `editoptions.value` or `formatoptions.value` **before** the data, returned from the server to fill the grid, will be processed by jqGrid. See [the answer](http://stackoverflow.com/a/19427444/315935) for details. – Oleg Jul 27 '14 at 15:50

2 Answers2

1

I figured the easiest way to do this is by creating a string instead of an object array:

var sessionStream = ""

for (var i = 0; i < sessions.length; i++) {
    sessionStream += sessions[i].id + ":" + sessions[i].name + ";";
}

// Remove the trailing ';' in the stream
sessionStream = sessionStream.substring(0, sessionStream.length - 1);

I originally thought the grid was expecing a list. It can bind to a string just fine.

Arian Motamedi
  • 7,123
  • 10
  • 42
  • 82
0

You need to return JSON value of the Select list in following format : 

{1:'One',2:'Two'}

And , i believe you are using this in loadcomplete event of jqGrid. So, to set the JSON value simply use it as ,

loadcomplete : function(){      
        $.ajax({
             type: "POST",
             url: "MyHttpHandler.ashx",
             dataType: "json",
             success : function ( result) {
                  $("#gridId").setColProp('columnName', { editoptions: { value: result}});
                  }
             });
          }
Runcorn
  • 5,144
  • 5
  • 34
  • 52