CODEWITHSUNDEEP
jqueryhtmljqgrid
Neil Wood
Neil Wood

Reputation: 153

Why are my jqGrid rows not editable even when optioned as such?

I am trying to add a jqGrid to a ASP.NET MVC3 partial view. This grid will be for the client side only as a shortcut calculator, they press a button and the grid generates based on some entered parameters. I can get the grid to show up and even addDataRow to it however the rows is not editable even though the fields are designated as such. I have tried it in IE9, Chrome, FF, Safari all the same outcome.

I pulled it out into a simple HTML page to see if it was related to the MVC partial view interfering but still no luck with the editable rows. The row is selectable but does not open up for editing.

I double checked to make sure I downloaded the full jqGrid package from here

Is a row added via addDataRow not editable by default? From all the documentation on the jqGrid Wiki I couldn't find where it isn't. I've read the inline editing wiki page several times and it seems like this should just work. What am I missing?

not editable http://bigpichost.com/files/noteditable_zm7rflo0.png

When I click on the row it selects but doesn't open up for editing!

Here is the HTML page that I'm testing with:

<html>
   <head>
    <meta charset="utf-8">
     <title>Testing JQGrid</title>
        <link rel="stylesheet" href="../Content/themes/base/jquery.ui.all.css">
        <link href="Content/ui.jqgrid.css" rel="stylesheet" type="text/css" />
        <link href="Content/themes/redmond/jquery-ui-1.8.18.custom.css" rel="stylesheet" type="text/css" />
    </head>

    <script src="Scripts/jquery-1.7.1.js" type="text/javascript"></script>
    <script src="Scripts/jquery-ui-1.8.18.custom.js" type="text/javascript"></script>
    <script src="Scripts/grid.locale-en.js" type="text/javascript"></script>
    <script src="Scripts/jquery.jqGrid.min.js" type="text/javascript"></script>
    <body>
        <table id=jqgRequests></table>

        <script type="text/javascript">
        $(document).ready(function () {
            $('#jqgRequests').jqGrid({
                // type of data
                datatype: 'local',
                // column names
                colNames: ['Save', 'Pct-Amt', 'Request', 'French'],
                // columns model
                colModel: [
                    { name: 'Save', index: 'Save', width: 55, sortable: false, editable: true, edittype: 'checkbox', formatter: 'checkbox', align: 'center' },
                    { name: 'PctAmt', index: 'PctAmt', width: 55, editable: false, align: 'right' },
                    { name: 'Request', index: 'Request', editable: true, align: 'left' },
                    { name: 'French', index: 'French', editable: true, align: 'left' }
                    ],
                //initial sorting column
                sortname: 'Pct-Amt',
                // initial sorting direction
                sortorder: 'asc',
                // we want to display total records count
                viewrecords: false,
                // grid width
                autowidth: true,
                // grid header
                caption: "Generated Requests"
            });  // end jqgrid
            var myFirstRow = { Save: "true", PctAmt: "0", Request: "Testing this", French: "Testing Oui" };
            $('#jqgRequests').addRowData("1", myFirstRow);
        });
        </script>
    </body>
</html>

Upvotes: 2

Views: 1396

Answers (1)

tpeczek
tpeczek

Reputation: 24125

Something must switch the row into the editable state. If you want the row to be in edit mode after adding it, you just need to call editRow method:

$("#jqgRequests").jqGrid('editRow', "1", false);

If you want the row to switch into editable state when you select it, you should use onSelectRow callback:

var previousSelectedRowId;

$('#jqgRequests').jqGrid({
    ...
    onSelectRow: function(currentSelectedRowId) {
        if(currentSelectedRowId && currentSelectedRowId !== previousSelectedRowId) { 
            $('#jqgRequests').jqGrid('restoreRow', previousSelectedRowId); 
            previousSelectedRowId = currentSelectedRowId; 
        }
        $('#jqgRequests').jqGrid('editRow', currentSelectedRowId, false);
    },
    ...
};

If you want to add row, which is already in edit mode, you should use addRow method:

$('#jqgRequests').jqGrid('addRow', { rowID: "1", initdata: myFirstRow });

Upvotes: 1

Related Questions