3

I am implementing Jqgrid in my ASP.net MVC Application. I need to bind a dropdown list inside a grid column of Jqgrid.

I was not able to find any good solid code for reference how to do this..

can any one suggest how to do this..a complete example would be great .

Sai Avinash
  • 4,683
  • 17
  • 58
  • 96

2 Answers2

10

Try using editoptions

 jQuery('#grid').jqGrid({
        autowidth: true,
        autoheight: true,
        url : '',
        mtype : 'POST',
        colNames : [  'ID','State', 'Product'],
        colModel : [ {name : 'id',index : 'id',hidden:true,align:'center'},
                     {name : 'name',index :'name',width:200,
                                            sortable:true,
                                            align:'center',
                                            editable:true,
                                            cellEdit:true,
                                            edittype: 'select', 
                                            formatter: 'select',

                                            editoptions:{value: getAllSelectOptions()}
                     },
                     {name : 'product',index : 'product'},
                   ],
        rowNum : 10,
        sortname : 'name',
        viewrecords : true,
        gridview:true,
        pager : '#pager',
        sortorder : 'desc',
        caption : 'Setup',
        datatype : 'json'
    });


function getAllSelectOptions(){
 var states = { '1': 'Alabama', '2': 'California', '3': 'Florida', 
               '4': 'Hawaii', '5': 'London', '6': 'Oxford' };

  return states;

}

See here and check here for all

Community
  • 1
  • 1
Murali Murugesan
  • 22,423
  • 17
  • 73
  • 120
1

inside your colModel

{ name: 'Decision', width: 200, editable: true, formatter: 'select', edittype: 'select', editoptions: {
                        value: {
                            '1': 'Option 1',
                            '2': 'Option 2',
                            '3': 'Option 3'
                        },
                        dataEvents: [
                                {
                                    type: 'change',
                                    fn: function (e) {
                                        var row = $(e.target).closest('tr.jqgrow');
                                        var rowId = row.attr('id');
                                        jQuery("#jQGrid").saveRow(rowId, false, 'clientArray');
                                    }
                                }
                            ]
                    }
                    },

this example will save your row on dropdown change event. Check this link for complete example

Hope this helps.

AthibaN
  • 2,087
  • 1
  • 15
  • 22
  • As far as i know, you can populate the dropdown only with `value:{}` as i have shown, check for the [Documentation](http://www.trirand.com/jqgridwiki/doku.php?id=wiki:common_rules) for more info, try to use `ViewBag` to fetch those values for dynamic behaviour. – AthibaN Oct 17 '13 at 12:54