jQuery UI Widgets Forums Grid Data missing after adding code

This topic contains 1 reply, has 2 voices, and was last updated by  Peter Stoev 10 years, 10 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • Data missing after adding code #2858

    rondc
    Member

    I am using your example for Building CRUD Web App with jqxGrid. Everything seem to work fine up to the point when I add the code for the button click events. Once I add this code, then run the script nothing is displayed. But if I remove this code the data shows in the grid just fine. Here’s my code:

    $(document).ready(function () {
    // prepare the data
    var theme = ‘classic’;

    var source =
    {
    datatype: “json”,
    datafields: [
    { name: ‘ID’},
    { name: ‘Student Name’},
    { name: ‘ACT-SAT’},
    { name: ‘GPA’},
    { name: ‘TRANSFER GPA’},
    { name: ‘BIOL100’},
    { name: ‘MATH101-111’},
    { name: ‘HPED’},
    { name: ‘UNST110’},
    { name: ‘NURS100’},
    { name: ‘UNST120’},
    { name: ‘UNST130’},
    { name: ‘CHEM104’},
    { name: ‘UNST140’},
    { name: ‘CHEM114’},
    { name: ‘FCS310’},
    { name: ‘STATISTICS’},
    { name: ‘BIOL220’},
    { name: ‘BIOL361’},
    { name: ‘PSYC320’},
    { name: ‘UNST Elective 1’},
    { name: ‘UNST Elective 2’},
    { name: ‘NURS300’},
    { name: ‘NURS310’},
    { name: ‘NURS320’},
    { name: ‘NURS350’},
    { name: ‘NURS351’},
    { name: ‘FCS337’},
    { name: ‘NURS414’},
    { name: ‘NURS400’},
    { name: ‘PSYC434’},
    { name: ‘NURS405’},
    { name: ‘UNST CLUSTER 1’},
    { name: ‘UNST CLUSTER 2’},
    { name: ‘NURS412’},
    { name: ‘NURS416’},
    { name: ‘NURS418’},
    { name: ‘NURS500’},
    { name: ‘NURS510’},
    { name: ‘NURS513’},
    { name: ‘NURS514’},
    { name: ‘NURS518’},
    { name: ‘NURS520’},
    { name: ‘NURS524’},
    ],
    id: ‘ID’,
    url: ‘data.php’,
    addrow: function (rowid, rowdata) {
    // synchronize with the server – send insert command
    var data = “insert=true&” + $.param(rowdata);
    $.ajax({
    dataType: ‘json’,
    url: ‘data.php’,
    data: data,
    success: function (data, status, xhr) {
    // insert command is executed.
    }
    });
    },
    deleterow: function (rowid) {
    // synchronize with the server – send delete command
    var data = “delete=true&ID=” + rowid;
    $.ajax({
    dataType: ‘json’,
    url: ‘data.php’,
    data: data,
    success: function (data, status, xhr) {
    // delete command is executed.
    }
    });
    },
    updaterow: function (rowid, rowdata) {
    // synchronize with the server – send update command
    var data = “update=true&” + $.param(rowdata);
    $.ajax({
    dataType: ‘json’,
    url: ‘data.php’,
    data: data,
    success: function (data, status, xhr) {
    // update command is executed.
    }
    });
    },
    root: ‘Rows’,
    beforeprocessing: function(data)
    {
    source.totalrecords = data[0].TotalRows;
    }
    };

    var dataadapter = new $.jqx.dataAdapter(source);

    // initialize jqxGrid
    $(“#jqxgrid”).jqxGrid(
    {
    width: 2200,
    source: dataadapter,
    theme: theme,
    autoheight: true,
    pageable: true,
    pagesize: 25,
    virtualmode: true,
    editable: true,
    selectionmode: ‘singlerow’,
    rendergridrows: function()
    {
    return dataadapter.records;
    },
    columns: [
    { text: ‘Student Name’, datafield: ‘Student Name’, width: 250 },
    { text: ‘ACT-SAT’, datafield: ‘ACT-SAT’, width: 50 },
    { text: ‘GPA’, datafield: ‘GPA’, width: 50 },
    { text: ‘TRANSFER GPA’, datafield: ‘TRANSFER GPA’, width: 110 },
    { text: ‘BIOL100’, datafield: ‘BIOL100’, width: 62 },
    { text: ‘MATH101-111’, datafield: ‘MATH101-111’, width: 100 },
    { text: ‘HPED’, datafield: ‘HPED’, width: 75 },
    { text: ‘UNST110’, datafield: ‘UNST110’, width: 65 },
    { text: ‘NURS100’, datafield: ‘NURS100’, width: 65 },
    { text: ‘UNST120’, datafield: ‘UNST120’, width: 65 },
    { text: ‘UNST130’, datafield: ‘UNST130’, width: 65 },
    { text: ‘CHEM104’, datafield: ‘CHEM104’, width: 65 },
    { text: ‘UNST140’, datafield: ‘UNST140’, width: 65 },
    { text: ‘CHEM114’, datafield: ‘CHEM114’, width: 65 },
    { text: ‘FCS310’, datafield: ‘FCS310’, width: 65 },
    { text: ‘STATISTICS’, datafield: ‘STATISTICS’, width: 100 },
    { text: ‘BIOL220’, datafield: ‘BIOL220’, width: 65 },
    { text: ‘BIOL361’, datafield: ‘BIOL361’, width: 65 },
    { text: ‘PSYC320’, datafield: ‘PSYC320’, width: 65 },
    { text: ‘UNST Elective 1’, datafield: ‘UNST Elective 1’, width: 100 },
    { text: ‘UNST Elective 2’, datafield: ‘UNST Elective 2’, width: 100 },
    { text: ‘NURS300’, datafield: ‘NURS300’, width: 65 },
    { text: ‘NURS310’, datafield: ‘NURS310’, width: 65 },
    { text: ‘NURS320’, datafield: ‘NURS320’, width: 65 },
    { text: ‘NURS350’, datafield: ‘NURS350’, width: 65 },
    { text: ‘NURS351’, datafield: ‘NURS351’, width: 65 },
    { text: ‘FCS337’, datafield: ‘FCS337’, width: 65 },
    { text: ‘NURS414’, datafield: ‘NURS414’, width: 65 },
    { text: ‘NURS400’, datafield: ‘NURS400’, width: 65 },
    { text: ‘PSYC434’, datafield: ‘PSYC434’, width: 65 },
    { text: ‘NURS405’, datafield: ‘NURS405’, width: 65 },
    { text: ‘UNST CLUSTER 1’, datafield: ‘UNST CLUSTER 1’, width: 100 },
    { text: ‘UNST CLUSTER 2’, datafield: ‘UNST CLUSTER 2’, width: 100 },
    { text: ‘NURS412’, datafield: ‘NURS412’, width: 65 },
    { text: ‘NURS416’, datafield: ‘NURS416’, width: 65 },
    { text: ‘NURS418’, datafield: ‘NURS418’, width: 65 },
    { text: ‘NURS500’, datafield: ‘NURS500’, width: 65 },
    { text: ‘NURS510’, datafield: ‘NURS510’, width: 65 },
    { text: ‘NURS513’, datafield: ‘NURS513’, width: 65 },
    { text: ‘NURS514’, datafield: ‘NURS514’, width: 65 },
    { text: ‘NURS518’, datafield: ‘NURS518’, width: 65 },
    { text: ‘NURS520’, datafield: ‘NURS520’, width: 65 },
    { text: ‘NURS524’, datafield: ‘NURS524’, width: 65 }
    ]
    });
    //
    // trying to add click event code here.
    });

    Thanks. Any thoughts.

    Data missing after adding code #2859

    Peter Stoev
    Keymaster

    Hi rondc,

    1. Could you paste the full script + html code here? You can format the code by using the “Format HTML Code” button which is situated before the Red Text color button. In addition, all examples of the Grid are also included in the installation package with the full source code. You can find them in the ‘php_demos’ folder.

    2. There’s also a ‘,’ which is not necessary after the:

    { name: ‘NURS524’},

    Looking forward to your reply.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

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

You must be logged in to reply to this topic.