jQWidgets Forums

Forum Replies Created

Viewing 2 posts - 1 through 2 (of 2 total)

Author

Posts

April 25, 2013 at 10:47 pm in reply to: Grid Questions Grid Questions #20044

Member

So close.. but still wont add. I may have made it more difficult by adding sorting and paging:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../styles/jqx.base.css" type="text/css"/>
    <link rel="stylesheet" href="../styles/jqx.classic.css" type="text/css"/>
    <script type="text/javascript" src="../scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="../jqxcore.js"></script>
    <script type="text/javascript" src="../jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqxmenu.js"></script>
    <script type="text/javascript" src="../jqxdata.js"></script>
    <script type="text/javascript" src="../jqxgrid.js"></script>
    <script type="text/javascript" src="../jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../scripts/gettheme.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare the data
            var data = {};
            var theme = 'classic';
            var source = {
                datatype: "json",
                datafields: [
                    {
                        name: 'id'
                    },
                    {
                        name: 'name'
                    },
                    {
                        name: 'answer'
                    },
                    {
                        name: 'keywords'
                    },
                    {
                        name: 'playfield_id'
                    },
                    {
                        name: 'xcoord'
                    },
                    {
                        name: 'ycoord'
                    }
                ],
                id: 'id',
                url: 'data.php',
				root: 'Rows',
				beforeprocessing: function(data)
				{		
					source.totalrecords = data[0].TotalRows;
				},
				sort: function()
				{
					// update the grid and send a request to the server.
					$("#jqxgrid").jqxGrid('updatebounddata', 'sort');
				},
                updaterow: function (rowid, rowdata, commit) {
                    // synchronize with the server - send update command
                    var data = "update=true&" + $.param(rowdata);
                    $.ajax({
                        dataType: 'json',
                        url: 'data.php',
                        cache: false,
                        data: data,
                        success: function (data, status, xhr) {
                            // update command is executed.
                            commit(true);
                        },
                        error: function (jqXHR, textStatus, errorThrown) {
                            commit(false);
                        }
                    });
                },
                addrow: function (rowid, rowdata, position, commit) {
                    alert(rowid);alert(rowdata);alert(position);
                    // synchronize with the server – send insert command
                    // call commit with parameter true if the synchronization with the server is successful
                    //and with parameter false if the synchronization failed.
                    // you can pass additional argument to the commit callback which represents the new ID if it is generated from a DB.
                    var data = "insert=true&" + $.param(rowdata);
                    alert(data);
                    $.ajax({
                        dataType: 'json',
                        url: 'data.php',
                        data: data,
                        cache: false,
						success: function (data, status, xhr) {
                            // insert command is executed.
                            alert(status);
                            commit(true);
                        },
                        error: function(jqXHR, textStatus, errorThrown)
                        {
                            commit(false);//alert(jqXHR);alert(textStatus);alert(errorThrown);
                        }
                    });
                }
            };
            //Add Row
            $("#addrowbutton").jqxButton({ theme: theme });
            // create new row.
            $("#addrowbutton").on('click', function () {
                var datarow = generaterow();
                var commit = $("#jqxgrid").jqxGrid('addrow', null, datarow);
        });
            // initialize jqxGrid
			var dataadapter = new $.jqx.dataAdapter(source);
			
            $("#jqxgrid").jqxGrid({
                width: 1000,
                height: 500,
                selectionmode: 'singlecell',
                source: dataadapter,
                theme: theme,
                editable: true,
				pageable: true,
				sortable: true,
				virtualmode: true,
				autoheight: true,
				rendergridrows: function()
				{
					  return dataadapter.records;     
				},
				columns: [
                    {
                        text: 'id',
                        editable: false,
                        datafield: 'id',
                        width: 50
                    },
                    {
                        text: 'name',
                        //columntype: 'dropdownlist',
                        datafield: 'name',
                        width: 200
                    },
                    {
                        text: 'answer',
                        // columntype: 'dropdownlist',
                        datafield: 'answer',
                        width: 250
                    },
                    {
                        text: 'keywords',
                        datafield: 'keywords',
                        width: 300
                    },
                    {
                        text: 'playfield_id',
                        datafield: 'playfield_id',
                        width: 50
                    },
                    {
                        text: 'xcoord',
                        datafield: 'xcoord',
                        width: 50
                    },
                    {
                        text: 'ycoord',
                        datafield: 'ycoord',
                        width: 50
                    }
                ]
            });
        });
    </script>
