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

Question

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>

Editable row means not that it is editing. It means that in can be set in the editable mode with respect of call of method like editRow. I don'r recommend you additionally use addRowData if it is not really required. In your case you can create the grid with the data by adding data: [myFirstRow] to the list of jqGrid options. You can specify id of the new row by adding id: "1" property to the myFirstRow object. Typically one use data: myArrayOfRowData, where all rows are in the array. — Oleg
– Oleg, Commented Mar 15, 2012 at 15:31

tpeczek · Accepted Answer · 2012-03-15 15:34:29Z

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 });

This worked! Thank you! I knew I was missing something in the examples.

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related