Select contents on field select / tab

[AP]

During testing of our application, user feedback has requested that when using a grid with numeric text-boxes with in-line editing, the values are selected when the user enters a field, or tabs to the next one.

With other text controls this is default behaviour, but not with the numeric text box. (a huge failing of this control).

I have tried the 'solution' proposed in the documentation (shown below)

$(function () {


    //wire focus of all numerictextbox widgets on the page
    $("input[type=text]").bind("focus", function () {
        var input = $(this);
        clearTimeout(input.data("selectTimeId")); //stop started time out if any

        var selectTimeId = setTimeout(function () {
            input.select();
        });

        input.data("selectTimeId", selectTimeId);
    }).blur(function (e) {
        clearTimeout($(this).data("selectTimeId")); //stop started timeout
    });
})

However, the page is very complex, and this doesn't work. It looks as though the data is selected for a split second, but then becomes unselected again.

The Grid is in a template, defined as:-

<script id="KPITrackerTemplate" type="text/kendo-tmpl">

    <div style="font-size:x-small;">


        @(Html.Kendo().Grid<CIPAndRecovery.Models.vKPI_Tracker>()
                        .Name("Data_#=Id#")
                        .HtmlAttributes(new { style = "font-weight:normal" })
                        .Events(e => e.DataBound("expandAll"))
                        .Events(e => e.DataBound("onKPITracker_Databound"))
                        .Columns(c =>
                        {
                            c.Bound(o => o.Id).Title("Id").Hidden(true);
                            c.Bound(o => o.KPI_Id).Title("AccountDetail Id").Hidden(true);
                            c.Bound(o => o.TrackerType).Title("Type").Width(60);
                            c.Bound(o => o.M1).EditorTemplateName("DecimalMinus");
                            c.Bound(o => o.M2).EditorTemplateName("DecimalMinus");
                            c.Bound(o => o.M3).EditorTemplateName("DecimalMinus");
                            c.Bound(o => o.M4).EditorTemplateName("DecimalMinus");
                            c.Bound(o => o.M5).EditorTemplateName("DecimalMinus");
                            c.Bound(o => o.M6).EditorTemplateName("DecimalMinus");
                            c.Bound(o => o.M7).EditorTemplateName("DecimalMinus");
                            c.Bound(o => o.M8).EditorTemplateName("DecimalMinus");
                            c.Bound(o => o.M9).EditorTemplateName("DecimalMinus");
                            c.Bound(o => o.M10).EditorTemplateName("DecimalMinus");
                            c.Bound(o => o.M11).EditorTemplateName("DecimalMinus");
                            c.Bound(o => o.M12).EditorTemplateName("DecimalMinus");
                            c.Command(command => { command.Edit().Text(" ").CancelText(" ").UpdateText(" "); }).Title("Edit").Width(90);
                        })
                        //.ToolBar(toolbar =>
                        //{
                        //    toolbar.Create();
                        //    //toolbar.Save().SaveText(" ").Text(" ").CancelText(" ");
                        //})
                        .Editable(editable => editable.Mode(GridEditMode.InLine))
                        .DataSource(dataSource => dataSource
                        .Ajax()
                        .Events(e => e.RequestEnd("onKPITrackerChange(\"Data_#=Id#\")"))
                        //.Events(e => e.RequestStart("requestStartHandler(\"grid\")"))
                        //.Batch(true)
                        .PageSize(3)

                        .Sort(s=>s.Add(p=>p.SortOrder))
                        .Model(m =>
                        {
                            m.Id(p => p.Id);
                            m.Field(e => e.TrackerType).Editable(false);
                        })
                            .Read(read => read.Action("GetKPITrackerList", "PlanActions", new { KPIId = "#= Id #" }))
                            .Create(create => create.Action("InsertKPITracker", "PlanActions", new { KPIId = "#= Id #" }).Type(HttpVerbs.Post))
                            .Update(update => update.Action("UpdateKPITracker", "PlanActions").Type(HttpVerbs.Post))
                        //.Destroy(delete => delete.Action("DeleteKPITracker", "PlanActions"))

                        )
                        //.Pageable()
                        //.Groupable()
                        .ToClientTemplate()
        )
    </div>
