jQWidgets Forums

jQuery UI Widgets › Forums › Grid › Can't add or edit grid

Tagged: , , , , , , ,

This topic contains 6 replies, has 3 voices, and was last updated by  dippy 10 years, 11 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Can't add or edit grid Posts
  • June 10, 2014 at 4:35 am Can't add or edit grid #55603

    harryb1965
    Participant

    I can’t seem to be able to add a row or update a row in the grid. Can’t for the life of me work out why, although I am new to server side coding.

    I have merged a couple of the demo pages together, so may be missing something.

    Would appreciate any help I can get.

    Here is current code

    <!DOCTYPE html>
    <html lang=”en”>
    <head>
    <title id=’Description’>This example demostrates how we can manipulate data at client side. The Grid plugin provides you callback functions when you add, remove or update a row.
    </title>
    <link rel=”stylesheet” href=”/jqwidgets/styles/jqx.base.css” type=”text/css” />
    <link rel=”stylesheet” href=”/jqwidgets/styles/jqx.darkblue.css” type=”text/css” />
    <link rel=”stylesheet” href=”/jqwidgets/styles/jqx.base.css” type=”text/css” />
    <script type=”text/javascript” src=”/scripts/jquery-2.0.2.min.js”></script>
    <script type=”text/javascript” src=”/jqwidgets/jqxcore.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/jqxwindow.js”></script>
    <script type=”text/javascript” src=”/jqwidgets/jqxgrid.selection.js”></script>
    <script type=”text/javascript” src=”/jqwidgets/jqxgrid.filter.js”></script>
    <script type=”text/javascript” src=”/jqwidgets/jqxgrid.sort.js”></script>
    <script type=”text/javascript” src=”/jqwidgets/jqxdata.js”></script>
    <script type=”text/javascript” src=”/jqwidgets/jqxlistbox.js”></script>
    <script type=”text/javascript” src=”/jqwidgets/jqxgrid.pager.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/jqxcalendar.js”></script>
    <script type=”text/javascript” src=”/jqwidgets/jqxvalidator.js”></script>
    <script type=”text/javascript” src=”/jqwidgets/jqxdatetimeinput.js”></script>
    <script type=”text/javascript” src=”/jqwidgets/jqxmaskedinput.js”></script>
    <script type=”text/javascript” src=”/scripts/demos.js”></script>
    <style type=”text/css”>
    .updaterowbutton
    {
    background: url(/images/settings01.png);
    cursor:pointer;
    border: none;
    }
    </style>
    <script type=”text/javascript”>
    $(document).ready(function () {

    var initialiserow = function () {
    var row = {};

    row[“StudentNo”] = “”;
    row[“GivenName”] = “”;

    return row;
    }
    var url = “/Sail/Menu.php”;
    // prepare the data
    var source =
    {
    datatype: “json”,
    datafields: [
    { name: ‘ID’ },
    { name: ‘Description’ },
    { name: ‘ParentId’ }
    ],
    id: ‘ID’,
    url: url,
    async: false
    };
    var menuAdapter = new $.jqx.dataAdapter(source);

    menuAdapter.dataBind();
    // get the menu items. The first parameter is the item’s id. The second parameter is the parent item’s id. The ‘items’ parameter represents
    // the sub items collection name. Each jqxTree item has a ‘label’ property, but in the JSON data, we have a ‘text’ field. The last parameter
    // specifies the mapping between the ‘text’ and ‘label’ fields.
    var records = menuAdapter.getRecordsHierarchy(‘ID’, ‘ParentId’, ‘items’, [{ name: ‘Description’, map: ‘label’}]);

    $(‘#main_menu’).jqxMenu({ source: records, height: 30, width: ‘400px’ });

    $(“#main_menu”).on(‘itemclick’, function (event) {
    href = event.args.substr(17,12);
    //(href!=undefined)
    //window.open(href, ‘_blank’ );
    console.log(href);
    });

    var url = “/Sail/SourceList.php”;
    // prepare the data
    var source =
    {
    datatype: “json”,
    datafields: [
    { name: ‘ID’ },
    { name: ‘Description’ }
    ],
    url: url,
    async: false
    };
    var sourceAdapter = new $.jqx.dataAdapter(source);

    // Create a jqxDropDownList
    $(“#sourcelist”).jqxDropDownList({
    selectedIndex: 0, source: sourceAdapter, displayMember: “Description”, valueMember: “ID”, width: 200, height: 25
    });
    // subscribe to the select event.
    $(“#sourcelist”).on(‘select’, function (event) {
    if (event.args) {
    var item = event.args.item;
    if (item) {
    var source = item.value;

    }
    }
    });
    $(“#esourcelist”).jqxDropDownList({
    selectedIndex: 0, source: sourceAdapter, displayMember: “Description”, valueMember: “ID”, width: 200, height: 25
    });
    // subscribe to the select event.
    $(“#esourcelist”).on(‘select’, function (event) {
    if (event.args) {
    var item = event.args.item;
    if (item) {
    var esource = item.value;

    }
    }
    });

    var url = “/Sail/AimList.php”;
    // prepare the data
    var source =
    {
    datatype: “json”,
    datafields: [
    { name: ‘ID’ },
    { name: ‘Description’ }
    ],
    url: url,
    async: false
    };
    var aimAdapter = new $.jqx.dataAdapter(source);
    // Create a jqxDropDownList
    $(“#aimlist”).jqxDropDownList({
    selectedIndex: 0, source: aimAdapter, displayMember: “Description”, valueMember: “ID”, width: 200, height: 25
    });
    // subscribe to the select event.
    $(“#aimlist”).on(‘select’, function (event) {
    if (event.args) {
    var item = event.args.item;
    if (item) {
    var aim_Id = item.value;

    }
    }
    });
    $(“#eaimlist”).jqxDropDownList({
    selectedIndex: 0, source: aimAdapter, displayMember: “Description”, valueMember: “ID”, width: 200, height: 25
    });
    // subscribe to the select event.
    $(“#eaimlist”).on(‘select’, function (event) {
    if (event.args) {
    var item = event.args.item;
    if (item) {
    var eaim = item.value;

    }
    }
    });

    var url = “/Sail/SalespersonList.php”;
    // prepare the data
    var source =
    {
    datatype: “json”,
    datafields: [
    { name: ‘ID’ },
    { name: ‘Name’ }
    ],
    url: url,
    async: false
    };
    var salesAdapter = new $.jqx.dataAdapter(source);
    // Create a jqxDropDownList
    $(“#salespersonlist”).jqxDropDownList({
    selectedIndex: 0, source: salesAdapter, displayMember: “Name”, valueMember: “ID”, width: 200, height: 25
    });
    // subscribe to the select event.
    $(“#salespersonlist”).on(‘select’, function (event) {
    if (event.args) {
    var item = event.args.item;
    if (item) {
    var salesperson_Id = item.value;

    }
    }
    });
    $(“#esalespersonlist”).jqxDropDownList({
    selectedIndex: 0, source: salesAdapter, displayMember: “Name”, valueMember: “ID”, width: 200, height: 25
    });
    // subscribe to the select event.
    $(“#esalespersonlist”).on(‘select’, function (event) {
    if (event.args) {
    var item = event.args.item;
    if (item) {
    var eSalesperson_Id = item.value;

    }
    }
    });

    var source =
    {
    datatype: “json”,
    datafields: [
    { name: ‘StudentNo’, type: ‘int’},
    { name: ‘GivenName’, type: ‘string’},
    { name: ‘Surname’, type: ‘string’ },
    { name: ‘Address’, type: ‘string’ },
    { name: ‘PostCode’, type: ‘string’ },
    { name: ‘Email’, type: ‘string’ },
    { name: ‘WorkPhone’, type: ‘string’ },
    { name: ‘MobilePhone’, type: ‘string’ },
    { name: ‘Occupation’, type: ‘string’ },
    { name: ‘Referrer’, type: ‘string’ },
    { name: ‘Aim’, type: ‘string’ },
    { name: ‘Source’, type: ‘string’ },
    { name: ‘Salesperson’, type: ‘string’ },
    { name: ‘Experience’, type: ‘string’ },
    { name: ‘Balance’, type: ‘number’},
    { name: ‘DOB’, type: “date”}
    ],
    ID: ‘StudentNo’,
    root: ‘Rows’,
    url: ‘/Sail/StudentList.php’,
    cache: false,
    beforeprocessing: function(data)
    {
    source.totalrecords = data[0].TotalRows;
    },
    addrow: function (rowid, rowdata, position, commit) {
    addRecord = {};
    addRecord[‘StudentNo’] = 99999;
    addRecord[‘GivenName’] = document.getElementById(“GivenNameInput”).value.toUpperCase();
    addRecord[‘Surname’] = document.getElementById(“SurnameInput”).value.toUpperCase();
    addRecord[‘Address’] = document.getElementById(“AddressInput”).value.toUpperCase();
    addRecord[‘PostCode’] = document.getElementById(“postcodeInput”).value.toUpperCase();
    addRecord[‘DOB’] = document.getElementById(“birthInput”).value;
    addRecord[‘Email’] = document.getElementById(“emailInput”).value.toUpperCase();
    addRecord[‘MobilePhone’] = document.getElementById(“MobilephoneInput”).value;
    addRecord[‘HomePhone’] = document.getElementById(“HomephoneInput”).value;
    addRecord[‘WorkPhone’] = document.getElementById(“WorkphoneInput”).value;
    addRecord[‘Referrer’] = document.getElementById(“Referrer”).value;
    addRecord[‘Experience’] = document.getElementById(“Experience”).value;
    addRecord[‘Occupation’] = document.getElementById(“Occupation”).value;
    addRecord[‘Salesperson’] = $(“#salespersonlist”).jqxDropDownList(‘getSelectedItem’);
    addRecord[‘Source’] = $(“#sourcelist”).jqxDropDownList(‘getSelectedItem’);
    addRecord[‘Aim’] = $(“#aimlist”).jqxDropDownList(‘getSelectedItem’);

    $.ajax({
    type: “POST”,
    url: “/Sail/StudentUpdate.php”,
    data: { type: “ADD”, GivenName: addRecord[“GivenName”],
    Surname: addRecord[‘Surname’], Address: addRecord[“Address”] ,
    PostCode: addRecord[‘PostCode’], Email: addRecord[‘Email’],
    Mobilephone: addRecord[‘Mobilephone’], Homephone: addRecord[“Homephone”],
    Workphone: addRecord[‘Workphone’], Occupation: addRecord[“Occupation”],
    Referrer: addRecord[‘Referrer’], Source: addRecord[“Source”],
    Aim: addRecord[‘Aim’], Experience: addRecord[“Experience”],
    Salesperson: addRecord[“Salesperson”], DOB: addRecord[“DOB”]},
    dataType:’JSON’,
    success: function(response) {
    console.log(“Add Record = ” + addRecord);
    var id = $(“#jqxgrid”).jqxGrid(‘getrowid’, selectedrowindex);
    var dataRecord = $(“#jqxgrid”).jqxGrid(‘getrowdata’, selectedrowindex);
    var add_commit = $(‘#jqxgrid’).jqxGrid(‘updaterow’,id , addRecord);
    console.log(“Add Commit = ” + add_commit);

    $(‘#jqxgrid’).jqxGrid(‘sortby’, ‘StudentNo’, ‘asc’);
    $(‘#jqxgrid’).jqxGrid(‘refresh’);
    $(‘#jqxgrid’).jqxGrid({ selectedrowindex: 0});
    commit(true);
    }

    });

    },
    deleterow: function (rowid, commit) {
    var id = $(“#jqxgrid”).jqxGrid(‘getrowid’, selectedrowindex);
    var dataRecord = $(“#jqxgrid”).jqxGrid(‘getrowdata’, selectedrowindex);
    console.log(dataRecord);

    $.ajax({
    type: “POST”,
    url: “/Sail/AimList.php”,
    data: { type: “DEL”, ID: val(dataRecord.ID), Aim_Desc: val(dataRecord.Description) },
    dataType:’JSON’,
    success: function(response){
    commit(true);
    },
    error: function(response){
    alert(response.statusMessage);
    }
    });

    },
    updaterow: function (rowid, newdata, commit) {
    var selectedrowindex = $(“#jqxgrid”).jqxGrid(‘getselectedrowindex’);
    var dataRecord = $(“#jqxgrid”).jqxGrid(‘getrowdata’, rowid);

    var eSource_Id = $(“#esourcelist”).jqxDropDownList(‘getSelectedItem’);
    dataRecord[“Source”] = eSalesperson_Id.value;
    var eAim_Id = $(“#eaimlist”).jqxDropDownList(‘getSelectedItem’);
    dataRecord[“Aim”] = eAim_Id.value;
    var eSalesperson_Id = $(“#esalespersonlist”).jqxDropDownList(‘getSelectedItem’);
    dataRecord[“SalesPerson”] = eSalesperson_Id.value;
    console.log(dataRecord);
    $.ajax({
    type: “POST”,
    url: “/Sail/StudentUpdate.php”,
    data: { type: “UPD”, StudentNo: dataRecord[‘StudentNo’], GivenName: dataRecord[“GivenName”],
    Surname: dataRecord[‘Surname’], Address: dataRecord[“Address”] ,
    PostCode: dataRecord[‘PostCode’], Email: dataRecord[‘Email’],
    Mobilephone: dataRecord[‘Mobilephone’], Homephone: dataRecord[“Homephone”],
    Workphone: dataRecord[‘Workphone’], Occupation: dataRecord[“Occupation”],
    Referrer: dataRecord[‘Referrer’], Source: dataRecord[“Source”],
    Aim: dataRecord[“Aim”], Experience: dataRecord[“Experience”],
    Salesperson: dataRecord[“SalesPerson”], DOB: dataRecord[“DOB”]},
    dataType:’JSON’,
    success: function(response){
    console.log(“Success”);
    commit(true);
    },
    error: function(response){
    alert(response.statusMessage);
    }
    });
    },
    filter: function()
    {
    // update the grid and send a request to the server.
    $(“#jqxgrid”).jqxGrid(‘updatebounddata’, ‘filter’);
    },
    sort: function()
    {
    // update the grid and send a request to the server.
    $(“#jqxgrid”).jqxGrid(‘updatebounddata’, ‘sort’);
    },
    root: ‘Rows’,
    beforeprocessing: function(data)
    {
    if (data != null)
    {
    source.totalrecords = data[0].TotalRows;
    }
    }
    };
    var studentadapter = new $.jqx.dataAdapter(source, {
    loadError: function(xhr, status, error)
    {
    alert(error);
    }
    }
    );

    // initialize the input fields.

    $(“#HomephoneInput”).jqxMaskedInput({ mask: ‘(###)###-####’, width: 150, height: 22});
    $(“#WorkphoneInput”).jqxMaskedInput({ mask: ‘(###)###-####’, width: 150, height: 22});
    $(“#MobilephoneInput”).jqxMaskedInput({ mask: ‘(###)###-####’, width: 150, height: 22});
    $(‘.text-input’).addClass(‘jqx-input’);
    $(‘.text-input’).addClass(‘jqx-rc-all’);
    if (theme.length > 0) {
    $(‘.text-input’).addClass(‘jqx-input-‘ + theme);
    $(‘.text-input’).addClass(‘jqx-widget-content-‘ + theme);
    $(‘.text-input’).addClass(‘jqx-rc-all-‘ + theme);
    }
    var date = new Date();
    date.setFullYear(1985, 0, 1);
    $(‘#birthInput’).jqxDateTimeInput({ width: 150, height: 22, value: $.jqx._jqxDateTimeInput.getDateTime(date) });
    $(‘#birthInput’).jqxDateTimeInput(‘setMinDate’, new Date(1920, 0, 1));
    $(‘#ebirthInput’).jqxDateTimeInput({ width: 150, height: 22, value: $.jqx._jqxDateTimeInput.getDateTime(date) });
    $(‘#ebirthInput’).jqxDateTimeInput(‘setMinDate’, new Date(1920, 0, 1));
    // initialize validator.
    $(‘#add-form-ajax’).jqxValidator({
    rules: [
    { input: ‘#GivenNameInput’, message: ‘Given Name is required!’, action: ‘keyup, blur’, rule: ‘required’ },
    { input: ‘#GivenNameInput’, message: ‘Your Given Name must contain only letters!’, action: ‘keyup’, rule: ‘notNumber’ },
    { input: ‘#GivenNameInput’, message: ‘Your Given Name must be between 3 and 12 characters!’, action: ‘keyup’, rule: ‘length=3,12’ },
    { input: ‘#SurnameInput’, message: ‘Surname is required!’, action: ‘keyup, blur’, rule: ‘required’ },
    { input: ‘#SurnameInput’, message: ‘Your Surname must contain only letters!’, action: ‘keyup’, rule: ‘notNumber’ },
    { input: ‘#SurnameInput’, message: ‘Your Surname must be between 3 and 12 characters!’, action: ‘keyup’, rule: ‘length=3,12’ },
    { input: ‘#postcodeInput’, message: ‘Invalid Post Code!’, action: ‘valuechanged, blur’, rule: ‘length=4,4’ },
    { input: ‘#postcodeInput’, message: ‘Post Code is required!’, action: ‘keyup, blur’, rule: ‘required’ },
    { input: ‘#emailInput’, message: ‘E-mail is required!’, action: ‘keyup, blur’, rule: ‘required’ },
    { input: ‘#emailInput’, message: ‘Invalid e-mail!’, action: ‘keyup’, rule: ’email’ },
    { input: ‘#WorkphoneInput’, message: ‘Invalid Work phone number!’, action: ‘keyup, blur’, rule: ‘phone’ },
    { input: ‘#HomephoneInput’, message: ‘Invalid Home phone number!’, action: ‘keyup, blur’, rule: ‘phone’ },
    { input: ‘#MobilephoneInput’, message: ‘Invalid Mobile phone number!’, action: ‘keyup, blur’, rule: ‘phone’ }
    ]
    });
    // initialize validator.
    $(‘#edit-form-ajax’).jqxValidator({
    rules: [
    { input: ‘#eGivenNameInput’, message: ‘Given Name is required!’, action: ‘keyup, blur’, rule: ‘required’ },
    { input: ‘#eGivenNameInput’, message: ‘Your Given Name must contain only letters!’, action: ‘keyup’, rule: ‘notNumber’ },
    { input: ‘#eGivenNameInput’, message: ‘Your Given Name must be between 3 and 12 characters!’, action: ‘keyup’, rule: ‘length=3,12’ },
    { input: ‘#eSurnameInput’, message: ‘Surname is required!’, action: ‘keyup, blur’, rule: ‘required’ },
    { input: ‘#eSurnameInput’, message: ‘Your Surname must contain only letters!’, action: ‘keyup’, rule: ‘notNumber’ },
    { input: ‘#eSurnameInput’, message: ‘Your Surname must be between 3 and 12 characters!’, action: ‘keyup’, rule: ‘length=3,12’ },
    { input: ‘#epostcodeInput’, message: ‘Invalid Post Code!’, action: ‘valuechanged, blur’, rule: ‘length=4,4’ },
    { input: ‘#epostcodeInput’, message: ‘Post Code is required!’, action: ‘keyup, blur’, rule: ‘required’ },
    { input: ‘#eemailInput’, message: ‘E-mail is required!’, action: ‘keyup, blur’, rule: ‘required’ },
    { input: ‘#eemailInput’, message: ‘Invalid e-mail!’, action: ‘keyup’, rule: ’email’ },
    { input: ‘#eWorkphoneInput’, message: ‘Invalid Work phone number!’, action: ‘keyup, blur’, rule: ‘phone’ },
    { input: ‘#eHomephoneInput’, message: ‘Invalid Home phone number!’, action: ‘keyup, blur’, rule: ‘phone’ },
    { input: ‘#eMobilephoneInput’, message: ‘Invalid Mobile phone number!’, action: ‘keyup, blur’, rule: ‘phone’ }
    ]
    });

    var editrow = -1;

    // initialize jqxGrid
    $(“#jqxgrid”).jqxGrid(
    {
    width: 1100,
    height: 350,
    source: studentadapter,
    sortable: true,
    pageable: true,
    pagesize: 10,
    pagermode: ‘default’,
    autoheight: true,
    showtoolbar: true,
    virtualmode: true,
    rendergridrows: function()
    {
    return studentadapter.records;
    },
    rendertoolbar: function (toolbar) {
    var me = this;
    var container = $(“<div style=’margin: 5px;’></div>”);
    toolbar.append(container);
    container.append(‘<input id=”addrowbutton” type=”button” value=”Add Student” />’);
    container.append(‘<input style=”margin-left: 5px;” id=”deleterowbutton” type=”button” value=”Delete Student” />’);
    container.append(‘<input style=”margin-left: 5px;” id=”updaterowbutton” type=”button” value=”Update Student” />’);
    $(“#addrowbutton”).jqxButton();
    $(“#deleterowbutton”).jqxButton();
    $(“#updaterowbutton”).jqxButton();
    // update row.
    $(“#updaterowbutton”).on(‘click’, function () {
    var selectedrowindex = $(“#jqxgrid”).jqxGrid(‘getselectedrowindex’);
    var rowscount = $(“#jqxgrid”).jqxGrid(‘getdatainformation’).rowscount;
    if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
    var id = $(“#jqxgrid”).jqxGrid(‘getrowid’, selectedrowindex);
    var dataRecord = $(“#jqxgrid”).jqxGrid(‘getrowdata’, selectedrowindex);

    $(“#eGivenNameInput”).val(dataRecord.GivenName);
    $(“#eSurnameInput”).val(dataRecord.Surname);
    $(“#eAddressInput”).val(dataRecord.Address);
    $(“#epostcodeInput”).val(dataRecord.PostCode);
    $(“#eemailInput”).val(dataRecord.Email);
    $(“#eMobilephoneInput”).val(dataRecord.Mobilephone);
    $(“#eHomephoneInput”).val(dataRecord.Homephone);
    $(“#eWorkphoneInput”).val(dataRecord.Workphone);
    $(“#eExperience”).val(dataRecord.Experience);
    $(“#eReferrer”).val(dataRecord.Referrer);
    $(“#ebirthInput”).val(dataRecord.DOB);
    $(“#eOccupation”).val(dataRecord.Occupation);

    if (dataRecord.Aim) {
    $(“#eaimlist”).jqxDropDownList(‘selectItem’, dataRecord.Aim);
    }
    else {
    $(“#eaimlist”).jqxDropDownList({selectedIndex: 0 });
    }
    if (dataRecord.Source) {
    $(“#esourcelist”).jqxDropDownList(‘selectItem’, dataRecord.Source);
    }
    else {
    $(“#esourcelist”).jqxDropDownList({selectedIndex: 0 });
    }
    if (dataRecord.Salesperson) {
    $(“#esalespersonlist”).jqxDropDownList(‘selectItem’, dataRecord.Salesperson);
    }
    else {
    $(“#esalespersonlist”).jqxDropDownList({selectedIndex: 0 });
    }

    // open the popup window when the user clicks a button.
    var offset = $(“#jqxgrid”).offset();
    $(“#editpopupWindow”).jqxWindow({ position: { x: parseInt(offset.left) + 100, y: parseInt(offset.top) + 100 } });
    // get the clicked rows data and initialize the input fields.

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

    $(“#jqxgrid”).jqxGrid(‘ensurerowvisible’, selectedrowindex);
    }
    });
    // create new row.
    $(“#addrowbutton”).on(‘click’, function () {
    // open the popup window when the user clicks a button.
    var datarow = initialiserow();

    var offset = $(“#jqxgrid”).offset();
    $(“#addpopupWindow”).jqxWindow({ position: { x: parseInt(offset.left) + 60, y: parseInt(offset.top) + 60 } });
    // get the clicked rows data and initialize the input fields.

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

    });
    // delete row.
    $(“#deleterowbutton”).on(‘click’, function () {
    var selectedrowindex = $(“#jqxgrid”).jqxGrid(‘getselectedrowindex’);
    var rowscount = $(“#jqxgrid”).jqxGrid(‘getdatainformation’).rowscount;
    console.log(selectedrowindex);
    if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
    var id = $(“#jqxgrid”).jqxGrid(‘getrowid’, selectedrowindex);
    console.log(id);
    var commit = $(“#jqxgrid”).jqxGrid(‘deleterow’, id);
    console.log(commit);
    }
    });
    },
    columns: [
    { text: ‘No:’, datafield: ‘StudentNo’, width: 50 },
    { text: ‘Given Name’, datafield: ‘GivenName’, width: 150 },
    { text: ‘Surname’, datafield: ‘Surname’, width: 150 },
    { text: ‘Balance’, datafield: ‘Balance’, width: 80, cellsalign: ‘right’ },
    { text: ‘Address’, datafield: ‘Address’, width: 150 , filterable: false},
    { text: ‘Post Code’, datafield: ‘PostCode’, width: 150 },
    { text: ‘Email’, datafield: ‘Email’, width: 150 },
    { text: ‘Mobile’, datafield: ‘MobilePhone’, width: 100 },
    { text: ‘Work’, datafield: ‘WorkPhone’, width: 100 },
    { text: ‘Home’, datafield: ‘HomePhone’, width: 100 },
    { text: ‘DOB’, datafield: ‘DOB’, width: 100 , cellsformat: ‘dd-MMMM-yy’, filterable: false},
    { text: ‘Occupation’, datafield: ‘Occupation’, width: 100 },
    { text: ‘Experience’, datafield: ‘Experience’, width: 100 },
    { text: ‘Source’, datafield: ‘Source’, width: 100 },
    { text: ‘Aim’, datafield: ‘Aim’, width: 100 },
    { text: ‘Salesperson’, datafield: ‘Salesperson’, width: 100 },
    { text: ‘Referrer’, datafield: ‘Referrer’, width: 100 }
    ]
    });

    // initialize the popup window and buttons.
    $(“#addpopupWindow”).jqxWindow({
    width: 800, resizable: false, isModal: true, autoOpen: false, modalOpacity: 0.01
    });
    // initialize the popup window and buttons.
    $(“#editpopupWindow”).jqxWindow({
    width: 800, resizable: false, isModal: true, autoOpen: false, modalOpacity: 0.01
    });

    $(“#addSave”).jqxButton({ theme: theme });
    $(“#editSave”).jqxButton({ theme: theme });
    // update the edited row when the user clicks the ‘Save’ button.
    $(“#addSave”).click(function () {
    $.ajax({
    type: “POST”,
    url: “/Sail/StudentUpdate.php”,
    data: { type: “VAL”, GivenName: document.getElementById(“GivenNameInput”).value, Surname: document.getElementById(“SurnameInput”).value,
    Address: document.getElementById(“AddressInput”).value, PostCode: document.getElementById(“postcodeInput”).value,
    Email: document.getElementById(“emailInput”).value, DOB: document.getElementById(“birthInput”).value,
    Mobilephone: document.getElementById(“MobilephoneInput”).value, Workphone: document.getElementById(“WorkphoneInput”).value,
    Homephone: document.getElementById(“HomephoneInput”).value,
    Experience: document.getElementById(“Experience”).value,
    Referrer: document.getElementById(“Referrer”).value},
    dataType:’JSON’,
    success: function(response){
    if (response.success == true) {
    var value = $(“#jqxgrid”).jqxGrid(“addrow”, null, {});
    console.log(“Value = ” + value);
    }
    if (response.success == false) {
    alert(response.statusMessage);
    }
    }
    });

    $(‘#add-form-ajax’).jqxValidator(‘hide’);
    $(“#addpopupWindow”).jqxWindow(‘hide’);
    });
    $(“#editSave”).click(function () {

    var selectedrowindex = $(“#jqxgrid”).jqxGrid(‘getselectedrowindex’);
    var dataRecord = $(“#jqxgrid”).jqxGrid(‘getrowdata’, selectedrowindex);

    dataRecord[‘GivenName’] = document.getElementById(“eGivenNameInput”).value.toUpperCase();
    dataRecord[‘Surname’] = document.getElementById(“eSurnameInput”).value.toUpperCase();

    dataRecord[‘Address’] = document.getElementById(“eAddressInput”).value.toUpperCase();
    dataRecord[‘PostCode’] = document.getElementById(“epostcodeInput”).value;

    dataRecord[‘MobilePhone’] = document.getElementById(“eMobilephoneInput”).value;
    dataRecord[‘HomePhone’] = document.getElementById(“eHomephoneInput”).value;
    dataRecord[‘WorkPhone’] = document.getElementById(“eWorkphoneInput”).value;
    dataRecord[‘Email’] = document.getElementById(“eemailInput”).value.toUpperCase();
    dataRecord[‘Referrer’] = document.getElementById(“eReferrer”).value.toUpperCase();
    dataRecord[‘Occupation’] = document.getElementById(“eOccupation”).value.toUpperCase();
    dataRecord[‘Experience’] = document.getElementById(“eExperience”).value.toUpperCase();

    dataRecord[‘DOB’] = document.getElementById(“ebirthInput”).value;
    item = $(“#esourcelist”).jqxDropDownList(‘getSelectedItem’);
    dataRecord[‘Source’] = item.label;
    item = $(“#eaimlist”).jqxDropDownList(‘getSelectedItem’);
    dataRecord[‘Aim’] = item.label;
    item = $(“#esalespersonlist”).jqxDropDownList(‘getSelectedItem’);
    dataRecord[‘Salesperson’] = item.label;

    var id = $(“#jqxgrid”).jqxGrid(‘getrowid’, selectedrowindex);

    console.log(dataRecord);
    var commit = $(“#jqxgrid”).jqxGrid(“updaterow”, 3, dataRecord);
    console.log(commit);

    $(‘#edit-form-ajax’).jqxValidator(‘hide’);
    $(“#editpopupWindow”).jqxWindow(‘hide’);
    });
    });
    </script>
    </head>
    <body class=’default’>

    <div id=”container” style=”width:500px”>

    <div id=”header” style=”background-color:#FFA500;”>
    <h1 style=”margin-bottom:0;”>Sailing School System</h1></div>

    <div id=”main_menu” style=”background-color:#FFD700;height:200px;width:800px;float:left;”></div>

    <div id=”content” style=”height:600px;width:900px;float:left;”>
    <div id=”jqxgrid”></div>
    <div id=”addpopupWindow”>
    <div >Add Student</div>
    <div style=”overflow: hidden;”>
    <form class=”form” id=”add-form-ajax” target=”aform-iframe” method=”post” action=”/Sail/StudentUpdate.php?type=Add” style=”font-size: 12px; font-family: Verdana; width: 650px;”>
    <table>
    <tr>
    <td>Given Name:</td>
    <td><input name=”GivenName” type=”text” id=”GivenNameInput” class=”text-input” size=”30″ /></td>
    </tr>
    <tr>
    <td>Surname:</td>
    <td><input name=”Surname” type=”text” id=”SurnameInput” class=”text-input” size=”30″/></td>
    </tr>
    <tr>
    <td>Address:</td>
    <td colspan=”2″><textarea name=”Address” cols=”50″ rows=”5″ id=”AddressInput”></textarea></td>
    </tr>
    <tr>
    <td>Post Code:</td>
    <td><input name=”PostCode” id=”postcodeInput” class=”text-input” size=”4″/></td>
    </tr>
    <tr>
    <td>Birth date:</td>
    <td><div name=”DOB” id=”birthInput”></div></td>
    </tr>
    <tr>
    <td>E-mail:</td>
    <td><input name=”Email” type=”text” id=”emailInput” class=”text-input” size=”50″/></td>
    </tr>
    <tr>
    <td>Phone (W):</td>
    <td><input name=”Workphone” id=”WorkphoneInput” class=”text-input” /></td>
    </tr>
    <tr>
    <td>Phone (H):</td>
    <td><input name=”Homephone” id=”HomephoneInput” class=”text-input” /></td>
    </tr>
    <tr>
    <td>Phone (M):</td>
    <td><input name=”Mobilephone” id=”MobilephoneInput” class=”text-input” /></td>
    </tr>

    <tr>
    <td>Occupation:</td>
    <td><input name=”Occupation” id=”Occupation” class=”text-input” size=”50″/></td>
    </tr>
    <tr>
    <td>Source:</td>
    <td><div name=”Source” id=”sourcelist”></div></td>
    </tr>
    <tr>
    <td>Aim:</td>
    <td><div name=”Aim” id=”aimlist”></div></td>
    </tr>
    <tr>
    <td>Experience:</td>
    <td><input name=”Experience” id=”Experience” class=”text-input” size=”50″ /></td>
    </tr>
    <tr>
    <td>Referred By:</td>
    <td><input name=”Referrer” id=”Referrer” type=”text” class=”text-input” /></td>
    </tr>
    <tr>
    <td>Salesperson:</td>
    <td><div name=”Salesperson” id=”salespersonlist”></div></td>
    </tr>
    <tr>
    <td style=”padding-top: 10px;” align=”right”><input style=”margin-right: 5px;” type=”button” id=”addSave” value=”Save” /></td>
    </tr>
    </table>
    </form>
    <iframe id=”aform-iframe” name=”aform-iframe” class=”demo-iframe” frameborder=”0″></iframe>
    </div>

    </div>

    <div id=”editpopupWindow”>
    <div>Edit Student</div>
    <div style=”overflow: hidden;”>
    <form class=”form” id=”edit-form-ajax” target=”eform-iframe” method=”post” action=”/Sail/StudentUpdate.php?type=Edit” style=”font-size: 12px; font-family: Verdana; width: 650px;”>
    <table>
    <tr>
    <td>Given Name:</td>
    <td><input name=”eGivenName” type=”text” id=”eGivenNameInput” class=”text-input” size=”30″ /></td>
    </tr>
    <tr>
    <td>Surname:</td>
    <td><input name=”eSurname” type=”text” id=”eSurnameInput” class=”text-input” size=”30″/></td>
    </tr>
    <tr>
    <td>Address:</td>
    <td colspan=”2″><textarea name=”eAddress” cols=”50″ rows=”5″ id=”eAddressInput”></textarea></td>
    </tr>
    <tr>
    <td>Post Code:</td>
    <td><input name=”ePostCode” id=”epostcodeInput” class=”text-input” size=”4″/></td>
    </tr>
    <tr>
    <td>Birth date:</td>
    <td><div name=”eDOB” id=”ebirthInput”></div></td>
    </tr>
    <tr>
    <td>E-mail:</td>
    <td><input name=”eEmail” type=”text” id=”eemailInput” class=”text-input” size=”50″/></td>
    </tr>
    <tr>
    <td>Phone (W):</td>
    <td><input name=”eWorkphone” id=”eWorkphoneInput” class=”text-input” /></td>
    </tr>
    <tr>
    <td>Phone (H):</td>
    <td><input name=”eHomephone” id=”eHomephoneInput” class=”text-input” /></td>
    </tr>
    <tr>
    <td>Phone (M):</td>
    <td><input name=”eMobilephone” id=”eMobilephoneInput” class=”text-input” /></td>
    </tr>

    <tr>
    <td>Occupation:</td>
    <td><input name=”eOccupation” id=”eOccupation” class=”text-input” size=”50″/></td>
    </tr>
    <tr>
    <td>Source:</td>
    <td><div name=”eSource” id=”esourcelist”></div></td>
    </tr>
    <tr>
    <td>Aim:</td>
    <td><div name=”eAim” id=”eaimlist”></div></td>
    </tr>
    <tr>
    <td>Experience:</td>
    <td><input name=”eExperience” id=”eExperience” class=”text-input” size=”50″/></td>
    </tr>
    <tr>
    <td>Referred By:</td>
    <td><input name=”eReferrer” id=”eReferrer” type=”text” class=”text-input” size=”50″/></td>
    </tr>
    <tr>
    <td>Salesperson:</td>
    <td><div name=”eSalesperson” id=”esalespersonlist”></div></td>
    </tr>
    <tr>
    <td style=”padding-top: 10px;” align=”right”><input style=”margin-right: 5px;” type=”button” id=”editSave” value=”Save” /></td>
    </tr>
    </table>
    </form>
    <iframe id=”eform-iframe” name=”eform-iframe” class=”demo-iframe” frameborder=”0″></iframe>
    </div>
    </div>
    </div>

    <div id=”footer” style=”background-color:#FFA500;clear:both;text-align:center;”>
    Copyright © W3Schools.com</div>

    </div>

    </body>
    </html>

    June 10, 2014 at 4:56 am Can't add or edit grid #55605

    Dimitar
    Participant

    Hello harryb1965,

    You would have to add a reference to the file jqxgrid.edit.js and set the grid’s editable property to true. You can read more about editing in the Grid Cells Editing guide.

    Best Regards,
    Dimitar

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

    June 11, 2014 at 2:53 am Can't add or edit grid #55671

    harryb1965
    Participant

    I tried this previously but to no avail. The commit still fails on the addrow or editrow calls.

    June 11, 2014 at 5:08 am Can't add or edit grid #55680

    Dimitar
    Participant

    Hi harryb1965,

    Please re-post your code and format it by selecting it and clicking on the code button in the toolbar. Also could you clarify your scenario? As far as I understand it, you are adding a blank row to the grid on the click of the addSave button. This invokes the addrow source callback function, which adds a new record to your server based on data from several inputs. Is this the intended functionality?

    Best Regards,
    Dimitar

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

    June 11, 2014 at 7:26 am Can't add or edit grid #55696

    harryb1965
    Participant

    Yes. After coding another page, I think I am getting the hang of it. Let me go through this again tonight and come back to you with either a resolved solution or update of the code.

    Thanks for your time and help so far.

    June 11, 2014 at 12:42 pm Can't add or edit grid #55727

    harryb1965
    Participant

    Dimitar,

    All good. I have got the hang of how everything flows now and all working fine.

    Thanks again.

    June 17, 2014 at 8:10 pm Can't add or edit grid #55992

    dippy
    Participant

    Hi Harryb1965.

    Can you post the final code. Also how are you updating the database with new values thru grid.

    please post

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.