2

I am learning jqGrid, hoping to hook it up to a Redis database eventually. As a first step, I'm working with local data. Here is what I've got to use the sortable rows (drag and drop rows within a grid). The grid shows up and looks fine, the columns are even sortable, but I can't select a row and move it--what am I missing? Is it just because the data is local?

The css and js files are loaded with no problem.

<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My First Grid</title>

<link rel="stylesheet" type="text/css" media="screen" href="themes/redmond/jquery-ui-1.8.23.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />

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

<script type="text/javascript">
$(document).ready(function(){
  jQuery("#mytable").jqGrid({
      datatype:"clientSide",
      data:[ {"number": 1, "segment":"frontmatter", "name": "chap0"},
             {"number": 2, "segment":"mainmatter",  "name": "chap1"},
             {"number": 3, "segment":"backmatter",  "name": "chap2"},
           ],
      colNames:['Chapter Name', 'Chapter Number', 'Document Segment'],
      colModel:[
              {name:'name'},
              {name:'number', sorttype:'number'},
              {name:'segment'},
              ],
      autowidth:true,
      height:'200',
      sortname: 'number',
      viewrecords: true,
      caption: 'My first grid',
      altRows:true,
  });
});
jQuery("#sortrows").jqGrid('sortableRows');
</script>

</head>
<body>

<table id="mytable"></table>
</body>
</html>
Oleg
  • 220,925
  • 34
  • 403
  • 798
Tim
  • 1,013
  • 3
  • 17
  • 36

1 Answers1

5

Yes, jqGrid support sortableRows with local data. The demo, which is just the copy of the demo from the answer, uses jqGrid 4.4.1 and it works.

The code which you posted has two small, but important error:

  • You use jQuery("#sortrows").jqGrid('sortableRows');, but you created the grid with another id: jQuery("#mytable"). So you have to change "#sortrows" to "#mytable"
  • You have to move the line jQuery("#mytable").jqGrid('sortableRows'); inside of $(document).ready(function(){}); block. You current code calls sortableRows before the grid is created and so it will not work.
Community
  • 1
  • 1
Oleg
  • 220,925
  • 34
  • 403
  • 798
  • that was the problem! The first was just a typo, but the second problem was my misunderstanding of the demo. Now it works! – Tim Sep 26 '12 at 17:37
  • @Tim: You are welcome! The most important, that your code works now. – Oleg Sep 26 '12 at 17:53
  • That's exactly what I looked for. I see in the example that the checkboxes are unresponsive. Can I still have colums with working buttons? – Alexis Dufrenoy Sep 15 '14 at 10:11
  • @AlexisDufrenoy: Could you specify how you define "unresponsive" checkboxes and describe what exactly you need? – Oleg Sep 15 '14 at 10:15
  • In the example you gave, the "Closed" column contains checkboxes. And in the example, I'm not able to check or uncheck them. What I need, is a one or more column with regular buttons, with something actually happening when I click them, in a sortable JQGrid. For example, a button to delete the row, and some other actions. – Alexis Dufrenoy Sep 15 '14 at 12:49
  • @AlexisDufrenoy: Sorry, but it's many *independent* questions. To define checkboxes not disables one should use `formatoptions: { disabled: false}` option of `formatter: "checkbox"`. To make some action on check/uncheck one can use `beforeSelectRow` callback. For example see [the demo](http://www.ok-soft-gmbh.com/jqGrid/EditableCheckbox.htm) created for [the answer](http://stackoverflow.com/a/24239416/315935). One can use `beforeSelectRow` callback for any other content (buttons). For editing one can use `formatter: "actions"` (see [here](http://stackoverflow.com/a/5204793/315935) for example) – Oleg Sep 15 '14 at 12:59
  • Is there anyway that I can pass a server side call while ordering ? – Happy Coder Apr 10 '15 at 06:26
  • @HappyCoder: Sorry, but I don't understand your question. What you mean? You can set server side call by call of `jQuery.ajax` for example. The request works asynchronously. So one can do everything *on the client side* during waiting of the server response. If the user click on sorting the column in the time then sorting will be done. If you use `datatype: "local"` then the sorting will be done locally and I see no problem. Please don't ask common questions in comments to the answer if your question have no relation to the answer. You should just ask *new question* on the stackoverflow. – Oleg Apr 10 '15 at 13:25