jQuery Grid Plugin - jqGridForum

Topic RSS

Add a row

22/09/2009
15:15

violinssoundcool

Member

Members

Forum Posts: 35

Member Since:
05/02/2009

Offline

Hi. I'm trying to get the “Add Row” function to work, but I just don't really understand the concept of what needs to happen. The grid itself works fine. I'm still working on the edit, delete, and print buttons. On the demonstration page, it looks like the code for the “Edit Row” button is included instead of the “Add Row.” I get that I'll need to add a button below the pager that has an id of “bedata” and add a .click() function for it, but I don't know what's supposed to happen in this function or how to design the form that is presented. I tried reading the wiki for documentation, but just can't seem to understand what needs to happen. Can you guys give an explanation of what needs to happen?

Here's my code if that helps:

<!–$top$–>
Content-type: text/html

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DT.....o;>

<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>General Ledger</title>

    <link rel=”stylesheet” type=”text/css” media=”screen” href=”/GL/css/sabel/jquery-ui-1.7.2.custom.css” />
    <link rel=”stylesheet” type=”text/css” media=”screen” href=”/GL/css/ui.jqgrid.css” />
    <link rel=”stylesheet” href=”/CSS_GL/main.css” type=”text/css”>

    <script src=”/GL/js/jquery-1.3.2.min.js” type=”text/javascript”></script>
    <script src=”/GL/js/i18n/grid.locale-en.js” type=”text/javascript”></script>
    <script src=”/GL/js/jquery.jqGrid.min.js” type=”text/javascript”></script>

var lastsel;

            $(”#batches”).jqGrid(
            {
                url: “GL0002B”,
                datatype: “json”,
                mtype: 'GET',
                colNames: columnNames,
                colModel: columnModel,
                pager: jQuery('#pager2'),
                pgtext: ' of',
                rowNum: 20,
                rowList: [5,10,15,20],
                imgpath: “/GL/css/sabel/images”,
                sortname: 'dateBatchCreated',
                sortorder: “asc”,
                loadComplete:
                    function()
                    {
                        var ids = jQuery(”#batches”).getDataIDs();
                        for(var i=0;i<ids.length;i++)
                        {
                            var cl = ids[i];
                            be = “<input style='height:22px;width:40px;' type='button' value='Edit' onclick=$('#batches').editRow(”+cl+”); ></ids>”;
                            se = “<input style='height:22px;width:50px;' type='button' value='Delete' onclick=$('#batches').deleteRow(”+cl+”); />”;
                            ce = “<input style='height:22px;width:70px;' type='button' value='Print Edit' onclick=$('#batches').printRow(”+cl+”); />”;
                            jQuery(”#batches”).setRowData(ids[i],{act:be+se+ce})
                        }
                    },
                editurl: “GL0002C”,
                viewrecords: true,
                caption: “Journal Entry Batches”,
                width: gridwidth,
                height: '300px',
                multiselect: false,
                editurl: “GL0002C”,
                shrinkToFit: true,
                jsonReader :
                {
                    root: “rows”,
                    page: “page”,
                    total: “total”,
                    records: “records”,
                    repeatitems : false
                }
            });

            $('#bedata').click(function()
            {
                var gr = $('#editgrid').getGridParam('selrow');
                if( gr != null ) $('#editgrid').editGridRow(gr,{height:280,reloadAfterSubmit:false});
                else alert('Please Select Row');
            });
}).navGrid(”#pager2″,{edit:false,add:false,del:false});
    </script>
</head>
<body>
    <div class=”container” id=”container”>
        <div class=”header”></div>
        <div class=”menuBar”>
            <ul>
                <li><a href=”">Journal Processing</a></li>
                <li><a href=”">File Maintenance</a></li>
                <li><a href=”">Inquiry</a></li>
                <li><a href=”">Reports/Listings</a></li>
                <li><a href=”">Month/Year End Close</a></li>
            </ul>
        </div>
        <div class=”content”><br />
            <div class=”table” id=”table”>
                <table id=”batches” class=”scroll” cellpadding=”0″ cellspacing=”0″ style=”margin-left: auto; margin-right: auto;”>
                </table><br />
                <div id=”pager2″ class=”scroll” style=”text-align: center; height: 35px;”></div>
                <input type=”BUTTON” id=”bedata” value=”Add Row” />
            </div>
        </div>
    </div>
</body>
</html>

25/09/2009
04:29

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

Hello,

You call click button with in jqGrid parameters. This is wrong. The click event should be outside grid parameters

To have Add button you will neeed to call editGridRow with _empty id. See docs and examples.

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.

25/09/2009
04:33

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

Hello,

You call click button with in jqGrid parameters. This is wrong. The click event should be outside grid parameters

To have Add button you will neeed to call editGridRow with _empty id. See docs and examples.

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.

All RSS

Forum Timezone: Europe/Sofia

Most Users Ever Online: 715

Currently Online:
170 Guest(s)

Currently Browsing this Page:
1 Guest(s)