jQuery UI Widgets › Forums › Grid › Grid Questions
Tagged: grid, insert row, jquery grid, jqwidgets, jqxgrid
This topic contains 4 replies, has 2 voices, and was last updated by kilmanagh 11 years, 11 months ago.
-
AuthorGrid Questions Posts
-
First of all,I love this product. I have been looking for something like this for a long time.
I am still trying to figure things out. I have read the documentation.. and trying to learn things step by step.
I am almost done with testing one of my databases. I have successfully made it so I can edit rows in the database and I am trying to add
an insert row function. I see the code that is provided in the example but unsure where to place it with my current code.
The second step I would like to do is apply a dropdown on a field called pfid which will drop down the text from another table via foreign key, but place the integer in the column even though the dropdown shows the description from the other table.
But first things first.. I want to add insert row functionality into the following code, which I am unsure where it needs to go to work:
Any suggestions?
pre style=’max-width: 740px; width: 740px; margin: 5px; padding: 5px;’ class=’code’> <!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) {
// synchronize with the server – send update command
var data = “update=true&name=” + rowdata.name + “&answer=” + rowdata.answer + “&keywords=” + rowdata.keywords;
data = data + “&playfield_id=” + rowdata.playfield_id + “&xcoord=” + rowdata.xcoord + “&ycoord=” + rowdata.ycoord;
data = data + “&id=” + rowdata.id;
$.ajax({
dataType: ‘json’,
url: ‘data.php’,
data: data,
success: function (data, status, xhr) {
// update command is executed.
}
});
}
};
// 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>
Hi,
1. I am not sure which version you use, but with jQWidgets 2.8.1 the definition of the “addrow”, “updaterow” and “deleterow” callbacks is a little different.
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); } }); }As you can see in the above code, there is a commit callback function. If you omit to call commit(true), then the UI will not be updated when you call the Grid’s updaterow method.
2. For creating a DropDownList editor with data from another data source, please take a look at the following sample: gridkeyvaluescolumnwitharray.htm.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com/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>
Hi,
I suppose your URL in the addrow callback should be “data.php”, not “data”.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com/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>
-
AuthorPosts
You must be logged in to reply to this topic.