CODEWITHSUNDEEP
phpjqueryjquery-uizend-frameworkjqgrid
1291
1291

Reputation: 117

jqGrid cannot inline edit

I have been searching all over internet for a solution to my simple problem (I hope) but unfortunately nothing has helped!..

I am a beginner with jqGrid and I have successfully made it to show all my sample array data in a table.. What I want is to be able to edit the "role" column inline and save it back to the array data... I am using Zend framework and have this issue:

My problems

I am not able to edit the data at all. I can just select and highlight as usual, no textarea is been provided..

Here is my HTML (please verify I am using the right libraries):

<html>
<head>
    <title>JqGrid Test</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>  
    <link rel="stylesheet" type="text/css" media="screen" href="/js/jquery-ui-1.8.18.custom/css/ui-lightness/jquery-ui-1.8.18.custom.css" />  
    <link rel="stylesheet" type="text/css" media="screen" href="/js/jquery.jqGrid-4.4.0/css/ui.jqgrid.css" />  
    <script src="/js/jquery.jqGrid-4.4.0/js/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script src="/js/jquery.jqGrid-4.4.0/js/i18n/grid.locale-en.js" type="text/javascript"></script>
    <script src="/js/jquery.jqGrid-4.4.0/js/jquery.jqGrid.min.js" type="text/javascript"></script>
    <script src="/js/test/index.js" type="text/javascript"> </script>
    <script src="/js/jquery-ui-1.8.18.custom/js/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script>    
    <script src="/js/jquery.jqGrid-4.4.0/src/grid.loader.js" type="text/javascript"> </script>      
</head>
<body>
    <table id="list"  class="scroll"></table>
    <br />
</body>
</html>

Next my index.js: 

$(document).ready(function(){
    var lastsel2;
    jQuery("#list").jqGrid({
        datatype: "local",
        height: 250,
        colNames:['Role Id','name'],
        colModel:[
            {name:'id',index:'id', width:60, sorttype:"int", editable: true},           
            {name:'name',index:'name', width:100, sortable:false,editable: true,
                edittype:"textarea", editoptions:{rows:"2",cols:"10" },     
        ],
        onSelectRow: function(id){
            if(id && id!==lastsel2){
                jQuery('#list').restoreRow(lastsel2);
                jQuery('#list').editRow(id,true);
                lastsel2=id;
            }
        },
        caption: "Manipulating Array Data",
    });
    var mydata = [  
            {id:"1",name:"test"},
            {id:"2",name:"test2"},
            {id:"3",name:"test3"},
            {id:"4",name:"test"},
            {id:"5",name:"test2"},
            {id:"6",name:"test3"},
            {id:"7",name:"test"},
            {id:"8",name:"test2"},
            {id:"9",name:"test3"}
        ];
    for(var i=0;i<=mydata.length;i++)
        jQuery("#list").jqGrid('addRowData',i+1,mydata[i]);
});

What am I missing? I hope my question was clear and I thank and appreciate in adv to all who posts a response!

Upvotes: 0

Views: 1447

Answers (1)

Oleg
Oleg

Reputation: 221997

There are many errors in the code which you posted.

  • You should never use <html> without <!DOCTYPE html .... It means quirks mode of HTML. The later HTML code looks like XHTML. So you should use
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  • You should include only one version of any JavaScript library. In your code you included first jQuery 1.8.2 (it was error in src attribute too. it should be src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js") and then included jquery-1.7.2.min.js. In the same way you included first grid.locale-en.js and jquery.jqGrid.min.js and then included grid.loader.js which will include the same jqGrid code, but non-minimized.
  • The next point is not an real error, but you can remove class="scroll" which are not used by jqGrid since many many versions.
  • The definition of 'name' column contain syntax error: you have to include } at the end of the definition of 'name' column.
  • You use for(var i=0;i<=mydata.length;i++) instead of for(var i=0;i<mydata.length;i++). The usage of addRowData for the filling of grid is bad and slowly. You should just move the code which defines mydata before the code which create jqGrid and add data: mydata as additional parameter.
  • If you want to implement local editing of data you have to add additional parameter editurl: "clientArray" to the grid.

The next problem was the main reason why I wrote my answer. The problem is that you defined editable column 'id' in the grid. The problem is that jqGrid uses internally "id" as the id attribute of the row (<tr> elements) known as the rowid too. So you should rename id column to another name. Additionally you should provide id attribute in the input data which will be used as the rowid.

If you do prefer to hold your original "id" name for the column with the custom data and want that jqGrid uses any other property name like "id1" for example as the rowid you have to include

localReader: {id: "id1"}, // needed for reading of the rowids
prmNames: {id: "id1"}     // needed for editing

In the case mydata could looks like

var mydata = [
        {id: "1", id1: "10", name: "test"},
        {id: "2", id1: "20", name: "test2"},
        {id: "3", id1: "30", name: "test3"},
        {id: "4", id1: "40", name: "test"},
        {id: "5", id1: "50", name: "test2"},
        {id: "6", id1: "60", name: "test3"},
        {id: "7", id1: "70", name: "test"},
        {id: "8", id1: "80", name: "test2"},
        {id: "9", id1: "90", name: "test3"}
    ];

Here you will see the demo which is fixing of your original code. It uses values "10", "20", ..., "90" (id1) as the rowids (values of id attribute of <tr> elements) and it uses id with your custom data which can be edited.

Upvotes: 4

Related Questions