Making JqGrid cells editable

Question

My goal is to inline edit cells in a data grid using JQuery and JqGrid. I got the grid to populate based on an ajax request and json reponse. Unfortunately I can't get the cells to become editable when clicking on rows.

I tried both Chrome and Safari and did two days of research and still no luck. The links I used below didn't help:

http://trirand.com/blog/jqgrid/jqgrid.html

http://www.trirand.net/demoaspnetmvc.aspx

Following the tutorials I added an onRowSelect event that would call editRow and set the value to true. However it never works and I can't figure out why.

Any help would be greatly appreciated.

Code:

<html>
<head>
    <title>Test</title>

    <link rel="stylesheet" type="text/css" href="ui.jqgrid.css"/>
    <link rel="stylesheet" type="text/css" href="jquery-ui-1.8.2.custom.css"/>

    <style type="text/css">
    html, body {
        margin: 0;
        padding: 0;
        font-size: 75%;
    }
    </style>


    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
    <script src="i18n/grid.locale-en.js" type="text/javascript"></script>
    <script src="jquery.jqGrid.min.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(document).ready(function() {

            jQuery("#list").jqGrid({
                        url:'http://localhost:8080/jblog/messages',
                        datatype:'json',
                        jsonReader: {
                            root: 'rows',
                            repeatitems: false,
                            page:  'currentPage',
                            total: 'totalRecords'
                        },
                        mtype:'GET',
                        colNames:['Message ID', 'Message Content'],
                        colModel:[
                            {name:'messageId', index:'messageId'},
                            {name:'content', index:'content', width:'400'}
                        ],
                        viewrecords:true,
                        caption:'My first grid',
                        rowNum:30,
                        rowList:[10,20,30],
                        pager: '#pager',
                        sortname: 'messageId',
                        onSelectRow: function(id){
                            console.log('onSelectRow');
                            editRow(id);
                            },
                        editurl:'http://localhost:8080/jblog/messages'
                    });
        });
    </script>

</head>
<body>
<table id="list">
    <tr>
        <td/>
    </tr>
</table>
<div id="pager"></div>
<script type="text/javascript">
           var lastSelection;

           function editRow(id) {
               console.log("editRow");
               if (id && id !== lastSelection) {
                   console.log("setRowToEdit");
                   var grid = $("#list");
                   grid.restoreRow(lastSelection);
                   console.log("id " + id);
                   grid.editRow(id, true);
                   lastSelection = id;
               }
           }
</script>
</body>
</html>

Answer 1

The main error in your code is:

you have to include editable: true property in the columns which you need to edit.

Additionally you should do following changes in the code:

you should include <!DOCTYPE html ...> line before <html> which declare the dialect of HTML/XHTML which you use. If you use HTML5 dialect the line will be just <!DOCTYPE html> . In you case it seems can be the line <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> which corresponds XHTML 1.0 Strict. See the documentation for more details.
I recommend you reduce the number of global variables. The variable lastSelection and the function editRow should be just in outer scope of onSelectRow . So you can move there inside of $(document).ready(function() {/*here!!!*/}); block. I would recommend you better to use anonymous functions and place the code of editRow directly in the code of onSelectRow . By the way you can use $(this) instead of $("#list") inside of onSelectRow . It makes the code a little bit quickly and improves the maintenance of the code because you can easier cut & paste the code fragments.
you should never use prefixes like http://localhost:8080/ in the Ajax requests (see url and editurl options). Instead of that you should use url:'/jblog/messages' or url:'jblog/messages' URLs. Access to another server as the current server from which the current page are loaded or access of another port is prohibited because of same origin policy of Ajax.
I recommend you always use gridview: true jqGrid options which can improve performance of the grid.

Making JqGrid cells editable

Question

1 answers

solution1
1 ACCPTED 2012-04-01 19:27:43

Making JqGrid cells editable

Question

1 answers

solution1 1 ACCPTED 2012-04-01 19:27:43

solution1
1 ACCPTED 2012-04-01 19:27:43