如何在bootstrap模式内设置kendo-ui网格输入的输入焦点

Question

Before moving my kendo-ui grid inside a bootstrap modal I would click on Add Row and the first of 3 inputs would be selected. I would then tab to the 2nd, then 3rd and then tab to the checkbox button where I would press enter and the row would be added. Then the focus would go back to the Add Row button to where I could press enter to start process over again. Well now that it is inside a modal I lost everything except for tabbing. I have found solutions that use jquery to apply focus but I already have that inside my grid controller.

Kendo-ui grid controller

 $scope.mainGridOptions = {
        dataSource: dataSource,
        pageable: false,
        toolbar: [{ name: "create", text: "Add Product", }],
        columns: [
        { field: "product", title: "Product", width: "95px", editor: productEditor },
        {
            field: "price", title: "Price", width: "95px", format: "{0:c2}", editor: priceEditor
        },
        {
            field: "sqft", title: "Square Feet", width: "95px", editor: sqftEditor
        },
        {
            command: [{ name: 'edit', text: { edit: '', update: '', cancel: '' }, width: '20px' }, { name: 'destroy', text: '' }], title: ' ', width: '80px'
        }],
        editable: 'inline'
    };

    function productEditor(container, options) {
        $('<input id="product" name="product" data-bind="value:product" data-productvalidation-msg="Put the Product!" />')
           .appendTo(container)
           .kendoMaskedTextBox({});
        $("#product").focus(function () {
            var input = $(this);
            setTimeout(function () {
                input.select();
            });
        });
    };

    function priceEditor(container, options) {
        $('<input id="price" name="price" data-bind="value:price" data-step="10000" style="" data-productvalidation-msg="Put the Price!"/>')
            .appendTo(container)
            .kendoNumericTextBox({ format: 'c0', min: 0 });
        $("#price").focus(function () {
            var input = $(this);
            setTimeout(function () {
                input.select();
            });
        });
    }

    function sqftEditor(container, options) {
        $('<input id="sqft" name="sqft" data-bind="value:sqft" data-step="500" style="" data-productvalidation-msg="Put the Sqft!"/>')
            .appendTo(container)
            .kendoNumericTextBox({ format: '0', min: 0 });
        $("#sqft").focus(function () {
            var input = $(this);
            setTimeout(function () {
                input.select();
            });
        });
    };

Modal

 <!-- Grid Modal -->
                    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                        <div class="modal-dialog modal-lg" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <div style="width:100%"><span class="modal-label">My Product Data</span><button style="float:right" class="btn btn-custom waves-effect" data-dismiss="modal"><i class="zmdi zmdi-close"></i></button></div>
                                </div>
                                <div class="modal-body">
                                    <div kendo-grid id="grid" options="mainGridOptions"></div>
                                </div>
                            </div>
                        </div>
                    </div><!--End Grid Modal -->

Function to open modal

$scope.openGrid = function () {
    $('#myModal').modal('show');
};

Answer 1

On the API Functions for NumericTextBox Kendo-UI control it shows that focus can be obtained by performing the following pseudo-code:

var numerictextbox = $("#numerictextbox").data("kendoNumericTextBox");
numerictextbox.focus();

So applying this to your code it would look something like this:

var price= $("#price").data("kendoNumericTextBox");
price.focus();

Additionally since your modal popup is more of an application I would suggest switching the accessability attributes from

role="document" to role="application"

Answer 2

I think the focus is hijacked from the bootstrap modal itself, you can use the shown event and set the focus accordingly.

Ref:

Bootstrap provides custom events for most plugins' unique actions. Generally, these come in an infinitive and past participle form - where the infinitive (ex. show) is triggered at the start of an event, and its past participle form (ex. shown) is triggered on the completion of an action.

As of 3.0.0, all Bootstrap events are namespaced.

All infinitive events provide preventDefault functionality. This provides the ability to stop the execution of an action before it starts.

Code:

$('#myModal').on('shown.bs.modal', function () {
    //your current focus set
});

Answer 3

Try this… in show modal window

this.$workModal.on('show.bs.modal', (e) => {
    $('#workId_input').data('kendoNumericTextBox').focus();
});

on UI.... You need to have ID on input…

<input id='workId_input', data-bind="kendoNumericTextBox ......">

Answer 4

Try this.. you just need to turn off Event Listener attached by Bootstrap.

 $('#myModal').on('shown.bs.modal', function() {
        $(document).off('focusin.modal');
    });