jQuery UI Widgets Forums Grid localdata error while input data in newly created row (JQxGrid)

This topic contains 1 reply, has 2 voices, and was last updated by  Dimitar 8 years, 8 months ago.

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

  • BilalBlu
    Participant

    I am using JQxGrid plugin in that i get data from my server and show in grid. Now i want to give option to add rows to users so they can add new rows.
    I added row by clicking on button. But when user enters in field nothing it display

    Following is my JS code that I use so far.
    code
    `var url = ‘<?php echo base_url(); ?>’+’project/checklist_grid’;
    var source = {
    url: url+’/’+$(‘#activity_type option:selected’).val(),
    datatype: “json”,
    datafields: [{ name: ‘id’ },{ name: ‘name’ },{ name: ‘weightage’ },{ name: ‘evidence’ }],
    addrow: function (rowid, rowdata, position, commit) {
    commit(true);
    },
    deleterow: function (rowid, commit) {
    commit(true);
    }
    };
    var generaterow = function (i) {
    var row = {};
    row[‘id’] = ”;
    row[‘name’] = ”;
    row[‘weightage’] = ”;
    row[‘evidence’] = ”;
    return row;
    }
    $(“#cl_grid”).jqxGrid({
    width: ‘100%’,
    height: ‘84.5%’,
    source: source,
    scrollmode: ‘logical’,
    sortable: true,
    editable:true,
    altrows: true,
    theme: ‘office’,
    showtoolbar: true,
    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 New Row” />’);
    container.append(‘<input style=”margin-left: 5px;” id=”deleterowbutton” type=”button” value=”Delete Selected Row” />’);
    $(“#addrowbutton”).jqxButton();
    $(“#deleterowbutton”).jqxButton();
    // create new row.
    $(“#addrowbutton”).off(‘click’);
    $(“#addrowbutton”).on(‘click’, function () {
    var datarow = generaterow();
    var commit = $(“#cl_grid”).jqxGrid(‘addrow’, null, datarow);
    });
    // delete row.
    $(“#deleterowbutton”).off(‘click’);
    $(“#deleterowbutton”).on(‘click’, function () {
    var selectedrowindex = $(“#cl_grid”).jqxGrid(‘getselectedrowindex’);
    var rowscount = $(“#cl_grid”).jqxGrid(‘getdatainformation’).rowscount;
    if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
    var id = $(“#cl_grid”).jqxGrid(‘getrowid’, selectedrowindex);
    var commit = $(“#cl_grid”).jqxGrid(‘deleterow’, id);
    }
    });
    },
    columns: [{
    text: ‘Checklist’,
    datafield: ‘name’,
    align: ‘left’,
    width: 250
    }, {
    text: ‘Weightage’,
    datafield: ‘weightage’,
    cellsalign: ‘left’,
    align: ‘left’
    },{
    text: ‘Evidence’,
    datafield: ‘evidence’,
    cellsalign: ‘left’,
    align: ‘left’,
    columntype: ‘dropdownlist’
    }]
    });
    $(‘#activity_type’).on(‘change’,function(){
    var url = ‘<?php echo base_url(); ?>’+’project/checklist_grid’;
    var source = {
    url: url+’/’+$(this).val(),
    datatype: “json”,
    datafields: [{ name: ‘id’ },{ name: ‘name’ },{ name: ‘weightage’ },{ name: ‘evidence’ }],
    addrow: function (rowid, rowdata, position, commit) {
    commit(true);
    },
    deleterow: function (rowid, commit) {
    commit(true);
    }
    };
    $(“#cl_grid”).jqxGrid({ source: source });
    });`

    Image 1 is show my data from my server
    Image 1

    Image 2 :: Now after click on add new row when i enter a text and Hit Enter button or move to second column and text disappeared i also got a error in console Uncaught TypeError: Cannot read property 'localdata' of undefined

    Image 2

    • This topic was modified 8 years, 8 months ago by  BilalBlu.
    • This topic was modified 8 years, 8 months ago by  BilalBlu.

    Dimitar
    Participant

    Hello BilalBlu,

    Your code seems fine. We tested a version of it with local data and it works correctly. Please make sure you are using the latest version of jQWidgets (3.8.2). If you wish the newly added row to be added to the database, too, you would need to implement CRUD, as explained in the help topic Build CRUD Web App with jqxGrid using PHP and MySQL.

    Best Regards,
    Dimitar

    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.