jQWidgets Forums

This topic contains 7 replies, has 2 voices, and was last updated by Martin 6 years, 4 months ago.

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

Author

CRUD Operations Posts
January 7, 2019 at 1:40 pm CRUD Operations #103407

kiran.kesarkar
Participant

Dear All,

I am very new to jqxwidgets. It would be a great help if you could share me a sample code and working example for CRUD operations using jqgrid and jquery.

Thank you in advance

Kiran

January 8, 2019 at 7:55 am CRUD Operations #103422

Martin
Participant

Hello Kiran,

Thank you for writing!
I would like to suggest you to check this Demo about Create, Remove, Update, located in the jQuery demos of jqxGrid.
You can also read on this Page about addrow, deleterow and updaterow callbacks of the source.

Best Regards,
Martin

jQWidgets Team
http://www.jqwidgets.com/

January 9, 2019 at 8:36 am CRUD Operations #103444

kiran.kesarkar
Participant

I appreciate your help, Martin.

How do you suggest the approach for below?
For any CRUD operation, we provide popup for adding records, inline edit for the update. Remove/Delete for the row. It would be great if you could provide us with the real-time CRUD Operations.

Thanks,

Kiran

January 10, 2019 at 11:23 am CRUD Operations #103461

Martin
Participant

Hello Kiran,

Here is an Example of inline editing with updaterow callback executed.
When you call the addrow and deleterow methods of jqxGrid, on clicking a button, the corresponding callbacks are executed.
You can see this Demo for pop-up editing. Adding a row with a pop-up window would use the same approach.

And in the callbacks you should perform the calls for the operations to your server.

Best Regards,
Martin

jQWidgets Team
http://www.jqwidgets.com/

January 18, 2019 at 10:58 am CRUD Operations #103566

kiran.kesarkar
Participant

Hello Martin,

For CRUD operations with Grid, we have “AddNew” button for new record and “Edit” button for every row in a grid. In both conditions, we open the popup and allow to save. As I am new to JQXGrid, please review my code below and let me know your suggestions. Is there any other better way to do the CRUD operations using JQXGrid?

Thanks,
Kiran

<!DOCTYPE html>

<html xmlns=”http://www.w3.org/1999/xhtml”>
<head id=”Head1″ runat=”server”>
<title id=’Description’>Ascent API CRUD</title>
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css” />
<link rel=”stylesheet” href=”jqwidgets/styles/jqx.base.css” type=”text/css” />
<link rel=”stylesheet” href=”jqwidgets/styles/jqx.bootstrap.css” type=”text/css” />
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″ />
<meta name=”viewport” content=”width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1″ />
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxmenu.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxgrid.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxgrid.pager.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxgrid.sort.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxgrid.selection.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxnumberinput.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxwindow.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxlistbox.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdropdownlist.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxinput.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxcheckbox.js”></script>
<script type=”text/javascript” src=”jqwidgets/scripts/demos.js”></script>
<script type=”text/javascript” src=”jqwidgets/sampledata/generatedata.js”></script>
<script type=”text/javascript” src=”CommonService.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxvalidator.js”></script>

<script type=”text/javascript”>
var gridDataAdapter;
var baseURL = ‘xxx’;
var accessToken = ‘Bearer S68U4V1tb6gLpMJFz3eeqsNcua7ZrGcX59YyJT9rbE8iIqNMvN0gF3nleYIMe_-Z6g56U7P58vEjfnT7PKtM1y6K_ocUk5uxd_1JxRaBB_oUeOdnxQOAIRHXfUzWBaZbSchKQoxBgp4drNQ9E0vvmxiRQg5GeabZCPSFMZvstUORdWktYfV1fwbXhudH1Qr-84j04I9wFymQnWI9iuDsYP57piStxSkm-Rm4vmqfWaaaKpJ9U3DpXbfaM315gv-gPXZ3H3trp_qyYHyU8dvVGJHC8DSe6_37mJ1eTYMZDVpq6I_c-WkKeMHJpdj0OfdIrs-zI8AqvjaPX4A0m6f-FN_VMu4AddNK8tp3icOKGAKXFDCDtciHFeG0-AhmP5e3’;

