This is a migrated thread and some comments may be shown as answers.

Grid with Autocomplete is not Displaying Any Value

3 Answers 311 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Habeeb
Top achievements
Rank 1
Habeeb asked on 23 Jun 2014, 07:03 PM
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.

3 Answers, 1 is accepted

Sort by
0
Kiril Nikolov
Telerik team
answered on 25 Jun 2014, 02:35 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Habeeb
Top achievements
Rank 1
answered on 26 Jun 2014, 12:32 AM
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.

0
Kiril Nikolov
Telerik team
answered on 26 Jun 2014, 02:56 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
Habeeb
Top achievements
Rank 1
Answers by
Kiril Nikolov
Telerik team
Habeeb
Top achievements
Rank 1
Share this question
or