https://stackoverflow.com/questions/46939346/inplace-grid-edit-cancel-fails

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
 
<div id="departure-container" style="display: none;" data-bind="visible: TourSeriesDepartures().length>0">
  <table class="table" >
    <tr>
      <th>Series Departure</th>
      <th>Main Coach Seats</th>
      <th>Departure</th>
    </tr>
    <tbody data-bind=" template:{name:templateToUse, foreach: currentPage }"></tbody>
  </table>
</div>

    <script id="itemsTmpl" type="text/html">
        <!-- ko foreach: Departures -->

        <tr>

            <!-- ko if: $index() == 0 -->
            <td style="vertical-align:middle" data-bind="text: $parent.DepartureGroupName,attr: { rowspan: $parent.Departures().length }"></td>
            <td style="vertical-align:middle" data-bind="attr: { rowspan: $parent.Departures().length }">
                <!-- ko if: $data.AssignedCoaches().length > 0 -->
                <span data-bind="text: (($data.AssignedCoaches()[0].Seats) ? $data.AssignedCoaches()[0].Seats : '?')" ></span>
                <!-- /ko -->

            </td>
            <!-- /ko -->


            <td>
                <span data-bind="text: TourName "></span>
                <span data-bind="text: DepartureCode"></span>
            </td>
            <!-- ko if: $index() == 0 -->
            <td class="buttons" data-bind="attr: { rowspan: $parent.Departures().length }" style="vertical-align:middle">
                <span>
                   ...

JavaScript

var myData =
{
    TourSeriesName: 'Test Series',
    Year: '2017',
    TourSeriesDepartures: [{
        DepartureGroupName: 'Group 1',
        Departures: [{
            TourName: 'Tour 1',
            DepartureCode: '001',
            IsActive: false,
            TourId: 0,
            TourDepartureId: 0,
            AssignedCoaches: [{
                CoachName: 'Test Coach',
                Seats: 5,
                SeatsAvailable: 3,
                IsExtensionCoach: false,
                ResourceInventoryId: 0,
                ResourceScheduleId: 0
            }]
        },
        {
            TourName: 'Tour 2',
            DepartureCode: '002',
            IsActive: false,
            TourId: 0,
            TourDepartureId: 0,
            AssignedCoaches: [{
                CoachName: 'Test Coach',
                Seats: 5,
                SeatsAvailable: 3,
                IsExtensionCoach: false,
                ResourceInventoryId: 0,
                ResourceScheduleId: 0
            }]
        }]
    },
    {
        DepartureGroupName: 'Group 1',
        Departures: [{
            TourName: 'Tour 1',
            DepartureCode: '001',
            IsActive: false,
            TourId: 0,
            TourDepartureId: 0,
            AssignedCoaches: [{
                CoachName: 'Test Coach',
                Seats: 5,
                SeatsAvailable: 3,
                IsExtensionCoach: false,
                ResourceInventoryId: 0,
                ResourceScheduleId: 0
            }]
        },
        {
            TourName: 'Tour 2',
            DepartureCode: '002',
            IsActive: false,
            TourId: 0,
            TourDepartureId: 0,
            AssignedCoaches: [{
                CoachName: 'Test Coach',
                Seats: 5,
                SeatsAvailable: 3,
                IsExtensionCoach: false,
                ResourceInventoryId: 0,
                ResourceScheduleId: 0
            }]
        }]
    }]
};
 
var viewModel =...