CODEWITHSUNDEEP
javascriptjquery
Sam
Sam

Reputation: 2437

Using jqGrid with ArrayData and using the add, edit and delete buttons

I'm trying to get a basic datagrid for simple tabular input. The server will send the column information and render the corresponding table for the user to input records into and they post it back to the server.

I'm trying to get jqGrid to just save the data as ArrayData and not use a database so I've done the following code to test it out:

    <!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="css/custom-theme/jquery-ui-1.7.2.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />

<style>
html, body {
    margin: 0;
    padding: 0;
    font-size: 75%;
}
</style>

<script src="js/jquery-1.3.2.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">
jQuery(document).ready(function(){ 
  jQuery("#list").jqGrid({
    datatype: "local",
    colNames:['Inv No','Date', 'Amount','Tax','Total','Notes'],
    colModel :[ 
      {name:'invid', index:'invid', width:55, editable:true,editoptions:{size:10}}, 
      {name:'invdate', index:'invdate', width:90, editable:true}, 
      {name:'amount', index:'amount', width:80, align:'right', editable:true}, 
      {name:'tax', index:'tax', width:80, align:'right', editable:true}, 
      {name:'total', index:'total', width:80, align:'right', editable:true}, 
      {name:'note', index:'note', width:150, sortable:false, editable:true} 
    ],
    pager: '#pager',
    rowNum:10,
    rowList:[10,20,30],
    sortname: 'invid',
    sortorder: 'desc',
    viewrecords: true,
    caption: 'My first grid',


  }).navGrid('#pager', {add:true, del:true});
  myfirstrow = {
  invid:"1",
  invdate:"2007-10-01",
  note:"note",
  amount:"200.00",
  tax:"10.00",
  total:"210.00"}
  jQuery("#list").addRowData("1", myfirstrow);
});
</script>

</head>
<body>
<table id="list"></table> 
<div id="pager"></div> 
</body>
</html>

After clicking add row and filling in the form, selecting submit pops up with a "No URI set message", does anyone know how I can get round this so I can just input table data on the client side and then just send all the data at once back to the server?

Thanks

Upvotes: 1

Views: 709

Answers (1)

Dave Swersky
Dave Swersky

Reputation: 34810

I think the message you're getting indicates that the jqGrid needs a URI set so it knows where to send the data. You need to add the "url" or "editurl" setting and set its value to the URL to which the data should be posted. The jqGrid will post that data using AJAX.

Upvotes: 1

Related Questions