CODEWITHSUNDEEP
jqgrid
Tim
Tim

Reputation: 1023

Can jqGrid support drag and drop rows with local data?

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>

Upvotes: 2

Views: 4579

Answers (1)

Oleg
Oleg

Reputation: 222017

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.

Upvotes: 5

Related Questions