CodeIgniter with Jqgrid

Question

Hi, I've been working on jqGrid for the last 3 days.

I've been able to populate the grid, but now I can't get to work the buttons/features of the jqGrid like add, edit, save or even delete a row.

Any suggestion/opinions on how to do this will be really helpful.

btw- I'm using codeigniter with jqGrid

this is my js file

$("#listFlex").jqGrid({
    url: root + mod + '/listview2',
    datatype: "json",
    colNames:['','role_code','role_description'],
    colModel:[
        {name:'role_id',index:'role_id', width:50, align:"center",hidden:true},
        {name:'role_code',index:'role_code', width:80},
        {name:'role_desc',index:'role_desc', width:100,align:"left"}
    ],
    buttons : [
        {name: $.i18n._(action_lang,'delete'), bclass: 'delete', onpress: df_delete_1},
        {separator: true}
    ],
    rowNum:10,
    rowList:[10,20,30],
    pager: '#pager2',
    sortname: 'role_id',
    viewrecords: true,
    sortorder: "desc",
    onSelectRow: function(id){
        if(id && id!==lastsel){
            jQuery('#listFlex').jqGrid('restoreRow',lastsel);
            jQuery('#listFlex').jqGrid('editRow',id,true);
            lastsel=id;
        }
    },
    autowidth: true,
    height: "200",
    viewrecords: true,
    sortorder: "desc",
    caption:"JSON Example",
    editurl:"sec_role/post"
});

jQuery("#listFlex").jqGrid('navGrid','#pager2',{edit:true,add:true,del:true});

//edit data
$("#bedata").click(function(){
    var gr = jQuery("#listFlex").jqGrid('getGridParam','selrow');
    if( gr != null )
        jQuery("#listFlex").jqGrid('editGridRow',gr,{height:280,reloadAfterSubmit:false});
    else
        alert("Please Select Row");
});

$("#dedata").click(function(){
    var gr = jQuery("#listFlex").jqGrid('getGridParam','selrow');
    if( gr != null )
        jQuery("#listFlex").jqGrid('delGridRow',gr,{reloadAfterSubmit:false});
    else
        alert("Please Select Row to delete!");
});

view file

<table id="listFlex" class="listFlex" cellpadding="0" cellspacing="0"></table>
<div id="pager2" class="scroll" style="text-align: center;"></div>
<input type="BUTTON" id="bedata" value="Edit Selected" /> <!--edit-->
<input type="BUTTON" id="dedata" value="Delete Selected" /><!-- add-->

Answer 1

Are you getting any errors in the logs? Have you stepped through the code with FireBug to see what is actually happening and if any JS errors are being thrown?

Answer 2

Maybe it is that you are not including jqModal.js and jqDnR.js. They are located in src

Answer 3

$("#bedata").click(function(){
    var gr = ***jQuery("#listFlex").jqGrid('getGridParam','selrow');***
    if( gr != null )
        jQuery("#listFlex").jqGrid('editGridRow',gr,{height:280,reloadAfterSubmit:false});
    else
        alert("Please Select Row");
});

test this

jQuery("#bedata").click(function()
 { var gr = ***jQuery("#listFlex").getGridParam('selrow');***
 if( gr != null ) jQuery("#listFlex").editGridRow(gr,{height:280,reloadAfterSubmit:false});
  else alert("Please Select Row");
 }); 

Answer 4

hi i just started to work with jqgrid. Can you please post all the js, controller,model,view file. i will try