Add Row not working

[swisspenParticipant]

Hello again

Like some others who have posted here, I want a new, blank row to appear when I click the Add Row button, so I used this code:

$(“#addrowbutton”).bind(‘click’, function ()
{
$(“#jqxgrid_Activities”).jqxGrid(‘addrow’, null, []);
});

Nothing happens, however! Not even an error in the browser console.

The rest of the relevant code is below.

NOTE that Delete Row works as expected, and I have not implemented Update yet. I have not attached any of these behaviours to database changes yet.

NOTE also that the source data brings in 9 rows from the database, via the statement:

url: ‘stcg-json-responses.php?fct=getJSONAllActivitiesAtEvent&eventId=’,

I would expect, when clicking Add Row, for a blank row to appear to appear after the 9 rows, but no … I would expect too that if the get statement called a table with no rows – which can also happen – then clicking Add Row would make a row of editable cells appear at the top of the empty box. No – this doesn’t work either. What am I doing wrong here?

==========================
$(document).ready(function ()
{
//SOURCE THE GRID CONTAINING ALL ACTIVITIES AT THIS EVENT:
var src_Activities =
{
datatype: “json”,
datafields: [
{ name: ‘activity_name’},
{ name: ‘activity_desc’},
{ name: ‘activity_short_code’},
{ name: ‘event_id’},
{ name: ‘capacity’},
{ name: ‘day_of_week’},
{ name: ‘date’},
{ name: ‘open’}
],
id: ‘activity_id’,
url: ‘stcg-json-responses.php?fct=getJSONAllActivitiesAtEvent&eventId=’,
sortcolumn: ‘day_of_week’,
sortdirection: ‘asc’,
async: false
};//end data source

var adp_Activities = new $.jqx.dataAdapter(src_Activities);

var columns = [
{ text: ‘Activity Title’, datafield: ‘activity_name’, width: 300 },
{ text: ‘Description’, datafield: ‘activity_desc’, width: 400 },
{ text: ‘Code’, datafield: ‘activity_short_code’, width: 50 },
{ text: ‘Cap’, datafield: ‘capacity’, width: 50 },
{ text: ‘Day’, datafield: ‘day_of_week’, width: 75 }
];

//INITIALIZE GRID
$(“#jqxgrid_Activities”).jqxGrid(
{
width: 900,
height: 700,
source: adp_Activities,
sortable: true,
theme: ‘classic’,
selectionmode: ‘singlerow’,
columns: columns,
editable: true
});//END GRID INITIALIZE

$(“#addrowbutton”).jqxButton({ theme: ‘classic’ });

$(“#deleterowbutton”).jqxButton({ theme: ‘classic’ });

//EVENT HANDLERS

// create new row.
$(“#addrowbutton”).bind(‘click’, function ()
{
$(“#jqxgrid_Activities”).jqxGrid(‘addrow’, null, []);
});

// delete row.
$(“#deleterowbutton”).bind(‘click’, function () {
var selectedrowindex = $(“#jqxgrid_Activities”).jqxGrid(‘getselectedrowindex’);
var rowscount = $(“#jqxgrid_Activities”).jqxGrid(‘getdatainformation’).rowscount;
if (selectedrowindex >= 0 && selectedrowindex < rowscount)
{
var id = $("#jqxgrid_Activities").jqxGrid('getrowid', selectedrowindex);
$("#jqxgrid_Activities").jqxGrid('deleterow', id);
}
});
// update row.
});

Many thanks in advance
SP

[Peter StoevKeymaster]

Hi SP,

We have a working demo about “addrow” and it is called Create, Remove, Update. You can learn how to use the “addrow” method from the demo.

To add empty row, you should pass empty object, not empty Array as parameter.

     $("#jqxgrid").jqxGrid('addrow', null, {});

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[swisspenParticipant]

sorry Peter! i am an idiot! [] instead of {} – aaaaaargh!

and don’t worry, i have been reading through your CRUD examples line by line and word for word. another really great feature for jQWidgets. thanks a lot!

[Peter StoevKeymaster]

No, problem We will consider adding in the documentation how to add empty row as it looks like a common mistake.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts