How to Set Value After Double Clicking Cell in Bootstrap-Table

Question

I have a bootstrap-table that I'm trying to configure so that when you double-click a cell, it replaces the html text with an editor. This part I have just fine, with one exception. After making my changes, to properly update the data value for that cell according to the documentation for bootstrap-table, I need to specify the index. The documentation doesn't give a good description of the row or even cell object that is returned during the dbl-click-cell event, so I'm not sure how I'm supposed to get the values I require. Here is my code:

.on('dbl-click-cell.bs.table', function (e, field, value, row, $element) {
    EditCellValue(row, $element.closest('td'), row.id, value);
})

This calls my function that displays the editor in the cell. If you press the Enter key, it will call my API and update the value in the database. Once it's done doing that, I need to set the value of the cell once I'm done:

function EditCellValue(row, cell, id, value) {
    $(cell).html('<input type="text" class="form-control qbedit" placeholder="Enter Vendor Name..." value="' + value + '" />');
    $(".qbedit").focus();
    $(".qbedit").keyup(function (event) {
        if (event.keyCode == 13) {
            var vendorname = $(".qbedit").val();

            // save the edit
            $.ajax({
                type: 'PUT',
                url: '/api/AccountingAPI/' + id,
                cache: false,
                dataType: 'json',
                data: { "": vendorname }
            }).error(function (jqXHR, error, errorThrown) {
                alert(errorThrown);
            }).done(function (res) {
                // row.index is nothing. how do I get it????
                $('#mappings-table').bootstrapTable('updateCell', { index: row.index, field: 'qbvendor', value: vendorname }); 
            });
        }
        else if (event.keyCode == 27) {
            // cancel the edit
            $(cell).html(value);
        }
    });
}

So the row.index property is nothing. Where do I get the index from?

Answer 1

After sifting through the source code for the bootstrap-table, there's no mention of an index. What I ended up doing is assigning an index data attribute to each row as I'm adding them and then I can get the nearest row from the cell element from the dbl-click-cell event. Here's where I add the index (excuse the syntax as I am using ASP.NET MVC Razor):

<tbody>
    @{ var idx = 0; }
    @foreach (var item in Model)
    {
        <tr data-itemId="@item.Id" data-index="@idx">
            <td>@item.Id</td>
            <td>@item.CPRVendor</td>
            <td class="qbvendor">@item.QBVendor</td>
            <td>@item.Verified</td>
        </tr>

        idx++;
    }
</tbody>

Then, in my dbl-click-cell event, I do the following:

$('#mappings-table').on('all.bs.table', function (e, name, args) {
    //console.log('Event:', name, ', data:', args);
})
.on('dbl-click-cell.bs.table', function (e, field, value, row, $element) {
    EditCellValue($element.closest('tr').data('index'),
                  $element.closest('td'), 
                  row.id, 
                  value);
})

And by doing that, I am now able to update the data value of the cell:

$('#mappings-table').bootstrapTable('updateCell', { 
     index: index, 
     field: 'qbvendor', 
     value: vendorname 
});