Grid with Autocomplete is not Displaying Any Value

[Habeeb]

Hi,

This thread is different than my previous post. I am working on asp.net mvc5 razor based web application using visual studio 2013. The partial view has a kendo grid and inside this grid there is an autocomplete widget. The autocomplete should also display default value bound to it when the webpage is loaded. However the autocomplete is neither displaying any default value nor when typed in it . However clicking two times (first click outside the autocomplete box but with in the same grid cell display the default bound value and then second click anywhere on the webpage enable the autocomplete functionality) enable the autocomplete functionality. Here is the code for Grid and Autocomplete:

@(Html.Kendo().Grid(Model.Risks)
.Name("gridRisks")
.Columns(col =>
{
col.Bound(m => m.RiskID).Title("RiskID").Hidden();
col.Bound(m => m.Risk).Title("Risk(s)").ClientTemplate(
Html.Kendo().AutoComplete()
.Filter("contains")
.Name("AutoCompleteRisks#=Risk#")
.DataTextField("Risk")
.BindTo(Model.AllAvailRisks)
.ToClientTemplate()
.ToHtmlString()
);
col.Command(c => c.Destroy());
})
.Pageable()
.ToolBar(toolbar =>
{
toolbar.Create();
})
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Sortable()
.DataSource(d => d
.Ajax()
.Batch(true)
.ServerOperation(false)
.Model(model => {
model.Id(r => r.RiskID);
model.Field(r=>r.Risk).Editable(true);
})
.Create("Editing_Create", "PDFBuilderKIDs")
.Read("Editing_Read", "Grid")
.Update("Editing_Update", "PDFBuilderKIDs")
.Destroy("Editing_Destroy", "Grid")
)
)

Here is the rendered HTML (before those two clicks) for the autocomplete in the grid cell:

<td role="gridcell"><input id="AutoCompleteRisks1" name="AutoCompleteRisks1" type="text"><script>
 jQuery(function(){jQuery("#AutoCompleteRisks1").kendoAutoComplete({"dataSource":[{"RiskID":5,"Risk":"risk 1"},{"RiskID":6,"Risk":"risk 2"},{"RiskID":7,"Risk":"risk 3"},{"RiskID":8,"Risk":"risk 4"},{"RiskID":9,"Risk":"risk 5"},{"RiskID":10,"Risk":"risk 6"}],"dataTextField":"Risk","filter":"contains"});});
</script></td>

Here is the rendered HTML (after those two clicks) for the autocomplete in the grid cell:

<td role="gridcell" class="" data-role="editable"><span tabindex="-1" role="presentation" class="k-widget k-autocomplete k-header k-state-default k-state-hover"><input id="AutoCompleteRisks1" name="AutoCompleteRisks1" type="text" data-role="autocomplete" style="width: 100%;" class="k-input" autocomplete="off" role="textbox" aria-haspopup="true" aria-disabled="false" aria-readonly="false" aria-owns="AutoCompleteRisks1_listbox" aria-autocomplete="list"><span class="k-icon k-loading" style="display:none"></span></span><script>
 jQuery(function(){jQuery("#AutoCompleteRisks1").kendoAutoComplete({"dataSource":[{"RiskID":5,"Risk":"risk 1"},{"RiskID":6,"Risk":"risk 2"},{"RiskID":7,"Risk":"risk 3"},{"RiskID":8,"Risk":"risk 4"},{"RiskID":9,"Risk":"risk 5"},{"RiskID":10,"Risk":"risk 6"}],"dataTextField":"Risk","filter":"contains"});});
</script></td>


Thanks and will be obliged for resolution of this strange issue. I have also attached a screenshot.

[Kiril Nikolov]

Hello,

The problem comes from the fact that widgets used inside ClientTemplate are not initialized automatically when the Grid is build. Therefore you actually do not have a widget, but an empty input element rendered on the screen. You need to manually initialize the widget in order to correctly use its functionality, you can do the same using data attributes as explained here:

http://docs.telerik.com/kendo-ui/getting-started/data-attribute-initialization

I have also prepared a small test example demonstrating this functionality, that you can find attached.

Regards,
Kiril Nikolov
Telerik

 

 

[Habeeb]

Hi Kiril,

The attached example is useful but my issue is different. However you used autocomplete inside ClientTemplate in following way:

"<input data-role='autocomplete' data-source='data' data-filter='startswith' data-placeholder='Select country...'/>"

Whereas I need to use autocomplete inside ClientTemplate in following way:

Html.Kendo().AutoComplete().BindTo(Model.AllAvailRisks).Name("AutoCompleteRisks_#=Risk#").DataTextField("Risk").ToClientTemplate().ToHtmlString()

The reasons are:
Need to bind autocomplete widget with serverside.
Need to set DataTextField property
Need to create dynamic names using  AutoCompleteRisks_#=Risk#

Is there a more specific example available for this issue?

Thanks a lot.

[Kiril Nikolov]

Hi,

If you want to use MVC wrappers syntax then you can follow the pattern explained in the following documentation article:

http://docs.telerik.com/kendo-ui/getting-started/using-kendo-with/aspnet-mvc/helpers/grid/faq#how-do-i-use-a-kendo-ui-widget-inside-a-grid-client-column-template

The example uses Kendo UI Menu however it is absolutely the same for all the widgets.

Regards,
Kiril Nikolov
Telerik