</head>
<body class='default'>
<div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
    <div style="float: left;" id="jqxgrid">
    </div>
    <div style="margin-left: 10px; float: left;">
        <div>
            <input id="addrowbutton" type="button" value="Add New Row"/>
        </div>
    </div>
</div>
</body>

April 24, 2013 at 8:10 pm in reply to: Grid Questions Grid Questions #19942

kilmanagh

Member

Thank you,

I used the example that was online, it pointed to 1.7.x version. I updated the code.. I tried the insert function and cannot get it to do anything. I followed all examples. The column id is an identity increment, so I dont know if that has something to do with it.
Is there something wrong with this, that would make it not add a row?

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../styles/jqx.base.css" type="text/css"/>
    <link rel="stylesheet" href="../styles/jqx.classic.css" type="text/css"/>
    <script type="text/javascript" src="../scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="../jqxcore.js"></script>
    <script type="text/javascript" src="../jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqxmenu.js"></script>
    <script type="text/javascript" src="../jqxdata.js"></script>
    <script type="text/javascript" src="../jqxgrid.js"></script>
    <script type="text/javascript" src="../jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../scripts/gettheme.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare the data
            var data = {};
            var theme = 'classic';
            var source = {
                datatype: "json",
                datafields: [
                    {
                        name: 'id'
                    },
                    {
                        name: 'name'
                    },
                    {
                        name: 'answer'
                    },
                    {
                        name: 'keywords'
                    },
                    {
                        name: 'playfield_id'
                    },
                    {
                        name: 'xcoord'
                    },
                    {
                        name: 'ycoord'
                    }
                ],
                id: 'id',
                url: 'data.php',
                updaterow: function (rowid, rowdata, commit) {
                    // synchronize with the server - send update command
                    var data = "update=true&" + $.param(rowdata);
                    $.ajax({
                        dataType: 'json',
                        url: 'data.php',
                        cache: false,
                        data: data,
                        success: function (data, status, xhr) {
                            // update command is executed.
                            commit(true);
                        },
                        error: function (jqXHR, textStatus, errorThrown) {
                            commit(false);
                        }
                    });
                },
                addrow: function (rowid, rowdata, position, commit) {
                    alert(rowid);alert(rowdata);alert(position);
                    // synchronize with the server – send insert command
                    // call commit with parameter true if the synchronization with the server is successful
                    //and with parameter false if the synchronization failed.
                    // you can pass additional argument to the commit callback which represents the new ID if it is generated from a DB.
                    var data = "insert=true&" + $.param(rowdata);
                    alert(data);
                    $.ajax({
                        dataType: 'json',
                        url: 'data',
                        data: data,
                        cache: false,
                        success: function (data, status, xhr) {
                            // insert command is executed.
                            alert(status);
                            commit(true);
                        },
                        error: function(jqXHR, textStatus, errorThrown)
                        {
                            commit(false);//alert(jqXHR);alert(textStatus);alert(errorThrown);
                        }
                    });
                }
            };
            //Add Row
            $("#addrowbutton").jqxButton({ theme: theme });
            // create new row.
            $("#addrowbutton").on('click', function () {
                var datarow = generaterow();
                var commit = $("#jqxgrid").jqxGrid('addrow', null, datarow);
        });
            // initialize jqxGrid
            $("#jqxgrid").jqxGrid({
                width: 800,
                height: 500,
                selectionmode: 'singlecell',
                source: source,
                theme: theme,
                editable: true,
				columns: [
                    {
                        text: 'id',
                        editable: false,
                        datafield: 'id',
                        width: 100
                    },
                    {
                        text: 'name',
                        //columntype: 'dropdownlist',
                        datafield: 'name',
                        width: 100
                    },
                    {
                        text: 'answer',
                        // columntype: 'dropdownlist',
                        datafield: 'answer',
                        width: 200
                    },
                    {
                        text: 'keywords',
                        datafield: 'keywords',
                        width: 180
                    },
                    {
                        text: 'playfield_id',
                        datafield: 'playfield_id',
                        width: 180
                    },
                    {
                        text: 'xcoord',
                        datafield: 'xcoord',
                        width: 50
                    },
                    {
                        text: 'ycoord',
                        datafield: 'ycoord',
                        width: 50
                    }
                ]
            });
        });
    </script>
</head>
<body class='default'>
<div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
    <div style="float: left;" id="jqxgrid">
    </div>
    <div style="margin-left: 10px; float: left;">
        <div>
            <input id="addrowbutton" type="button" value="Add New Row"/>
        </div>
    </div>
</div>
</body>
</html>

Author

Posts

Viewing 2 posts - 1 through 2 (of 2 total)