during edit(popup) functonality I am not getting the (rowaid) id of the record

[pankhiParticipant]

Folowing is the json that i have and code that i have used.Ineed to fnd out result from 3 different tables.so indatafied i have mentioned them using “map”.but if i’ll find record freo one table and remove the map from at field than I AM GETTING THE RECORD ID i.e.. ROWiD:-

json:- [{“SystemEmailgroupEmail”:{“Email”:”check@gmail.com”,”Name”:”checking”},”SystemEmailgroupMapping”:{“id”:”7″,”KiOuiUserId”:”6″,”groupId”:”3″,”EmailId”:”9″},”SystemEmailgroupGroup”:{“groupName”:”Family”}},{“SystemEmailgroupEmail”:{“Email”:”check@gmail.com”,”Name”:”checking”},”SystemEmailgroupMapping”:{“id”:”6″,”KiOuiUserId”:”6″,”groupId”:”6″,”EmailId”:”9″},”SystemEmailgroupGroup”:{“groupName”:”organisation”}},{“SystemEmailgroupEmail”:{“Email”:”test@gmail.com”,”Name”:”test”},”SystemEmailgroupMapping”:{“id”:”5″,”KiOuiUserId”:”6″,”groupId”:”3″,”EmailId”:”8″},”SystemEmailgroupGroup”:{“groupName”:”Family”}},{“SystemEmailgroupEmail”:{“Email”:”test@gmail.com”,”Name”:”test”},”SystemEmailgroupMapping”:{“id”:”4″,”KiOuiUserId”:”6″,”groupId”:”10″,”EmailId”:”8″},”SystemEmailgroupGroup”:{“groupName”:”Problems testers”}},{“SystemEmailgroupEmail”:{“Email”:”jccompagnon@kioui-apps.com”,”Name”:”Jean-Charles Compagnon”},”SystemEmailgroupMapping”:{“id”:”3″,”KiOuiUserId”:”18″,”groupId”:”10″,”EmailId”:”7″},”SystemEmailgroupGroup”:{“groupName”:”Problems testers”}}]

