How do I disable a cascading kendo combobox after its loaded?

Question

I have two kendo comboboxes, one cascades from the other. They both load their data fine. The problem is that I would like to disable the second combobox (comboSequenceNumbers) after its selection is made.

There are different two methods that I use to populate these comboboxes. Here's the order of operations to get to the point where the disable is attempted.

1. User can either (A) Scan a barcode or (B) make a selection from the first combobox (which then populates the second combobox), then make a selection from the second combobox.

2. Once the user has completed either methods (A) or (B), the comboSequenceNumbers combobox should be disabled.

Selection (B) disables the combobox the way it needs to be, the first method (A) causes the problem. No errors are thrown during this process, but no disabling occurs either.

Here are the comboboxes.

       <div class="divAssTypesComboBox">
        @(Html.Kendo().ComboBox()
                .Name("comboAssTypes")
                .Filter("contains")
                .Placeholder("Select Asset Type...")
                .DataTextField("Asset")
                .DataValueField("Asset_Id")
                .Suggest(true)
                .HtmlAttributes(new { style = "width: 100%" })
                .DataSource(source =>
                            {
                                source.Read(read =>
                                {
                                    read.Action("Get_AssetTypes", "ScanPanel");
                                });
                            })
        )
    </div>        
    <div class="divSequenceNumbersComboBox">
        @(Html.Kendo().ComboBox()
                    .Name("comboSequenceNumbers")
                    .HtmlAttributes(new { style = "width: 100%" })
                    .Placeholder("Select Sequence Number...")
                    .DataTextField("Sequence_Numbers")
                    .DataValueField("Tag_Id")
                    .Filter(FilterType.Contains)
                    .DataSource(source =>
                    {
                        source.Read(read =>
                        {
                            read.Action("Get_SequenceNumbers", "ScanPanel")
                                .Data("get_Selected_Asset");
                        })
                        .ServerFiltering(true);
                    })
                    .Enable(false)
                    .AutoBind(false)
                    .CascadeFrom("comboAssTypes")
                    .Events(e =>
                        {
                            e.Change("onSequenceNumberChange");
                        }
                    )
        )
    </div>

Here are the methods being called by either scanning or manually inputting the data.

    // Going this route does not disable the combobox... 
    // even though the disable method is the same as the other route's.
    $(document).scannerDetection(function (scandata) {        
    $.ajax({
        url: '@Url.Action("Get_ScanPanelFromAUIB", "ScanPanel")',
        type: 'POST',
        data: { AUIB: scandata.trim() },
        success: function (data) {
            $('#comboAssTypes').data('kendoComboBox').value(data.AssTypeID);
            $('#comboSequenceNumbers').data('kendoComboBox').value(data.SeqNumID);
            LockScanPanel();
        },
        failure: function (e) {
            alert('Scan failed.  Please check the barcode and try again.');
        }
    });
});

// Going this route disables the combobox after selection, as desired.
function onSequenceNumberChange() {
    var seqTagNum = { tagnum: $("#comboSequenceNumbers").val() };
    $.ajax({
        url: '@Url.Action("Get_ScanPanelFromTagNumber", "ScanPanel")',
        type: 'POST',
        data: seqTagNum,
        success: function (data) {
            LockScanPanel();
        }
    });
}

function UnlockScanPanel() {
    var comboAss = $("#comboAssTypes").data("kendoComboBox");
    var comboSeq = $("#comboSequenceNumbers").data("kendoComboBox");

    comboAss.enable();
    comboSeq.enable();
}

function LockScanPanel() {
    var comboAss = $("#comboAssTypes").data("kendoComboBox");
    var comboSeq = $("#comboSequenceNumbers").data("kendoComboBox");
    comboAss.enable(false);
    comboSeq.enable(false);
}

Interestingly, if I scan the barcode a second time, it will actually disable the combobox. Strange that it requires a second scan. Any help is appreciated, thanks!

Answer 1

This turned out to be a timing issue. The second combobox was being populated correctly and its data set fine; however, there was something the process was not finished with as it would not disable the combobox.

window.setTimeout(LockScanPanel, 100);

did the trick.