I've been experimenting with using the combobox as either an editor or template for a column. The key difference is that one (the template) is always visible, while the other (the editor) is only displayed when the user edits a cell in the column. I've been tackling this issue for hours now, and I'm at a loss on what to try next.
What I aim to achieve is that when the user tabs into a cell containing either option, the combobox becomes active (this functionality works for the editor but not the template), and the current text is automatically selected (meaning if the user starts typing, the existing value gets cleared for the new input).
You can find the complete sample here
So, I have encountered 2 main challenges here: 1. How do I set focus on the combo box used as a template? I made attempts in 2 places - initially in the template itself, where I acknowledge the syntax is incorrect, but I'm unsure of the correct approach...
function createComboTemplate(data, field) {
var tmpl = '<input style="width:100%" ' +
'kendo-combo-box ' +
'text-field="\'display\'" ' +
'suggest = true ' +
'filter="\'contains\'" ' +
'value-field="\'rego\'" ' +
'source="dataItem.carSource"' +
'data-value="dataItem.car.rego" ' +
'k-on="dataItem.onFocus(e)" ' + // how to do this?
'k-on-change="dataItem.handleDDLChange(kendoEvent, dataItem, \'' + field + '\', this)"/>';
return tmpl;
}
Regarding the line 'k-on="dataItem.onFocus(e)" ' above, it currently serves no function. I was attempting something like:
"var combo = input.data("kendoComboBox");
combo.input.on("focus", function () {"...
which is somewhat similar to what I tried below in the second issue related to the editor (as seen further down)
Next, I attempted focusing within the following section..
beforeEdit: function (e) {
if (e.field === "car.display") {
e.preventDefault();
var grid = $("#gridID").data("kendoGrid");
var current = grid.current();
var input = current.find("k-input")
var combo = input.data("kendoComboBox");
console.log("combo is " + combo);
// combo is null
if (combo != null) {
combo.focus();
}
It seems that I am facing trouble obtaining the combo instance here (it's consistently showing up as null) Where did I go wrong in this scenario?
2. The second issue pertains to the editor...
function createCombo(container, options, data) {
var input = $('<input/>')
input.appendTo(container)
input.kendoComboBox({
autoBind: true,
...
var combo = input.data("kendoComboBox");
combo.input.on("focus", function () {
var element = this;
setTimeout(function () {
// select all text?
combo.select();
});
});
}
In the snippet above, the focus handler functions correctly, yet the combo.select(); does not end up selecting the text
To sum it up, there are various components to address, yet my goal remains consistent across both scenarios - ensuring that the combo is selected upon Tab usage and that all text is highlighted.
Any assistance provided here would be immensely appreciated! Thank you in advance