GRID

[rahul2008mohanMember]

im getting the problem while editing updating deleting in grid can u guide me if i commit any mistake in below code i want to edit the rows in popup and update the details that reflect to backend and frontend also in asp.net sql.im not getting the data in grid when page is loading also help me

In order to enter in edit mode, click any of the ‘Edit’ buttons.
To save the changes, click the ‘Save’ button in the popup dialog. To cancel the
changes click the ‘Cancel’ button in the popup dialog.

<!–

–>

$(document).ready(function () {
var theme = getDemoTheme();
// prepare sample data.
var data = {};
var generaterow = function (id) {
var row = {};
row[“ShipViaCode “] = id;
row[“Carrier”] = ” “;
row[“Service”] = ” “;
row[“Payment”] = ” “;
return row;
}
var source =
{
datatype: “json”,
datafields: [
{ name: ‘ShipViaCode’ },
{ name: ‘Carrier’ },
{ name: ‘Service’ },
{ name: ‘Payment’ },
],
id: ‘ShipViaCode’,
url: ‘http://localhost:8106/WebService.asmx/shipcodes’,
//url: ‘GroupCompany/GetGroupCompanies’,
addrow: function (rowid, rowdata, position, commit) {
// synchronize with the server – send insert command
$.ajax({
cache: false,
dataType: ‘json’,
//url: ‘http://localhost:8106/WebService.asmx/shipcodes’,
//url: ‘GroupCompany/Add’,
data: rowdata,
type: “POST”,
success: function (data, status, xhr) {
// insert command is executed.
commit(true);
},
error: function (jqXHR, textStatus, errorThrown) {
alert(errorThrown);
commit(false);
}
});
},
deleterow: function (rowid, commit) {
// synchronize with the server – send delete command
$.ajax({
dataType: ‘json’,
cache: false,
//url: ‘http://localhost:8106/WebService.asmx/shipcodes’,
//url: ‘/GroupCompany/Delete/5’,
type: “POST”,
success: function (data, status, xhr) {
// delete command is executed.
commit(true);
},
error: function (jqXHR, textStatus, errorThrown) {
alert(jqXHR.statusText);
commit(false);
}
});
},
updaterow: function (rowid, rowdata, commit) {
// synchronize with the server – send update command
{
$.ajax(
{
cache: false,
dataType: ‘json’,
//url: ‘http://localhost:8106/WebService.asmx/shipcodes’,
//url: ‘GroupCompany/Update’,
data: rowdata,
type: “POST”,
success: function (data, status, xhr) {
// update command is executed.
alert(success);
commit(true);
},
error: function (jqXHR, textStatus, errorThrown) {
alert(errorThrown);
commit(false);
}
}
);
}
}
};
// initialize the input fields.
$(“#Carrier”).addClass(‘jqx-input’);
$(“#Service”).addClass(‘jqx-input’);
$(“#Payment”).addClass(‘jqx-input’);
$(“#Carrier”).width(375);
$(“#Carrier”).height(23);
$(“#Service”).width(375);
$(“#Service”).height(23);
$(“#Payment”).width(50);
$(“#Payment”).height(23);
if (theme.length > 0) {
$(“#Carrier”).addClass(‘jqx-input-‘ + theme);
$(“#Service”).addClass(‘jqx-input-‘ + theme);
$(“#Payment”).addClass(‘jqx-input-‘ + theme);
}
var dataAdapter = new $.jqx.dataAdapter(source);
alert(source);
var editrow = -1;
// initialize jqxGrid../../JqWidgets/index.htm
$(“#jqxgrid”).jqxGrid(
{
width: 950,
height: 350,
source: dataAdapter,
sortable: true,
theme: ‘ui-smoothness’,
selectionmode: ‘singlecell’,
pageable: true,
editable: true,
rowdetails: true,
filterable: true,
columnsresize: true,
columnsreorder: true,
groupable: true,
rowsheight: 20,
altrows: true,
columns: [
{ text: ‘ShipViaCode’, datafield: ‘ShipViaCode’, width: 400 },
{ text: ‘Carrier’, datafield: ‘Carrier’, width: 400 },
{ text: ‘Service ‘, datafield: ‘Service’, width: 400 },
{ text: ‘Payment’, datafield: ‘Payment’, width: 120 }
]
});
$(“#jqxgrid”).bind(‘cellselect’, function (event) {
// open the popup window when the user clicks a button.
editrow = event.args.rowindex;
alert(“editrow ” + editrow);
var offset = $(“#jqxgrid”).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 = $(“#jqxgrid”).jqxGrid(‘getrowdata’, editrow);
alert(dataRecord.Carrier);
alert(dataRecord.Service);
alert(dataRecord.Payment);
$(“#ShipViaCode”).val(dataRecord.ShipViaCode);
$(“#Carrier”).val(dataRecord.Carrier);
$(“#Service”).val(dataRecord.Service);
$(“#Payment”).val(dataRecord.Payment);
// show the popup window.
$(“#popupWindow”).jqxWindow(‘show’);
});
// initialize the popup window and buttons.
$(“#popupWindow”).jqxWindow({
width: 480, resizable: false, theme: ‘ui-sunny’, isModal: true, autoOpen: false,
cancelButton: $(“#Cancel”), modalOpacity: 0.01
});
$(“#Cancel”).jqxButton({ theme: theme });
$(“#Save”).jqxButton({ theme: theme });
// update the edited row when the user clicks the ‘Save’ button.
$(“#Save”).click(function () {
alert(“Save ” + editrow);
if (editrow >= 0) {
var row = { ShipViaCode: $(“#ShipViaCode”).val(), Carrier: $(“#Carrier”).val(), Service: $(“#Service”).val(), Payment: $(“#Payment”).val() }
};
alert(row.Carrier);
alert(row.Service);
alert(row.Payment);
var id = $(“#jqxgrid”).jqxGrid(‘getrowid’, editrow);
$(‘#jqxgrid’).jqxGrid(‘updaterow’, id, row);
$(“#popupWindow”).jqxWindow(‘hide’);
});
$(“#addrowbutton”).jqxButton();
$(“#deleterowbutton”).jqxButton();
$(“#updaterowbutton”).jqxButton();
// update row.
$(“#updaterowbutton”).bind(‘click’, function () {
/*var datarow s generaterow(); */
var selectedrowindex = $(“#jqxgrid”).jqxGrid(‘getselectedrowindex’);
var rowscount = $(“#jqxgrid”).jqxGrid(‘getdatainformation’).rowscount;
if (selectedrowindex >= 0 && selectedrowindex = 0 && selectedrowindex < rowscount) {
var id = $("#jqxgrid").jqxGrid('getrowid', selectedrowindex);
$("#jqxgrid").jqxGrid('deleterow', id);
}
});
});

Edit

Carrier:

Service:

Payment:

[Author]

Posts