jQuery UI Widgets › Forums › Grid › localdata error while input data in newly created row (JQxGrid)
Tagged: add row, addrow, angular grid, Cannot read property 'localdata' of undefined, grid, jquery grid, jqxgrid, localdata, php, url
This topic contains 1 reply, has 2 voices, and was last updated by Dimitar 9 years, 2 months ago.
-
Author
-
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 displayFollowing 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 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
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,
DimitarjQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.