jQuery Grid Plugin - jqGrid - Topic: Trouble with Add New Row feature

tony on Trouble with Add New Row feature

Wed, 31 Mar 2010 19:07:10 +0300

Hello,

Glad that everthing is ok andf so good explained

Best Regards

Tony

Preichow on Trouble with Add New Row feature

Sat, 27 Mar 2010 04:21:29 +0200

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.

Preichow on Trouble with Add New Row feature

Fri, 26 Mar 2010 06:48:23 +0200

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.

Preichow on Trouble with Add New Row feature

Fri, 26 Mar 2010 03:45:41 +0200

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

Preichow on Trouble with Add New Row feature

Thu, 25 Mar 2010 07:16:50 +0200

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>
<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>