Select contents on field select / tab

9 posts, 0 answers
  1. AP
    AP avatar
    187 posts
    Member since:
    Apr 2010

    Posted 19 Aug Link to this post

    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

  2. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1798 posts

    Posted 22 Aug Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. AP
    AP avatar
    187 posts
    Member since:
    Apr 2010

    Posted 23 Aug in reply to Konstantin Dikov Link to this post

    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.

  5. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1798 posts

    Posted 23 Aug Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  6. AP
    AP avatar
    187 posts
    Member since:
    Apr 2010

    Posted 23 Aug in reply to Konstantin Dikov Link to this post

    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.

  7. AP
    AP avatar
    187 posts
    Member since:
    Apr 2010

    Posted 24 Aug in reply to AP Link to this post

    I will raise a support ticket, as I've been able to create a test project, and replicate the error.
  8. AP
    AP avatar
    187 posts
    Member since:
    Apr 2010

    Posted 25 Aug in reply to AP Link to this post

    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>

  9. AP
    AP avatar
    187 posts
    Member since:
    Apr 2010

    Posted 25 Aug Link to this post

    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>

  10. AP
    AP avatar
    187 posts
    Member since:
    Apr 2010

    Posted 25 Aug in reply to AP Link to this post

    The above code needs the comments line removed to work.
Back to Top
UI for ASP.NET MVC is VS 2017 Ready