CODEWITHSUNDEEP
javascriptmodel-view-controllerkendo-ui
Corey Witherow
Corey Witherow

Reputation: 2472

kendo grid select cell data on focus

Is there a way to highlight (select all the text) in a cell inside a Kendo Grid when focus is on the cell? When I tab or click into the columns I would like the text in that cell to auto highlight. Thank you in advance for any assistance.

I have the below code:

@(Html.Kendo().Grid<ExerciseBreakdownViewModel>()
          .Name(string.Format("Grid"))
          .Columns(columns =>
          {
              columns.Bound(p => p.Id).Visible(false);
              columns.Bound(p => p.PersonnelName).Width(120);
              columns.Bound(p => p.NumberOfTeams).Width(120);
              columns.Bound(p => p.TeamMembers).Width(110);
              columns.Bound(p => p.Vehicles).Width(80);
              columns.Bound(p => p.Brief).Format("{0:HH:mm}").EditorTemplateName("BriefTimePicker").Width(80);
              columns.Bound(p => p.KickOff).Format("{0:HH:mm}").EditorTemplateName("KickoffTimePicker").Width(80);
              columns.Bound(p => p.Debrief).Format("{0:HH:mm}").EditorTemplateName("DebriefTimePicker").Width(80);
          })
          .Editable(editable => editable.Mode(GridEditMode.InCell))
          .HtmlAttributes(new { style = "height:400px;" })
          .Navigatable()
          .Scrollable()
          .DataSource(dataSource => dataSource
              .Ajax()
              .PageSize(20)
              .Events(events => events.Error("error_handler"))
              .Model(model =>
              {
                  model.Id(p => p.Id);
                  model.Field(p => p.PersonnelName).Editable(false);
                  model.Field(p => p.NumberOfTeams);
                  model.Field(p => p.TeamMembers);
                  model.Field(p => p.Vehicles);
                  model.Field(p => p.Brief);
                  model.Field(p => p.KickOff);
                  model.Field(p => p.Debrief);
              })
             .Read("Personnel_Read", "Schedule", Model)
          )
    )

Upvotes: 2

Views: 4210

Answers (1)

CSharper
CSharper

Reputation: 5580

Add an Edit event to your grid. .Events(x => x.Edit("edit"))

function edit(e) {

    var input = e.container.find("input");      
        input.select();       
}

Upvotes: 7

Related Questions