This is a migrated thread and some comments may be shown as answers.
Select contents on field select / tab
8 Answers 43 Views
This is a migrated thread and some comments may be shown as answers.
AP
Top achievements
Rank 1
AP asked on 19 Aug 2016, 08:57 AM

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

8 Answers, 1 is accepted

Sort by
0
Konstantin Dikov
Telerik team
answered on 22 Aug 2016, 01:57 PM
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
0
AP
Top achievements
Rank 1
answered on 23 Aug 2016, 07:51 AM

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.

0
Konstantin Dikov
Telerik team
answered on 23 Aug 2016, 10:39 AM
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
0
AP
Top achievements
Rank 1
answered on 23 Aug 2016, 02:09 PM

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.

0
AP
Top achievements
Rank 1
answered on 24 Aug 2016, 09:02 AM
I will raise a support ticket, as I've been able to create a test project, and replicate the error.
0
AP
Top achievements
Rank 1
answered on 25 Aug 2016, 07:51 AM

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>

0
AP
Top achievements
Rank 1
answered on 25 Aug 2016, 08:20 AM

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>

0
AP
Top achievements
Rank 1
answered on 25 Aug 2016, 08:23 AM
The above code needs the comments line removed to work.
Asked by
AP
Top achievements
Rank 1
Answers by
Konstantin Dikov
Telerik team
AP
Top achievements
Rank 1
Share this question
or