[Solved] Incorrect caret position in currency/decimal editor in MVC grid

[Andrey]

The currency editor control behaves correctly in your example here: when you start editing, the caret is placed after the last digit.
However, it behaves incorrectly in my local MVC example ("C:\Program Files (x86)\Telerik\UI for ASP.NET MVC Q3 2014\wrappers\aspnetmvc\Examples\VS2012\Kendo.Mvc.Examples\"), just run StartExamples.exe and go to "http://localhost:8301/razor/grid/editing-custom". When you start editing, the caret is placed at the first digit, which is terribly inconvenient.
I have the same problem in my MVC project too and i guess this is a bug. I don't know if it is only related to the grid, or maybe it is currency/decimal editor control problem.

[Georgi Krustev]

Hello Andrey,

In general, caret position is a browser related. In Chrome for instance caret will be placed at the end of the input, but in IE it will be placed in the beginning. We do not change/control this behavior as it is strictly browser one. Let me know if you would like to unify this caret behavior.

As to the comment about online MVC demos and the offline ones, here is a screencast that shows that the behavior is the same in both demos.

Regards,
Georgi Krustev
Telerik

 

 

[Andrey]

Hi Georgi!

I think there a bit more to this problem than just browser specifics, take a look at this code from kendo.numerictextbox.js

_click: function(e) {
    var that = this;

    clearTimeout(that._focusing);
    that._focusing = setTimeout(function() {
        var input = e.target,
            idx = caret(input)[0],
            value = input.value.substring(0, idx),
            format = that._format(that.options.format),
            group = format[","],
            result, groupRegExp, extractRegExp,
            caretPosition = 0;

        if (group) {
            groupRegExp = new RegExp("\\" + group, "g");
            extractRegExp = new RegExp("([\\d\\" + group + "]+)(\\" + format[POINT] + ")?(\\d+)?");
        }

        if (extractRegExp) {
            result = extractRegExp.exec(value);
        }

        if (result) {
            caretPosition = result[0].replace(groupRegExp, "").length;

            if (value.indexOf("(") != -1 && that._value < 0) {
                caretPosition++;
            }
        }

        that._focusin();

        caret(that.element[0], caretPosition);
    });
},

This code definitely messes with caret somehow and you are right, it works fine in Chrome, but in Firefox it works only in HTML/JS example (online or offline, no matter, it works in my local examples too). But in MVC it does not. I have no idea why....
Try opening MVC example in Firefox and you'll see it. The example from Kendo UI Professional works ok, but the same from Kendo UI for MVC does not.

[Georgi Krustev]

Hello Andrey,

Indeed, the caret is placed in the beginning of the input when demo is opened in Firefox. There is no difference whether the MVC or Kendo UI demos are used in this case.
I am aware of the shared code snippet, but it still will behave differently in different browsers depending on their implementation of the input focus and caret placement. In Firefox this line

idx = caret(input)[0]

will return different value than Chrome, hence the widget decides to place the caret at the beginning.

The only way to handle this browsers difference is to select the whole text on focus. Here is a demo that demonstrates how to accomplish this. You can also vote for this functionality here.

Regards,
Georgi Krustev
Telerik

 

 

[Andrey]

Hi Georgi!

I think this is a best solution so far. Thank you! I will vote for this feature to be included as default behavior for numeric editor.
For all MVC people around - here is what you should do:

1. Make new editor template (e.g. "MyNumericEditor")

@model decimal?

@Html.Kendo().NumericTextBoxFor(m => m)
    <script type="text/javascript">
        $("#@Html.IdFor(m => m)").on("focus", function () {
            var input = $(this);

            setTimeout(function () {
                input.select();
            });
        });
    </script>

2. In your grid, specify this editor for numeric column (e.g '.EditorTemplateName("MyNumericEditor")')
3. Enjoy.