jQWidgets Forums
jQuery UI Widgets › Forums › Grid › Grid Functions
Tagged: datagrid control, jqxgrid
This topic contains 7 replies, has 2 voices, and was last updated by Peter Stoev 12 years, 2 months ago.
-
AuthorGrid Functions Posts
-
I can’t seem to fire a function. See my grid setup below. Whenever I click on the Edit button, the editrow function does not seem to be triggering at all. Interesting thing is that the deleterow function is working.
$(document).ready(function () { // prepare the data var data = {}; var theme = 'fresh'; var source = { datatype: "json", datafields: [ { name: 'class_id', type: 'integer' }, { name: 'period_id', type: 'integer' }, { name: 'location_id', type: 'integer' }, { name: 'faculty_id', type: 'integer' }, { name: 'class_title', type: 'string' }, { name: 'class_weekday', value: 'integer' }, { name: 'class_time', type: 'string' }, { name: 'class_age_min', type: 'integer' }, { name: 'class_age_max', type: 'integer' }, { name: 'class_age_range', type: 'string' }, { name: 'class_limit', type: 'integer' }, { name: 'class_enrolled', type: 'integer'}, { name: 'class_available', type: 'integer' }, { name: 'p_title', type: 'string' }, { name: 'p_start_date' }, { name: 'p_end_date' }, { name: 'instructor', type: 'string' } ], id: 'class_id', url: 'data_classes.php', editrow: function (rowid, rowdata, commit) { // synchronize with the server - send update command var data = "update=true&" + $.param({ class_id: rowid }); $.ajax({ dataType: 'json', url: 'form_class.php', cache: false, data: data, success: function (data, status, xhr) { // update command is executed. commit(true) }, error: function (jqXHR, textStatus, errorThrown) { // cancel changes. commit(false); } }); }, deleterow: function (rowid, rowdata, commit) { // synchronize with the server - send delete command var data = "delete=true&" + $.param({ class_id: rowid }); $.ajax({ dataType: 'json', url: 'data_classes.php', cache: false, data: data, success: function (data, status, xhr) { // delete command is executed. commit(true) }, error: function (jqXHR, textStatus, errorThrown) { // cancel changes. commit(false) } }); } }; // initialize jqxGrid $("#jqxgrid").jqxGrid( { autoheight: true, width: 750, selectionmode: 'singlerow', source: source, theme: theme, editable: true, pageable: true, sortable: true, filterable: true, showstatusbar: true, renderstatusbar: function (statusbar) { // appends buttons to the status bar. var container = $("<div style='overflow: hidden; position: relative; margin: 5px;'></div>"); var addButton = $("<div style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;' src='img/add.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>Add</span></div>"); var editButton = $("<div style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;' src='img/edit.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>Edit</span></div>"); var deleteButton = $("<div style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;' src='img/delete.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>Delete</span></div>"); container.append(addButton); container.append(editButton); container.append(deleteButton); statusbar.append(container); editButton.jqxButton({ theme: theme, width: 60, height: 20 }); deleteButton.jqxButton({ theme: theme, width: 65, height: 20 }); // edit row. editButton.click(function (event) { var selectedrowindex = $("#jqxgrid").jqxGrid('getselectedrowindex'); var rowscount = $("#jqxgrid").jqxGrid('getdatainformation').rowscount; if (selectedrowindex >= 0 && selectedrowindex < rowscount) { var id = $("#jqxgrid").jqxGrid('getrowid', selectedrowindex); $("#jqxgrid").jqxGrid('editrow', id); } }); // delete selected row. deleteButton.click(function (event) { var selectedrowindex = $("#jqxgrid").jqxGrid('getselectedrowindex'); var rowscount = $("#jqxgrid").jqxGrid('getdatainformation').rowscount; if (selectedrowindex >= 0 && selectedrowindex < rowscount) { var id = $("#jqxgrid").jqxGrid('getrowid', selectedrowindex); $("#jqxgrid").jqxGrid('deleterow', id); alert('Class Deleted Successfully.'); window.location.replace('form_class.php'); } }); }, columns: [ { text: 'Period', datafield: 'p_title', pinned: true, width: 150 }, { text: 'Class', datafield: 'class_title', pinned: true, width: 130 }, { text: 'Weekday', datafield: 'class_weekday', width: 75 }, { text: 'Time', datafield: 'class_time', width: 150 }, { text: 'Ages', datafield: 'class_age_range', width: 60 }, { text: 'Limit', datafield: 'class_limit', cellsalign: 'center', width: 40 }, { text: 'Enrolled', datafield: 'class_enrolled', cellsalign: 'center', width: 60 }, { text: 'Available', datafield: 'class_available', cellsalign: 'center', width: 100 } ] }); });
Hi,
jqxGrid does not have “editrow” function so you should not expect it to be called in that way. To update Grid rows, use its “updaterow” method or its “setcellvalue” method.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com/I’m trying to submit a GET request with the selectedrow values to update the row in the database. I named editrow for testing purposes but was using updaterow before.
So basically what I’m attempting is:
When a user selects a row and clicks on the Edit Selected button defined below
editButton.click(function (event) { var selectedrowindex = $("#jqxgrid").jqxGrid('getselectedrowindex'); var rowscount = $("#jqxgrid").jqxGrid('getdatainformation').rowscount; if (selectedrowindex >= 0 && selectedrowindex < rowscount) { var id = $("#jqxgrid").jqxGrid('getrowid', selectedrowindex); $("#jqxgrid").jqxGrid('updaterow', id); } });
I want to use the updaterow function to submit a GET request with the row values to a php file to postback to the database.
updaterow: function (rowid, rowdata, commit) { // synchronize with the server - send update command var data = "update=true&class+id=" + rowdata.class_id + "&period_id=" + rowdata.period_id; data = data + "&faculty_id=" + rowdata.faculty_id + "&class_title=" + rowdata.class_title; data = data + "&class_time=" + rowdata.class_time + "&class_limit=" + rowdata.class_limit; $.ajax({ dataType: 'json', url: 'form_classs.php', cache: false, data: data, success: function (data, status, xhr) { // update command is executed. commit(true) }, error: function (jqXHR, textStatus, errorThrown) { // cancel changes. commit(false); } }); },
The updaterow function does not seem to be triggering at all. A similar, or should I say identical approach is in place in my setup for the deleterow function. Upon selecting a grid row and clicking on the Delete button (described below), the function deleterow is being triggered successfully.
deleteButton.click(function (event) { var selectedrowindex = $("#jqxgrid").jqxGrid('getselectedrowindex'); var rowscount = $("#jqxgrid").jqxGrid('getdatainformation').rowscount; if (selectedrowindex >= 0 && selectedrowindex < rowscount) { var id = $("#jqxgrid").jqxGrid('getrowid', selectedrowindex); $("#jqxgrid").jqxGrid('deleterow', id); } });
Here is the delete function again:
deleterow: function (rowid, rowdata, commit) { // synchronize with the server - send delete command var data = "delete=true&" + $.param({ class_id: rowid }); $.ajax({ dataType: 'json', url: 'data_classes.php', cache: false, data: data, success: function (data, status, xhr) { // delete command is executed. commit(true) alert('Class Deleted Successfully.') }, error: function (jqXHR, textStatus, errorThrown) { // cancel changes. commit(false) alert('Oops. Something went wrong. (FC-DB-03): ' + errorThrown); } });
Thanks!
Hi,
I suggest you to take a look at our CRUD sample and the help documentation of jqxGrid. The “updaterow” method call in the posted code is passing just the row’s ID, without the Data to be actually updated i.e rowdata is undefined.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com/Maybe I can express this a simpler way: Is there a way to pass the selected row values as a GET request to a php page using the grid functions?
Will verify this. Thanks a lot.
Still unable to configure this. Upon clicking this edit button, alert 1 is showing up but not alert 2. It’s as if the click method for the button is not completing and therefore not calling the updaterow function of the grid.
If I manually edit a grid cell, the updaterow function gets triggered but I need to trigger it with the button before any editing takes place.
// edit row. editButton.click(function (event) { alert("1"); var datarow = generaterow(); alert("2"); var selectedrowindex = $("#jqxgrid").jqxGrid('getselectedrowindex'); var rowscount = $("#jqxgrid").jqxGrid('getdatainformation').rowscount; if (selectedrowindex >= 0 && selectedrowindex < rowscount) { var id = $("#jqxgrid").jqxGrid('getrowid', selectedrowindex); $("#jqxgrid").jqxGrid('updaterow', id, datarow); } });
Hi,
If alert 2 is not called then you have an error on the line above i.e generaterow() – i.e either that function is not defined in your code or you have an issue inside it.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.