$(document).ready(function () {
var rules=[];

$(‘#TestForm’).jqxValidator({
hintType: “label”,
rules: [
{ input: ‘#hotelclassname’, message: ‘The hotel class name is required!’, action: ‘keyup’, rule: ‘required’ },
]
});

//initialize grid
$(“#grid”).jqxGrid(
{
width: getWidth(‘Grid’),
//source: gridDataAdapter,
pageable: true,
autoheight: true,
sortable: true,
columns: [
{ text: ‘ID’, datafield: ‘HotelClassID’, cellsalign: ‘right’, align: ‘right’, width: 100 },
{ text: ‘Name’, datafield: ‘Name’, align: ‘left’, cellsalign: ‘left’ },
{ text: ‘Active’, datafield: ‘IsActive’, cellsalign: ‘left’, width: 100 },
{
text: ‘Edit’, datafield: ‘Edit’, columntype: ‘button’, width: 75, cellsrenderer: function () {
return “Edit”;
}, buttonclick: function (row) {
// open the popup window
editrow = row;
var offset = $(“#grid”).offset();
$(“#popupWindow”).jqxWindow({ position: { x: parseInt(offset.left) + 60, y: parseInt(offset.top) + 60 } });

// get the clicked row’s data and initialize the input fields.
var dataRecord = $(“#grid”).jqxGrid(‘getrowdata’, editrow);
$(“#hotelclassid”).val(dataRecord.HotelClassID);
$(“#hotelclassname”).val(dataRecord.Name);
//$(“#active”).prop(‘checked’, true);
$(“#active”).jqxCheckBox({ checked: dataRecord.IsActive });

// show the popup window.
$(“#popupWindow”).jqxWindow(‘open’);
}
}
]
});

//Bind data to grid
GridFetchData();

//update the edited row when the user clicks the ‘Save’ button.
$(“#Save”).click(function () {
var obj = $(‘#TestForm’).jqxValidator(‘validate’);
if(obj==false) {return false;}

var thisrow = {
HotelClassID: $(“#hotelclassid”).val(),
Name: $(“#hotelclassname”).val(),
IsActive: $(“#active”).jqxCheckBox(‘checked’)
};

if (editrow >= 0) {
var rowID = $(‘#grid’).jqxGrid(‘getrowid’, editrow);
$(‘#grid’).jqxGrid(‘updaterow’, rowID, thisrow );
$(“#popupWindow”).jqxWindow(‘hide’);
}
else {
$.ajax({
type: “POST”,
url: baseURL + ‘HotelClass’,
headers: { “Authorization”: accessToken },
data: thisrow,
success: function (response) {
$(“#popupWindow”).jqxWindow(‘hide’);
row = response;
var commit = $(“#grid”).jqxGrid(‘addrow’, null, thisrow);
alert(“Record added successfully”);
},
failure: function (response) {
alert(response.responseText);
},
error: function (jqXHR) {
var errors = jqXHR.responseJSON.ModelState;
for (var key in errors) {
var element = $(‘[data-bind=’ + key + ‘]’);
if (element)
{
var txt = ‘#’ + element.attr(‘id’);
var div = ‘#’ + element.parent().attr(‘id’);
var msg = errors[key];
$(txt).addClass(‘is-invalid’); // add the error class to show red input
$(div).append(‘<div class=”invalid-feedback”>’ + msg + ‘</div>’); // add the actual error message under our input
}
}
}
});
}
});

//add button click : adding new record
$(‘#Add’).click(function () {
editrow = -1;
// open the popup window when the user clicks a button.
var offset = $(“#grid”).offset();
$(“#popupWindow”).jqxWindow({ position: { x: parseInt(offset.left) + 60, y: parseInt(offset.top) + 60 } });
$(“#hotelclassid”).val(‘New’);
$(“#hotelclassname”).val(”);
// show the popup window.
$(“#popupWindow”).jqxWindow(‘open’);
});

function GridFetchData()
{
$.ajax({
type: “GET”,
headers: { “Authorization”: accessToken },
url: baseURL + ‘HotelClass’,
success: function (response) {
var gridData = response;
var gridSource =
{
localdata: gridData,
datatype: ‘json’,
updaterow: function (rowid, rowdata, commit) {
// synchronize with the server – send update command
// and with parameter false if the synchronization failder.
var id = rowid;
$.ajax({
type: “PUT”,
headers: { “Authorization”: accessToken },
url: baseURL + ‘HotelClass/’ + rowdata.HotelClassID,
data: rowdata,
success: function (response) {
commit(true);
alert(“Record updated successfully”);
},
failure: function (response) {
commit(false);
alert(response.responseText);
},
error: function (response) {
commit(false);
alert(response);
}
});
}
};
gridDataAdapter = new $.jqx.dataAdapter(gridSource);
$(“#grid”).jqxGrid(‘source’, gridDataAdapter);
},
error: function (json, textStatus, errorThrown) {
alert(‘ Error :’ + errorThrown);
}
});
}
});

</script>
</head>

<body class=’default’>
<input id=”Add” type=”button” value=”Add New” />
<br />
<br />
<div id=”grid”></div>

<div id=”popupWindow” class=”container”>
<div>Edit</div>
<form id=”TestForm” action=”./”>
<div id=”div1″ class=”form-group”>
<label for=”txtName”>Hotel Class ID</label>
<input type=”text” class=”form-control” id=”hotelclassid” placeholder=”Enter Name” data-bind=”HotelClassID” />
<!– errors will go here –>
</div>

<div id=”divName” class=”form-group”>
<label for=”txtName”>Hotel Class Name</label>
<input type=”text” class=”form-control” id=”hotelclassname” placeholder=”Enter Name” data-bind=”Name” />
<!– errors will go here –>
</div>

<div id=”divIsActive” class=”form-group”>
<label for=”rdoIsActiveYes”>Active</label>
<input type=”checkbox” class=”form-control” id=”active” value=”0″ data-bind=”IsActive” />
</div>
<button type=”button” class=”btn btn-success” id=”Save”>Submit <span class=”fa fa-arrow-right”></span></button>
<button type=”button” class=”btn btn-danger” id=”Cancel”>Cancel <span class=”fa fa-arrow-right”></span></button>
</form>
</div>
</body>
</html>
`

January 21, 2019 at 11:44 am CRUD Operations #103587

Martin
Participant

Hello Kiran,

I looked at the code you have sent, and everything is fine.
Something that I can suggest you is that you can move the ajax call for the POST request also inside the source, in the addrow callback,
as you have done for the PUT request inside updaterow.
The callback would be executed when you call $("#grid").jqxGrid('addrow', null, thisrow);

Best Regards,
Martin

jQWidgets Team
http://www.jqwidgets.com/

January 22, 2019 at 7:24 am CRUD Operations #103598

kiran.kesarkar
Participant

Hello Martin,
Thank you for your suggestion. This will certainly improve the code.
With this example, Is it possible to get a model javascript object from the grid when I edit or add the record using popup?

I will be grateful if you could share me an example for CRUD with a bootstrap popup for add/edit records which will work for touch, mobile and web?

Thanks,

Kiran

January 22, 2019 at 1:36 pm CRUD Operations #103605

Martin
Participant

Hello Kiran,

You could use the getrows method of the Grid.
Unfortunately, we do not have such example with bootstrap.

Best Regards,
Martin

jQWidgets Team
http://www.jqwidgets.com/
Author

Posts

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

You must be logged in to reply to this topic.