Forum
Log In
Home
Topic RSS
07:16
24/03/2010
Offline
I'm trying to implement the Add New Row feature, but having trouble. My grid works great, but when I click on the "Enter Data" button nothing happens (the dialog box fails to pop open).
I'm thinking that maybe I'm missing a .js file, or I don't have the button tied into the grid correctly. I've totally read the documentation and examples, but have hit a wall.
Any ideas? Code is listed below (I apologize if I should have used a special formatting command to paste code).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see http://www.w3.org" />
<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/ui-lightness/jquery-ui-1.7.2.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
<style type="text/css">
/*<![CDATA[*/
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 src="src/grid.celledit.js" type="text/javascript"> </script>
<script type="text/javascript">
//<![CDATA[
jQuery(document).ready(function(){
jQuery("#list").jqGrid({
url:'example.php',
datatype: 'xml',
mtype: 'GET',
colNames:['Inv No','Date', 'Amount','Tax','Total','Notes'],
colModel :[
{name:'invid', index:'invid', width:55},
{name:'invdate', index:'invdate', width:90},
{name:'amount', index:'amount', width:80, align:'right'},
{name:'tax', index:'tax', width:80, align:'right'},
{name:'total', index:'total', width:80, align:'right'},
{name:'note', index:'note', width:150, sortable:false}
],
pager: '#pager',
rowNum:10,
rowList:[10,20,30],
sortname: 'invid',
sortorder: 'desc',
viewrecords: true,
caption: 'My first grid'
});
});
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
$("#bedata").click(function(){
jQuery("#list").jqGrid('editGridRow',"new",{height:280,reloadAfterSubmit:false});
});
//]]>
</script>
<style type="text/css">
/*<![CDATA[*/
div.c1 {text-align:center;}
/*]]>*/
</style>
</head>
<body>
<table id="list" class="scroll"></table>
<div id="pager" class="scroll c1"></div>
<form><input type="button" id="bedata" value="Enter Data" /></form>
</body>
</html>
03:45
24/03/2010
Offline
I just discovered that the Add New Row function needs to go in the body, not the head, to work.
I moved the script below to the body, and now the Input Form pops open, but it contains no data.
Anybody know how to populate the input form? I image you call a function and populate the options with the desired input fields?
($("#bedata").click(function(){
jQuery("#list").jqGrid('editGridRow',"new",{height:280,reloadAfterSubmit:false});
06:48
24/03/2010
Offline
Update:
After much experimentation, I can get either the server to pull data into a working grid, OR I can display a Add New Row dialog box containing the data entry rows, but I can't do both.
I'm not sure what I'm missing, and the documentation isn't clear on this.
04:21
24/03/2010
Offline
Ladies and Gentlemen, I am pleased to report that I figured out the solution to this problem.
The solution to adding fields to a Modal Box when Adding a New Row is to use the "editable" property to the ColModel that created the grid, as shown here:
colModel:[
{name:'id',index:'id', width:55,editable:false,editoptions:{readonly:true,size:10}},
{name:'invdate',index:'invdate', width:80,editable:true,editoptions:{size:10}} ],
First, you assign a property called "editable", and if you want the ability to edit the field you assign that to "true". (if the property is false (or missing, which then defaults to False), then the field won't even appear in the modal box). This was my problem.
Next, you assign some editoptions that will control whether the input is a checkbox, or a field, and how big the field is.
When you hit the Submit button, the data will be added to your grid, and the Modal box will be refreshed, but the Box does not close automatically. This allows to you enter multiple datasets without re-opening the box each time. To close the box, you have to hit cancel. (To make this situation more clear to users, you might consider renaming the box as "Close" instead of cancel.
Please note that there is one other option to refresh the data from the database upon a data submission.
19:07
Moderators
30/10/2007
Offline
Hello,
Glad that everthing is ok andf so good explained
Best Regards
Tony
For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.
Most Users Ever Online: 994
Currently Online:
53 Guest(s)
Currently Browsing this Page:
1 Guest(s)
Top Posters:
OlegK: 1255
markw65: 179
kobruleht: 144
phicarre: 132
YamilBracho: 124
Renso: 118
Member Stats:
Guest Posters: 447
Members: 11373
Moderators: 2
Admins: 1
Forum Stats:
Groups: 1
Forums: 8
Topics: 10592
Posts: 31289
Newest Members:
, razia, Prankie, psky, praveen neelam, greg.valainis@pa-tech.comModerators: tony: 7721, Rumen[Trirand]: 81
Administrators: admin: 66
