When the igCombo box’s selected text is longer than the combo’s text area, the beginning of the text is not displayed. Instead, the end portion of the text is displayed. For example: If the text area can only show 150 characters and the selected text has 200 characters, the displayed text’s start position is 50 and the ending character is 200 which makes the first 50 characters not visible.
I have tried to get an object of combo’s text area in order to move the cursor to the start position of the text, but I have not been successful. I would greatly appreciate it, if someone would provide the code necessary to move the cursor to the beginning of the selected text, when it is longer the combo’s text area.
Finally, I was able to get the element object of igComb’s text area which is shown below:
var element = document.getElementById(comboID).getElementsByClassName("ui-igcombo-field")[0];
Infragistics provides not clear document or examples on how to get combo’s text area’s object,. However: I was able to find some example code demonstrating how to get an element object where the elements ‘id’ and class were contained in two separate tags, as shown above.
The below solution assumes that a class named ‘igCombo-text’ has been added the igCombo by using the ‘HtmlAttributes()’ property, as shown below:
@(Html.Infragistics().ComboFor(p => p.ReceiverOrgID).
ID("receiverOrgID").
Width("175px").
DropDownOnFocus(true).
DropDownWidth(300).
MultiSelection(ComboMultiSelection.Off).
TextKey("Name").
ValueKey("ID").
Text(Model.ReceiverOrg).
DataSource(Model.SendsReceives).
AllowCustomValue(true).
HtmlAttributes(new System.Collections.Generic.Dictionary<string, object>() { { "class", "igCombo-text" } }).
DataBind().
Render()
)
Solution:
// Combo text change delegate.
$(document).delegate(".igCombo-text", "igcombotextchanged", function (evt, ui)
// Get combo id.
var comboID = evt.target.id.toString();
// Get the element object of the combo's ‘INPUT’ tag associated with the combo's text area.
// Call to set cursor to text start postion.
setCursorToTextStart(element);
});
//Set cursor to text's start position by creating a range object and moving crusor to position 0.
function setCursorToTextStart(element) {
// Make sure element is not null and supports creatTextRange() method.
if (element != null && element.createTextRange()) {
element.focus();
// Create range and set cursor positon to start of text.
var range = element.createTextRange();
range.select();
range.moveStart('character', 0)
range.collapse(true);
range.select(false); // un-highlight text.
}