How to update Bootgrid selected rows with new data

Question

I am using jquery-bootgrid Located here. http://www.jquery-bootgrid.com/GettingStarted

I created a bootgrid with fields one of them I want to edit so what I did was to specify it in the formatter.

 formatters: 
    {
       "fieldval": function(column, row)
        {
           return formatterForFieldval(column, row);
        }
    }
   })

The function.

 function formatterForFieldval(column, row)
{

        return '<input type="text" class="form-control" id="usr" '
           +     'value="'+row.fieldval+'"'
           +     '>' ;


}

This works and it creates a textbox that I can edit in runtime.

Now the next step is to save the modified data.

I use the following script to get the selected rows that the user modified.

  function getSelectedRowsAsJson(tableId)
{

    var selectedRowsArray =[];
    var selectedRowsJsonArray = "";

    var rows = $(tableId).bootgrid("getSelectedRows");

    var arrayLength = rows.length;

    for (var i = 0; i < arrayLength; i++) 
    {
       var rowsc = $(tableId).bootgrid("getCurrentRows");

       var arrayLengthCurrent = rowsc.length;
       for (var ii = 0; ii < arrayLengthCurrent; ii++) 
       {

           if(rows[i]===rowsc[ii].id)
           {
                selectedRowsArray.push(rowsc[ii])
           }
       }

    }

    selectedRowsJsonArray = JSON.stringify(selectedRowsArray);
    console.log(selectedRowsJsonArray);
    return selectedRowsJsonArray;

}

My issue is that var rowsc = $(tableId).bootgrid("getCurrentRows"); is not updated to the modified data that I typed into the textbox.. It still shows the old data (loaded data) before I modified the text box.

So when sending the array of rows to the database it updates to the same values.

How do I update var rowsc = $(tableId).bootgrid("getCurrentRows"); after I have modified the textbox ? Or am I doing it wrong?

Answer 1

To start with, as per my experience (as of this writing), getSelectedRows only returns the primary keys of the selected columns.

I have worked out your issue. Here are the modifications you need to make: 1. Let's assume your data-identifier column name is "pkcolumn":

function formatterForFieldval(column, row)
{
    return '<input type="text" class="form-control" id="pk' + row.pkcolumn + '" value="'+ row.fieldval + '">'; //Notice I have prefixed the id with an arbitrary litteral "pk";
}

In the above code snippet, we have given a unique id to each row input.

2.getSelectedRowsAsJson should be refactored like this:

function getSelectedRowsAsJson()
{
    var ids = $('#yourTableId').bootgrid('getSelectedRows');  //Here, remember that getSelectedRows only returns the values of the selected data-identifier columns (meaning, only the values of the selected pkcolumn (in this example) will be returned). 

    var myDataArray = [];   //Create an array that will store the edited objects (key-value pairs)
    $(ids).each(function (index, data) {
        var editedData = {};    //Create an object to store the selected key-value pairs that have been edited.
        editedData.key = data;
        editedData.editedValue = $('#pk' + data).val(); //so here we retrieve the value of the input whose id equals "pkxxxx". In your example above, it could be "pk35630", and so on.
        myDataArray.push(editedData);
    });

    //If myDataArray has data then proceed. Otherwise, return
    if(myDataArray.length === 0)
        return;
    //At this point, myDataArray will look like this: [{key: 'pk35630', editedValue: 'blue bla blue'}, {key: 'pk35635', editedValue: 'bla bla bla'}]
    //Next, you can use myDataArray to post it through ajax and update your database accordingly, thereafter refresh the bootgrid.

    var postdata = JSON.stringify(myDataArray);
    $.ajax({
        url: your-url,
        data: postdata,
        type: 'post'
    }).done(function (data, textStatus, jqXHR) {
        //do your own stuff. for example, refresh/reload the bootgrid.
    });
}

I hope the above will help you solve your problem.