Kendo grid column - show text when editing - kendo-grid

Question

I have a kendo grid in a page
I need to show a text when the user start editing a specified column from the grid.
Here is the grid:
#(Html.Kendo().Grid<GGISServices.Models.SilviPrio.GenerateDocumentViewModel>()
.Name("grid")
.AutoBind(false)
.Columns(columns =>
{ ...
columns.Bound(c => c.TreeQ4)
.HeaderTemplate("<a class='k-link' href=''>"+ LanguageService.Instance.Translate("Enum_TreeGroup_4") +"<br><span class='subtitle'>" + LanguageService.Instance.Translate("Trees_MeasurementUnits") + "</span></a>")
.HtmlAttributes(new { #class = "tree-q4 pvrf-data tree-column" }).Sortable(true)
.Filterable(f => f.Multi(true).DataSource(ds => ds.Read(r => r.Action("GetFilterData", "Document", new { Area = GGISWeb.AreaModules.SilviPrio }).Type(HttpVerbs.Post).Data("{ field: 'TreeQ4', fieldtype: 'decimal' }"))));
columns.Bound(c => c.TreeQ1)
.HeaderTemplate("<a class='k-link' href=''>" + LanguageService.Instance.Translate("Enum_TreeGroup_1") + "<br><span class='subtitle'>" + LanguageService.Instance.Translate("Trees_MeasurementUnits") + "</span></a>")
.HtmlAttributes(new { #class = "tree-q1 pvrf-data tree-column" }).Sortable(true)
.Filterable(f => f.Multi(true).DataSource(ds => ds.Read(r => r.Action("GetFilterData", "Document", new { Area = GGISWeb.AreaModules.SilviPrio }).Type(HttpVerbs.Post).Data("{ field: 'TreeQ1', fieldtype: 'decimal' }"))));
columns.Bound(c => c.TreeQ2)
.HeaderTemplate("<a class='k-link' href=''>" + LanguageService.Instance.Translate("Enum_TreeGroup_2") + "<br><span class='subtitle'>" + LanguageService.Instance.Translate("Trees_MeasurementUnits") + "</span></a>")
.HtmlAttributes(new { #class = "tree-q2 pvrf-data tree-column" }).Sortable(true)
.Filterable(f => f.Multi(true).DataSource(ds => ds.Read(r => r.Action("GetFilterData", "Document", new { Area = GGISWeb.AreaModules.SilviPrio }).Type(HttpVerbs.Post).Data("{ field: 'TreeQ2', fieldtype: 'decimal' }"))));
columns.Bound(c => c.TreeQ5)
.HeaderTemplate("<a class='k-link' href=''>" + LanguageService.Instance.Translate("Enum_TreeGroup_5") + "<br><span class='subtitle'>" + LanguageService.Instance.Translate("Trees_MeasurementUnits") + "</span></a>")
.HtmlAttributes(new { #class = "tree-q5 pvrf-data tree-column" }).Sortable(true)
.Filterable(f => f.Multi(true).DataSource(ds => ds.Read(r => r.Action("GetFilterData", "Document", new { Area = GGISWeb.AreaModules.SilviPrio }).Type(HttpVerbs.Post).Data("{ field: 'TreeQ5', fieldtype: 'decimal' }"))));
columns.Bound(c => c.TreeQ3)
.HeaderTemplate("<a class='k-link' href=''>" + LanguageService.Instance.Translate("Enum_TreeGroup_3") + "<br><span class='subtitle'>" + LanguageService.Instance.Translate("Trees_MeasurementUnits") + "</span></a>")
.HtmlAttributes(new { #class = "tree-q3 pvrf-data tree-column" }).Sortable(true)
.Filterable(f => f.Multi(true).DataSource(ds => ds.Read(r => r.Action("GetFilterData", "Document", new { Area = GGISWeb.AreaModules.SilviPrio }).Type(HttpVerbs.Post).Data("{ field: 'TreeQ3', fieldtype: 'decimal' }"))));
columns
.Bound(c => c.SilviPrioId)
.ClientTemplate(
"#= actionDetails(data) #"
)
.Title(LanguageService.Instance.Translate("GridLabel_Action"))
.Filterable(false)
.Sortable(false)
.HtmlAttributes(new { #class = "action-column" });
})
.ToolBar(toolbar =>
{
toolbar.Save();
})
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Sortable()
.Filterable()
//.Selectable(selection => selection.Enabled(true))
.Selectable(selection => selection.Mode(GridSelectionMode.Single))
//.Events(e => e.DataBound("SaveState").ExcelExport("ShowLoading"))
.Pageable(pageable => pageable
.Refresh(true)
.Info(true)
.PageSizes(new int[] { 5, 10, 25, 50, 100, 1000 })
.ButtonCount(5)
)
.Events(events => events
.Change("onChange")
.DataBound("onDataBound")
.DataBinding("onDataBounding")
.Edit("onEditing")
.SaveChanges("onSavingChanges")
)
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.Events(events => events
.Error("error_handler")
.RequestEnd("request_end_handler")
)
.Model( model =>
{
model.Id(p => p.SilviPrioId);
model.Field(p => p.Region).Editable(false);
model.Field(p => p.CostCenter).Editable(false);
model.Field(p => p.UP).Editable(false);
model.Field(p => p.UA).Editable(false);
model.Field(p => p.MeasurementUnit).Editable(false);
model.Field(p => p.PlannedQuantity).Editable(false);
model.Field(p => p.PlannedUnitPrice).Editable(false);
})
.Read(read => read.Action("GetData", "Document", new { Area = GGISWeb.AreaModules.SilviPrio }))
.Update(update => update.Action("Editing_Update", "Document", new { Area = GGISWeb.AreaModules.SilviPrio }).Data("additionalUpdateInfo"))
.PageSize(25)
)
.Resizable(resize => resize.Columns(true))
)
I need to show a text, something like this,
enter image description here
but immediately when the user starts editing the fields TreeQ4, TreeQ1
I have searched on the net, and I have founded something with the HtmlAttributes(title, but it is not working like this.
Can you please advise how can I resolve?

Answer 1

Use the kendo grid edit event and then append the text to a html element in the event function.