jqGrid - Disable/enable select *initially* depending on other column's value

Question

There are two columns in my grid, 'Type' and 'Currency'. When the type is set to percentage ('P'), 'Currency' should have an empty option selected by default and be disabled.

The code from this question works perfectly when changing the type from 'F' to 'P' and it's just fine for inline editing, but I have the following problems:

1. If a record in the table has 'P' type, when opening the edit form, the selected type is 'Percentage' but the 'Currency' select element is enabled.

2. If I have two records with 'F' type, and I open the edit form for one of them, change the type to 'P' (now the 'Currency' select is disabled and empty), and without saving I move to the next record using the dialog's arrow, now the selected type is 'F' and the 'Currency' select doesn't have an empty option but it's disabled.

I tried fixing this using dataInit in the Currency column, but at the time it happens, the 'Type' select seems not to exist.

The function to add/remove an empty option, and disable/enable the 'Currency' select:

function toggleCurrency(typeSelect, currencySelect) {
    var emptyOption = '<option value=""></option>';
    if (typeSelect.val() === 'P') {
        currencySelect.prop("disabled", true);
        currencySelect.append(emptyOption);
        currencySelect.val("");
    } else {
        currencySelect.prop("disabled", false);
        currencySelect.find('option[value=""]').remove();
    }
    return false;
}

The 'Type' and 'Currency' columns of the grid:

{
    name : 'Type',
    edittype : 'select',
    formatter : 'select',
    editoptions : {
        value : 'F:Fixed Amount;P:Percentage',
        dataEvents : [{
            type : 'change',
            fn : function(e) {
                var $this = $(e.target), $td, rowid;
                var currencySelect;
                if ($this.hasClass("FormElement")) {
                    currencySelect = $("#Currency");
                } else {
                    $td = $this.closest("td");
                    if ($td.hasClass("edit-cell")) {

                    } else {
                        var rowid = $td.closest("tr.jqgrow").prop("id");
                        if (rowid) {
                            currencySelect = $("#" + $.jgrid.jqID(rowid) + "_Currency");
                        }
                    }
                }
                toggleCurrency($this, currencySelect);
            }
        }]
    },
stype : 'select'
}, {
    name : 'Currency',
    edittype : 'select',
    editoptions : {
        dataUrl : '/api/v1/currency/?user__id=' + userid,
        buildSelect : function(data) {
            var response = $.parseJSON(data);
            var s = '<select>';
            $.each(response.objects, function(index, currency) {
                s += '<option value="' + currency.id + '">' + currency.code + '</option>';
            });
            return s + "</select>";
        },
        dataInit : function(elem) {
            var typeSelect;
            var $this = $(elem);
            if ($this.hasClass("FormElement")) {
                typeSelect = $("#Type");
            } else {
                $td = $this.closest("td");
                if ($td.hasClass("edit-cell")) {

                } else {
                    var rowid = $td.closest("tr.jqgrow").prop("id");
                    if (rowid) {
                        typeSelect = $("#" + $.jgrid.jqID(rowid) + "_Type");
                    }
                }
            }
            console.log(typeSelect); // Logs an empty object
            toggleCurrency(typeSelect, $this);
        }
    },
    stype : 'select',
    width : 60
}

I also tried using beforeShowForm in the add and edit options, but it has a similar problem:

beforeShowForm : function(form) {
    centerDialog($("#editmodjqgrid-account-commissions"));
    console.log($('#Currency')); // Logs en empty object
    toggleCurrency($('#Type'), $('#Currency'));
}

I'm out of ideas and I would be grateful if someone could help me.

Update 1

I can solve the navigation problem using:

afterclickPgButtons : function(whichbutton, formid, rowid) {
    toggleCurrency($('#Type'), $('#Currency'));
}

But I still have problems with the $("#Type") object being undefined in dataInit.

Answer 1

A not-so-nice solution I found.

I modified toggleCurrency() to be:

function toggleCurrency(typeSelectValue, currencySelect) {
    var emptyOption = '<option value=""></option>';
    if (typeSelectValue === 'P') {
        currencySelect.prop("disabled", true);
        currencySelect.append(emptyOption);
        currencySelect.val("");
    } else {
        currencySelect.prop("disabled", false);
        currencySelect.find('option[value=""]').remove();
    }
    return true;
}

And the 'Currency' column dataInit to be:

dataInit : function(elem) {
    var typeSelect;
    var rowid;
    var $this = $(elem);
    if ($this.hasClass("FormElement")) {
        // Get selected row in the grid
        selectedRow = $("#jqgrid-account-commissions > tbody > tr[aria-selected='true']");
        // Check if the value in the 'Type' column is 'Percentage'
        typeSelectValue = (selectedRow.find("td[aria-describedby='jqgrid-account-commissions_Type']").prop("title") === 'Percentage') ? 'P' : 'F';
    } else {
        $td = $this.closest("td");
        if ($td.hasClass("edit-cell")) {

        } else {
            rowid = $td.closest("tr.jqgrow").prop("id");
            if (rowid) {
                typeSelectValue = $("#" + $.jgrid.jqID(rowid) + "_Type").val();
            }
        }
    }
    toggleCurrency(typeSelectValue, $this);
}