The following is my html on my view.
I have the following on my html 1)Text Box (for user to enter key words) 2)Apply Button :which on click gets the text typed inside the text box and other filters (which is not shown) here, makes an ajax call to bind data to the grid as shown.
My problem :
On the kendo grid , one of my column is a template column as shown below. The editor template is defined for that column as seen below.Am trying to suggest to the user suggestions/suggested tags as and when he/she types inside the text area (which is inside the grid).
for e.g.when the user types say A;B;C as when a semicolon is entered I would like to suggest tags for;in this case A and then B and so on.. In order to get this done I would like to add a text changed event-like event to the text area in editor template. Is it possible? If so may i know how to go about it?
<input type=text id=tb_Search />
<input type=button value=Apply style=width: 140px onclick=ApplyFiltersToFetch() />
@(Html.Kendo().Grid<CurationModuleV3.Models.Model1>()
.Name(TGrid).Pageable
().EnableCustomBinding(true)
.DataSource(dataSource =>
{
dataSource.Ajax()
.Update(update => update.Action(RefreshGrid, Home))
.PageSize(10)
.Model(model =>
{
model.Id(t =>t.UserID);
}
).Batch(true).ServerOperation(false);
})
.Columns(columns =>
{
columns.Bound(t => t.UserID).Visible(false);
columns.Bound(t => t.Tags).Title(Tags).EditorTemplateName(TagColumnTemplate).ClientTemplate(<pre name='Tags' id='#=UserID#' style='height: 60px;overflow: auto;margin-top: 0px;margin-bottom: 0px;'>#= Tags#</pre>).Width(180).HtmlAttributes(new { style = padding:0;top:0; });
}).ToolBar(toolbar =>
{
toolbar.Save().SaveText(Save all changes);
})
.Editable(editable => editable.Mode(GridEditMode.InCell)).HtmlAttributes(new { style = height:450px; }).Scrollable().Sortable().ClientDetailTemplateId(templateForInnerUserGrid))
<script>
function ApplyFiltersToFetch() {
var searchTextValue;
var grid = $('#TGrid').data(kendoGrid);
searchTextValue = document.getElementById(tb_Search).value;
if (!(searchTextValue == )){ $('#TGrid').show();
$.ajax({
url: '@Url.Action(FetchT, Home)',
data: { searchText: searchTextValue},
type: 'POST',
dataType: json,
success: function (result) {
grid.dataSource.data(result);
grid.refresh();
grid.dataSource.page(1);
},
error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.status);
alert(thrownError);
}
});}
</script>
/*****Editor Template*********/
@model string
@Html.TextAreaFor(t => t, new {rows = 4, wrap = hard,style = text-overflow:ellipsis; display:block; width:94%; height:100%;font-family:Segoe UI , Verdana, Helvetica, Sans-Serif;font-size: 0.85em; }
)
EDIT:
May be i was not clear enough. Am not trying to bind any event for my search text box here. I just had my code to show how I bind my data to my grid. I do not want en event for my search text box, however I would like to have an event handler binded to my text area inside the grid (that shows up on edit). On typing inside my grid I would like to suggest to users tags.
