Autocomplete in Grid is not Displaying Any Values (razor, asp.net mvc5, visual studio 2013)

[Habeeb]

Hi,

I am developing on Razor based ASP.NET MVC 5 web application using Visual Studio 2013. A partial view has a Kendo UI Grid and inside this grid there is a kendo ui autocomplete widget. Selection made from a dropdownlist populates this grid. The dropdownlist is outside the grid. I tried several ways including this one (http://www.telerik.com/forums/autocomplete-in-grid-column-samples-for-razor) but obviously it still didn't work in my case. 

The issue is that autocomplete is not working as it does not display the values which it suppose to show when typing inside the autocomplete. Below is the grid and autocomplete code in the partial view:

​ @(Html.Kendo().Grid(Model.Risks)
.Name("gridRisks")
.Columns(col =>
{
col.Bound(m => m.RiskID).Title("RiskID").Hidden();
col.Template(m=>{}).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();
})
.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", "Builder")
.Read("Editing_Read", "Grid")
.Update("Editing_Update", "Builder")
.Destroy("Editing_Destroy", "Grid")
)
)

And I put the following javascript code inside an included javascript file:

function dataBound(e) {
this.element.find("script").appendTo(document.body);
}

The included javascript file (which contains the abvove javascript code) is added in the main view like this :

​@section Scripts {
<script src="@Url.Content("~/Scripts/Office/PDFInc.js")"></script>
}

Also importantly, the rendered HTML code for autocomplete is as follow. This rendered HTML already has all the required values (risk 1 through risk 7) which autocomplete should display when typing in the autocomplete space but even then it is not displaying these values which I think rendered correctly. 

<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":"risk 7"});});
</script></td>

I shall be thankful for help in resolution of this issue.

Thanks,

[Petur Subev]

Hello,

Re-appending the scripts to the DOM does not execute them anymore. Instead you can execute the initialization scripts like explained here:

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

Kind Regards,
Petur Subev
Telerik

 

 

[Habeeb]

Hello Petur,

The solution mentioned in your response didn't work. The code example mentioned in the link is for a menu control whereas I have issue with Autocomplete and/or dropdownlist controls inside grid.

Also the solution mentioned in http://www.telerik.com/forums/dropdownlist-client-template-using-razor-mvc is not solving the problem. In this solution I added following javascript :

function onGridDataBound(e)
{ 
       $('#GridName script').appendTo(document.body);
}

and following inside Autocomplete : .Events(ev => ev.Change("onGridDataBound"))

May be you can provide me solution to the problem.

Thanks,

[Petur Subev]

Hello,

Please do not open multiple threads on the same issue, this creates confusion and slows down the support instead of speeding it.

As I covered in my previous post, re-appending the scripts to the DOM do not execute them anymore (this is a change introduced by jQuery several versions ago)

So this will not work anymore:

$('#GridName script').appendTo(document.body);

Instead you should use the approach from documentation:
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

When dataBound occurs:

function onDataBound(e) {
    $(".templateCell").each(function(){
        eval($(this).children("script").last().html());
    });
}

It does not depend on what widget you use - Menu, AutoComplete, Editor or Grid - this solution is universal.

Regards,
Petur Subev
Telerik

 

 

[Habeeb]

I am sorry for inconvenience. However my other post was for a different issue. I needed a proof of concept for both i.e. whether to use Autocomplete widget using EditorTemplate or inline kind of Autocomplete widget using ClientTemplate.