Прежде чем переместить мою сетку kendo-ui внутри мода бутстрапа, я бы нажал кнопку Add Row, и было выбрано первое из трех входов. Затем я перейду к второму, затем к третьему, а затем добавлю к кнопке флажка, где я бы нажал кнопку ввода, и строка будет добавлена. Затем фокус вернется к кнопке Добавить строку, где я могу нажать Enter, чтобы снова начать процесс. Ну, теперь, когда он внутри модального, я потерял все, кроме табуляции. Я нашел решения, которые используют jquery для применения фокуса, но у меня уже есть это внутри моего контроллера grid.
Контроллер сетки Kendo-ui
$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();
});
});
};
режимное
<!-- 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 -->
Функция открытия модального
$scope.openGrid = function () {
$('#myModal').modal('show');
};