jqGrid ASP .Net Inline Edit - Update a cell value when another cell value changes

Question

Hi, I am trying to do a calculation of an editable cell in the JQGrid when changing the value of two other columns. I have an hours column that I want to display the hours between two given dateTime columns. So when a user is performing an inline edit and changes either the StartDateTime or the EndDateTime columns the hours column should automatically update with the hours difference between the two values.

A simplified version of my grid is defined as follows:

    <trirand:JQGrid ID="grdTimesheet" runat="server" Width="1200px" Height="400px" ColumnReordering="False"
    OnRowEditing="grdTimesheet_RowEditing" OnRowDeleting="grdTimesheet_RowDeleting"
    PagerSettings-PageSize="20">
    <Columns>
        <trirand:JQGridColumn DataField="TimesheetID" PrimaryKey="True" Width="70" Visible="false" />
        <trirand:JQGridColumn DataField="StartTime" HeaderText="Start Time" Editable="true"
            Width="60" DataFormatString="{0:dd/MM/yy HH:mm}" />
        <trirand:JQGridColumn DataField="EndTime" HeaderText="End Time" Editable="true" Width="60"
            DataFormatString="{0:dd/MM/yy HH:mm}" />
        <trirand:JQGridColumn DataField="NormalHours" Width="30" Editable="true" TextAlign="Right"
            HeaderText="NT">
            <Formatter>
                <trirand:NumberFormatter DecimalPlaces="2" DecimalSeparator="." ThousandsSeparator=" " />
            </Formatter>
        </trirand:JQGridColumn>
    </Columns>
    <ClientSideEvents RowSelect="editRow" AfterEditCell="afterEditCell" />
    <ToolBarSettings ShowEditButton="true" ShowRefreshButton="True" ShowAddButton="true"
        ShowDeleteButton="true" ShowSearchButton="True" />
    <AppearanceSettings ScrollBarOffset="0" HighlightRowsOnHover="true" />
</trirand:JQGrid>

<script type="text/javascript">
    var lastSelection;

    function editRow(id) {
        if (id && id !== lastSelection) {
            var grid = jQuery("#<%= grdTimesheet.ClientID %>");
            grid.restoreRow(lastSelection);
            grid.editRow(id, true, pickdates);

            lastSelection = id;
        }
    }

    function afterEditCell() {
        var grid = jQuery("#<%= grdTimesheet.ClientID %>");
        //Code to go here to auto calculate hours
    };

    function pickdates(id) {
        $("#" + id + "_StartTime", "#<%= grdTimesheet.ClientID %>").datepicker({
            duration: '',
            showTime: true,
            constrainInput: false,
            dateFormat: 'dd-M-yy',
            time24h: true,
            onSelect: function (dateText, inst) {
                var grid = jQuery("#<%= grdTimesheet.ClientID %>");
                grid.saveRow(id);
            }
        });

        $("#" + id + "_EndTime", "#<%= grdTimesheet.ClientID %>").datepicker({
            duration: '',
            showTime: true,
            constrainInput: false,
            dateFormat: 'dd-M-yy',
            time24h: true,
            onSelect: function (dateText, inst) {
                var grid = jQuery("#<%= grdTimesheet.ClientID %>");
                grid.saveRow(id);
            }
        });
    }
</script>

Currently the afterEditCell function is not being fired unless I add in:

<EditInlineCellSettings Enabled="true" />

However once I add this, my editRow function is no longer called and therefore my jquery dateTimePickers are no longer displayed when I click into my datetime columns.

Any help at all would be greatly appreciated, Cheers