webismymind / editablegrid

EditableGrid is an open source Javascript library aimed at turning HTML tables into advanced editable components. It focuses on simplicity: only a few lines of code are required to get your first table up and running.
http://www.editablegrid.net
Other
795 stars 272 forks source link

Cannot get grid to refresh when adding or removing rows #67

Closed thenderson closed 10 years ago

thenderson commented 10 years ago

I cannot get EditableGrid to refresh the grid when I've added or deleted a row. Can you confirm that this is what .refreshGrid() is supposed to do? In my case, added or deleted rows only appear in the grid if I manually reload the entire page.

Here's my function (adapted from one of your examples) to add a row using values returned via AJAX.

DatabaseGrid.prototype.addRow = function(id) 
{
    var projectNumber = this.editableGrid.getValueAt(id, 1);

    $.ajax({
        url: '../includes/commitment_add.php',
        type: 'POST',
        dataType: "json",
        data: {
            projectnumber: projectNumber
        },
        success: function (response) 
        { 
            // get id for new row (max id + 1)
            var newRowId = 0;
            for (var r = 0; r < datagrid.editableGrid.getRowCount(); r++) newRowId = Math.max(newRowId, parseInt(datagrid.editableGrid.getRowId(r)) + 1);

            // add new row
            datagrid.editableGrid.insertAfter(id, newRowId, response);
            datagrid.editableGrid.refreshGrid(); // this seems to have no effect
            highlight(newRowId, "ok");
            //console.log("id: ", id, " newRowId: ", newRowId, " response: ", response);
        },
        error: function(XMLHttpRequest, textStatus, exception) 
        { 
            highlight(id, "error");
            alert("Ajax failure\n" + XMLHttpRequest + "\n Textstatus: " + textStatus + "\n Exception:" + exception); 
        },
        async: true
    });     
}; ```
thenderson commented 10 years ago

Oh, geez. I figured out my mistakes. Please disregard.

webismymind commented 10 years ago

No refreshGrid is necessary. The refreshGrid function is meant for the (not yet documented) server-side pagination/searching/sorting (it allows reloading the current page's data from the server). I think that your issue is that insertAfter is not working, because you pass "id" as first parameter. But insertAfter expects a row index as first parameter.

2014-09-21 19:25 GMT+02:00 Todd Henderson notifications@github.com:

I cannot get EditableGrid to refresh the grid when I've added or deleted a row. Can you confirm that this is what .refreshGrid() is supposed to do? In my case, added or deleted rows only appear in the grid if I manually reload the entire page.

Here's my function (adapted from one of your examples) to add a row using values returned via AJAX.

DatabaseGrid.prototype.addRow = function(id) { var projectNumber = this.editableGrid.getValueAt(id, 1);

$.ajax({
    url: '../includes/commitment_add.php',
    type: 'POST',
    dataType: "json",
    data: {
        projectnumber: projectNumber
    },
    success: function (response)
    {
        // get id for new row (max id + 1)
        var newRowId = 0;
        for (var r = 0; r < datagrid.editableGrid.getRowCount(); r++) newRowId = Math.max(newRowId, parseInt(datagrid.editableGrid.getRowId(r)) + 1);

        // add new row
        datagrid.editableGrid.insertAfter(id, newRowId, response);
        datagrid.editableGrid.refreshGrid(); // this seems to have no effect
        highlight(newRowId, "ok");
        //console.log("id: ", id, " newRowId: ", newRowId, " response: ", response);
    },
    error: function(XMLHttpRequest, textStatus, exception)
    {
        highlight(id, "error");
        alert("Ajax failure\n" + XMLHttpRequest + "\n Textstatus: " + textStatus + "\n Exception:" + exception);
    },
    async: true
});     }; ```

— Reply to this email directly or view it on GitHub https://github.com/webismymind/editablegrid/issues/67.