jQuery UI Widgets Forums Grid during edit(popup) functonality I am not getting the (rowaid) id of the record

This topic contains 3 replies, has 2 voices, and was last updated by  pankhi 9 years, 10 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author

  • pankhi
    Participant

    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 Stoev
    Keymaster

    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/


    pankhi
    Participant

    $(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?`

    • This reply was modified 9 years, 10 months ago by  pankhi.
    • This reply was modified 9 years, 10 months ago by  pankhi.

    pankhi
    Participant

    waiting for reply..

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

You must be logged in to reply to this topic.