</script>

The DecimalMinus is defined in the editorTemplates folder as:-

@model decimal?

@(Html.Kendo().NumericTextBoxFor(m => m)
      .HtmlAttributes(new { style = "width:100%" })
      .Spinners(false)
      .Decimals(2)

)

How can I achieve the desired behaviour?

Thanks

[Konstantin Dikov]

Hi Andrew,

For attaching the handler to the focus event you will have to place the JavaScript code within the editor template itself:

@model decimal?

@(Html.Kendo().NumericTextBoxFor(m => m)
      .HtmlAttributes(new { style = "width:100%" })
      .Spinners(false)
      .Decimals(2)

)

<script>
    $(function () {
        $("input[type=text]").bind("focus", function () {
            var input = $(this);
            clearTimeout(input.data("selectTimeId")); //stop started time out if any

            var selectTimeId = setTimeout(function () {
                input.select();
            });

            input.data("selectTimeId", selectTimeId);
        }).blur(function (e) {
            clearTimeout($(this).data("selectTimeId")); //stop started timeout
        });
    })
</script>

Hope this helps.


Regards,
Konstantin Dikov
Telerik by Progress

[AP]

Thanks for the response. Unfortunately it doesn't work. It causes the textbox to expand, and the others in the grid to disappear. Also the data can't be saved.

I've attached before and after screenshots, showing the behaviour before the addition of the code, and after.

[Konstantin Dikov]

Hi,

On my side, the suggested approach is working correctly. Can you please inspect your browser's console for any JavaScript errors that could be causing the issue?

If the problem persist, you can open a regular support ticket and attach a sample, runnable project replicating the problematic behavior, so we can test it locally.


Best Regards,
Konstantin Dikov
Telerik by Progress

[AP]

Looking at the console, the error:

SyntaxError: missing } after function body
http://localhost:51449/Scripts/kendo/jquery.min.js

Line 1

Is raised when the grid is edited.

[AP]

I will raise a support ticket, as I've been able to create a test project, and replicate the error.

[AP]

I did get a solution, that works in the test project, but still doesn't work in the application. I'm assuming other code is conflicting, and causing the selection to be lost.

In case it helps people, the solution I got was to define the editor template as:-

@model decimal?

@(Html.Kendo().NumericTextBoxFor(m => m)
      .HtmlAttributes(new { style = "width:100%" })
      .Spinners(false)
      .Decimals(2)

)


<script>
    //Code to ensure numeric text box contents are selected when user tabs / selects control
    $(function () {
        $("input[type=text]").bind("focus", function () {
            var input = $(this);
            clearTimeout(input.data("selectTimeId"));
            var selectTimeId = setTimeout(function () {
                input.select();
            });
            input.data("selectTimeId", selectTimeId);
        }).blur(function (e) {
            clearTimeout($(this).data("selectTimeId"));
        });
    })
</script>

[AP]

It appears that including comments in this code will break it, so the above example should be:-

@model decimal?

@(Html.Kendo().NumericTextBoxFor(m => m)
      .HtmlAttributes(new { style = "width:100%" })
      .Spinners(false)
      .Decimals(2)

)


<script>
    $(function () {
        $("input[type=text]").bind("focus", function () {
            var input = $(this);
            clearTimeout(input.data("selectTimeId"));
            var selectTimeId = setTimeout(function () {
                input.select();
            });
            input.data("selectTimeId", selectTimeId);
        }).blur(function (e) {
            clearTimeout($(this).data("selectTimeId"));
        });
    })
</script>

[AP]

The above code needs the comments line removed to work.