2

I want to add drop down in JQGrid dynamically.

For example:-

I have below type of grid.

enter image description here

Now when I click on a button a new row should be added in the grid. And for new row the first column data will be dropdown, second Hyperlink, third dropdown and forth checkbox.

i.e. It should be same as the first row.

And for every button click new row should be added similar to first row.

Ankit
  • 2,753
  • 1
  • 19
  • 26

1 Answers1

5

For attribute of type formatter='select' and type='select', jQgrid internally maintains a list of key-value pairs.

So while inserting the new row, you need to provide "ID" as the value of drop down box.

For Example :

For inserting a new row :

  $("#listData").jqGrid('addRowData',index,{kpiParameter:1,product:'XYZ',metric:'1',perkSharing:'XYZ'});

Here, '1' is the ID of KpiParameter. For this solution to work you need to load whole list of key-value pair of the drop down while defining the jQgrid.

You can write jqGrid as below :

jQuery('#kpisetup').jqGrid({
            autowidth: true,
            autoheight: true,
            url : '',
            mtype : 'POST',
            colNames : [  'KPI ID','KPI Parameter', 'Product','Metric','Perk Sharing'],
            colModel : [ {name : 'kpi_id',index : 'kpi_id',autowidth: true,hidden:true,align:'center'},
                         {name : 'kpi_parameter',index : 'kpi_parameter',width:200,
                                                sortable:true,
                                                align:'center',
                                                editable:true,
                                                cellEdit:true,
                                                edittype: 'select', 
                                                formatter: 'select',
                                                editrules: { required: true},
                                                editoptions:{value: getKPIParameters()//LOAD ALL THE KPI PARAMETER KEY-VALUE PAIR}
                         },
                         {name : 'product',index : 'product',autowidth: true,formatter:'showlink',formatoptions:{baseLinkUrl:'#'},align:'center'},
                         {name : 'metric',index : 'metric',width:75,
                                                editable:true,
                                                edittype: "select",
                                                align:'center',
                                                formatter: 'select',
                                                editrules: { required: true},
                                                editoptions: {value: '1:select' //LOAD ALL THE METRIC VALUEs}
                         },
                         {name : 'perksharing',align:'left',index : 'perksharing',autowidth: true,editable:true,edittype: "checkbox",align:'center'}
                       ],
            rowNum : 10,
            sortname : 'kpi_parameter',
            viewrecords : true,
            gridview:true,
            pager : '#kpisetup_pager',
            sortorder : 'desc',
            caption : 'KPI Setup',
            datatype : 'json'
        });

Hope this will work for you.

Thanks, Gunjan.

Gunjan Shah
  • 5,088
  • 16
  • 53
  • 72
  • :- I've tried as you mentioned but instead of Dropdown the hardcode value is coming where I needed dropdown. – Ankit Oct 29 '12 at 05:56
  • 1
    Yes ankit, for the drop down view, you need to make the row as 'editable' after creating the row. you can use the this syntex : "grid.editRow(RowId, true);" – Gunjan Shah Oct 29 '12 at 06:55