$(document).ready(function(){
//===============================
// show the grid for email Group
//===============================
var url = “/settings/manageemailjson”; // action from where we get the result in json
var source =
{
datatype: “json”,
datafields:
[
{ name: ‘Name’, map:”SystemEmailgroupEmail>Name”, type: ‘string’ },
{ name: ‘Email’,map:”SystemEmailgroupEmail>Email”, type: ‘string’ },
{ name: ‘groupName’,map:”SystemEmailgroupGroup>groupName”, type: ‘string’ },
],
updaterow: function (rowid, rowdata, commit) {
// synchronize with the server – send update command
},
id: ‘id’,
url: url,
pagesize: 30,
};
var dataAdapter = new $.jqx.dataAdapter(source);
var editrow = -1;

// initialize jqxGrid
$(“#jqxgrid”).jqxGrid(
{
width:’100%’,
height: 350,
source: dataAdapter,
pageable: true,
autoheight: true,
sortable: true,
altrows: true,
enabletooltips: true,
pagesizeoptions: [’10’, ’20’, ’30’,’40’],
showfilterrow: true,
filterable: true,
showtoolbar: false,

// columns shown in grid are mention below
columns: [
{ text: ”, datafield: ‘Edit’, columntype: ‘number’,filterable: false,width :’5%’, sortable: false ,
cellsrenderer: function () {
return ‘<div style=”width: 100%”></div>’;
}
},
{ text: ‘Name’, datafield: ‘Name’ ,width :’25%’},
{ text: ‘Email’, datafield: ‘Email’ ,width :’35%’ },
{ text: ‘groupName’, datafield: ‘groupName’ ,width :’30%’},
{ text: ”, datafield: ‘Delete’, columntype: ‘number’,filterable: false, sortable: false ,width :’5%’,
cellsrenderer: function () {
return ‘<div></div>’;
}
},
]

});

// initialize the popup window and buttons.
$(“#popupWindow”).jqxWindow({
width: 750, height:260, resizable: false, isModal: true, autoOpen: false, cancelButton: $(“#cancel”), modalOpacity: 0.01
});

// update the edited row when the user clicks the ‘Save’ button.
$(“#Save”).click(function () {

if (editrow >= 0) {

var rowID = $(‘#jqxgrid’).jqxGrid(‘getrowid’, editrow);
var row = {
Name: $(“#Name”).val(),
Email: $(“#Email”).val(),
id:rowID,
};
// ajax called to UPDATE the row on edit

$.ajax({
url: ‘/settings/addemailajax’,
data: row,
type: “POST”,
cache: false,
async: false,
success: function(response)
{
if(response==”success”){

}else{
alert(‘Something went wrong please try again.’);
}
},
error: function (response) {
// cancel changes.
alert(‘Something went wrong please try again.’);
}
});

// $(‘#jqxgrid’).jqxGrid(‘updaterow’, rowID, row);
$(“#popupWindow”).jqxWindow(‘hide’);
}
});

// on click of edit and delete
$(“#jqxgrid”).on(“cellclick”, function (event) {
var column = event.args.column;
var rowindex = event.args.rowindex;
var columnindex = event.args.columnindex;

//when user wants to edit the record
if (columnindex == 0) {

// open the popup window when the user clicks a button.
editrow = rowindex;
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);
$(“#groupName”).val(dataRecord.groupName);
var rowID = $(‘#jqxgrid’).jqxGrid(‘getrowid’, editrow);
var emailId = “id=” + rowID ;

$.ajax({
url: ‘/settings/selectedgroupnameajax’,
data: emailId ,
type: “POST”,
cache: false,
async: false,
success: function(response)
{
}
});
// show the popup window.
$(“#popupWindow”).jqxWindow(‘show’);

};

// if user click want to delete record
if (columnindex == 4){
if(confirm(‘Are you sure you want to delete this record?’)){
deleterow = rowindex;
var rowID = $(‘#jqxgrid’).jqxGrid(‘getrowid’, deleterow ); // fetch the deleted id
var del = “param=delete&id=” + rowID ;
$.ajax({
url: ‘/settings/deleteemailajax’,
data: del,
type: “POST”,
cache: false,
async: false,
success: function(response)
{
if(response==”success”){
window.location.reload();
}
}
});
};
};
});

//======================================================
// called ajax to save the data on click of “add email”
//=======================================================
$(“#addRecord”).click(function (){
$.ajax({
url: “/settings/addemailajax”,
type: “POST”,
cache: false,
async: false,
data: $(“#addForm”).serialize(),
success: function(response)
{
if(response==”success”){
$(‘#TempForm’).jqxWindow(‘close’);
window.location.reload();
}
}
});
$(“#addForm”).submit( function(){
return false;
});
});
});

//==================================================================
// window open in email group view
//==================================================================
var basicDemo = (function () {
//Adding event listeners
function _addEventListeners() {
$(‘#addrowbutton1’).click(function () {
$(‘#TempForm’).jqxWindow(‘open’); // to open the window onclick of open button
});
$(‘#hideWindowButton’).mousedown(function () {
$(‘#TempForm’).jqxWindow(‘close’); // to close the add window onclick of cancel button
});
$(‘#cancel’).mousedown(function () {
$(‘#popupWindow’).jqxWindow(‘close’); // to close the edit window onclick of cancel button
});
};

//Creating all page elements which are jqxWidgets
function _createElements() {
$(‘#addrowbutton1′).jqxButton({ width: ’70px’ });
};

//Creating the window
function _createWindow() {
$(‘#TempForm’).jqxWindow({
showCollapseButton: true, maxHeight: 260, maxWidth: 750, minHeight:260, minWidth: 650, height: 260, width: 750, autoOpen: false,
initContent: function () {
$(‘#TempForm’).jqxWindow(‘focus’);
}
});
};
return {
config: {
dragArea: null
},
init: function () {
_createElements();
_addEventListeners();
_createWindow();
}
};
} ());

$(document).ready(function () {
//Initializing the demo
basicDemo.init();
});

please let me knoe if ihave miised any parameter or function.

[Peter StoevKeymaster]

Hi pankhi,

Sorry, but I don’t understand your issue, explanation and code. Please, provide more detailed question and at least format your code by using the “code” button when you publish your code.

Best Regards,
Peter Stoev

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

[pankhiParticipant]

$(document).ready(function(){
//===============================
// show the grid for email Group
//===============================
var url = “/settings/manageemailjson”; // action from where we get the result in json
var source =
{
datatype: “json”,
datafields:
[
{ name: ‘Name’, map:”SystemEmailgroupEmail>Name”, type: ‘string’ },
{ name: ‘Email’,map:”SystemEmailgroupEmail>Email”, type: ‘string’ },
{ name: ‘groupName’,map:”SystemEmailgroupGroup>groupName”, type: ‘string’ },
],
updaterow: function (rowid, rowdata, commit) {
// synchronize with the server – send update command
},
id: ‘id’,
url: url,
pagesize: 30,
};
var dataAdapter = new $.jqx.dataAdapter(source);
var editrow = -1;

// initialize jqxGrid
$(“#jqxgrid”).jqxGrid(
{
width:’100%’,
height: 350,
source: dataAdapter,
pageable: true,
autoheight: true,
sortable: true,
altrows: true,
enabletooltips: true,
pagesizeoptions: [’10’, ’20’, ’30’,’40’],
showfilterrow: true,
filterable: true,
showtoolbar: false,

// columns shown in grid are mention below
columns: [
{ text: ”, datafield: ‘Edit’, columntype: ‘number’,filterable: false,width :’5%’, sortable: false ,
cellsrenderer: function () {
return ‘<div style=”width: 100%”></div>’;
}
},
{ text: ‘Name’, datafield: ‘Name’ ,width :’25%’},
{ text: ‘Email’, datafield: ‘Email’ ,width :’35%’ },
{ text: ‘groupName’, datafield: ‘groupName’ ,width :’30%’},
{ text: ”, datafield: ‘Delete’, columntype: ‘number’,filterable: false, sortable: false ,width :’5%’,
cellsrenderer: function () {
return ‘<div></div>’;
}
},
]

});

// initialize the popup window and buttons.
$(“#popupWindow”).jqxWindow({
width: 750, height:260, resizable: false, isModal: true, autoOpen: false, cancelButton: $(“#cancel”), modalOpacity: 0.01
});

// update the edited row when the user clicks the ‘Save’ button.
$(“#Save”).click(function () {

if (editrow >= 0) {

var rowID = $(‘#jqxgrid’).jqxGrid(‘getrowid’, editrow);
alert(rowID);
var row = {
Name: $(“#Name”).val(),
Email: $(“#Email”).val(),
id:rowID,
};
// ajax called to UPDATE the row on edit

$.ajax({
url: ‘/settings/addemailajax’,
data: row,
type: “POST”,
cache: false,
async: false,
success: function(response)
{
if(response==”success”){

}else{
alert(‘Something went wrong please try again.’);
}
},
error: function (response) {
// cancel changes.
alert(‘Something went wrong please try again.’);
}
});

// $(‘#jqxgrid’).jqxGrid(‘updaterow’, rowID, row);
$(“#popupWindow”).jqxWindow(‘hide’);
}
});

// on click of edit and delete
$(“#jqxgrid”).on(“cellclick”, function (event) {
var column = event.args.column;
var rowindex = event.args.rowindex;
var columnindex = event.args.columnindex;

//when user wants to edit the record
if (columnindex == 0) {

// open the popup window when the user clicks a button.
editrow = rowindex;
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);
$(“#groupName”).val(dataRecord.groupName);
var rowID = $(‘#jqxgrid’).jqxGrid(‘getrowid’, editrow);
var emailId = “id=” + rowID ;

$.ajax({
url: ‘/settings/selectedgroupnameajax’,
data: emailId ,
type: “POST”,
cache: false,
async: false,
success: function(response)
{
}
});
// show the popup window.
$(“#popupWindow”).jqxWindow(‘show’);

};

// if user click want to delete record
if (columnindex == 4){
if(confirm(‘Are you sure you want to delete this record?’)){
deleterow = rowindex;
var rowID = $(‘#jqxgrid’).jqxGrid(‘getrowid’, deleterow ); // fetch the deleted id
var del = “param=delete&id=” + rowID ;
$.ajax({
url: ‘/settings/deleteemailajax’,
data: del,
type: “POST”,
cache: false,
async: false,
success: function(response)
{
if(response==”success”){
window.location.reload();
}
}
});
};
};
});

//======================================================
// called ajax to save the data on click of “add email”
//=======================================================
$(“#addRecord”).click(function (){
$.ajax({
url: “/settings/addemailajax”,
type: “POST”,
cache: false,
async: false,
data: $(“#addForm”).serialize(),
success: function(response)
{
if(response==”success”){
$(‘#TempForm’).jqxWindow(‘close’);
window.location.reload();
}
}
});
$(“#addForm”).submit( function(){
return false;
});
});
});

//==================================================================
// window open in email group view
//==================================================================
var basicDemo = (function () {
//Adding event listeners
function _addEventListeners() {
$(‘#addrowbutton1’).click(function () {
$(‘#TempForm’).jqxWindow(‘open’); // to open the window onclick of open button
});
$(‘#hideWindowButton’).mousedown(function () {
$(‘#TempForm’).jqxWindow(‘close’); // to close the add window onclick of cancel button
});
$(‘#cancel’).mousedown(function () {
$(‘#popupWindow’).jqxWindow(‘close’); // to close the edit window onclick of cancel button
});
};

//Creating all page elements which are jqxWidgets
function _createElements() {
$(‘#addrowbutton1′).jqxButton({ width: ’70px’ });
};

//Creating the window
function _createWindow() {
$(‘#TempForm’).jqxWindow({
showCollapseButton: true, maxHeight: 260, maxWidth: 750, minHeight:260, minWidth: 650, height: 260, width: 750, autoOpen: false,
initContent: function () {
$(‘#TempForm’).jqxWindow(‘focus’);
}
});
};
return {
config: {
dragArea: null
},
init: function () {
_createElements();
_addEventListeners();
_createWindow();
}
};
} ());

$(document).ready(function () {
//Initializing the demo
basicDemo.init();
});

To fetch the record from more than 1 table I am using map in datafield like:- [ { name: ‘Email’,map:”SystemEmailgroupEmail>Email”, type: ‘string’ },] and in above code var rowID = $(‘#jqxgrid’).jqxGrid(‘getrowid’, editrow); will return the id of the record we are editing(which comes from database).
but instead it is returning the id of the row (i.e if i edit the first record it is returning “0” instead of “7”).

but if I am fetching the result from one table and remove map from the datafield:- datafields:
[
{ name: ‘Email’, type: ‘string’ },
],
than on alert of rowID it return id “7”

So will you please guide me that if I am fetching record from 2-3 tables than how to get the id of the record?`

[pankhiParticipant]

waiting for reply..

[Author]

Posts