Hi My code below works fine in IE 10 , however it doesn't appear to work on page load event when using IE 8 or IE9. In brief I have a ListView that I bind manually upon page load and everytime something changes in the AutoComplete control. In IE9 and 8 the only thing that's's not working is being able to populating the ListView upon page load. I'm attempting to read the datasource of ListView to populate it. Look at my comment below in the Java Script section. As soon as I type something in the AutoComplete text. then the listview populates and everything else works just fine. Maybe the sequence of where I have the .read() command should be moved to somewhere else to be able to refresh the ListView. But I'm not sure where. Any Ideas?
@model IEnumerable<HeatSeekerWeb.Models.Document>
<script type="text/x-kendo-tmpl" id="template">
<div class="Document" id="template">
<h3>#:Title#</h3>
<a href="@Url.Content("~/Document/Download?url=#:Path#&fileName=#:FileName#")"><small>#:FileName#</small></a>
<p>#:Description#</p>
<hr />
</div>
</script>
<div id="divSearchDoc">
@(Html.Kendo().AutoComplete()
.Name("acDocuments")
.Filter("startswith")
.HtmlAttributes(new { style = "width:500px" })
.Placeholder("Search Title...")
.DataTextField("Title")
.DataSource(source =>
{
source.Read(
read =>
{
read.Action("Get_Documents", "Document")
.Data("onAdditionalData");
}
)
.ServerFiltering(true);
})
.Events(events => events.DataBound("onDataBound").Select("onSelect").Change("onChange"))
)
@Html.ActionLink("Upload Document", "Create", "Document")
</div>
<div class="documents-sections">
@(Html.Kendo().ListView<HeatSeekerWeb.Models.Document>()
.Name("listView")
.TagName("div")
.ClientTemplateId("template")
.DataSource(dataSource =>
{
dataSource.Read(read => read.Action("Documents_Read", "Document").Data("getSelectedItems"));
dataSource.PageSize(4);
})
.AutoBind(false)
.Pageable()
)
</div>
<script>
$(function () {
// THIS LINE DOESN'T WORK on IE 8 and IE 9. No Problem in IE10
$("#listView").data("kendoListView").dataSource.read();
});
function onAdditionalData() {
return {
text: $("#acDocuments").val()
};
}
function getSelectedItems(e) {
return { text: $("#acDocuments").val() };
}
function onDataBound(e) {
$("#listView").data("kendoListView").dataSource.read();
};
function onChange() {
$("#listView").data("kendoListView").dataSource.read();
}
function onSelect(e) {
//var dataItem = this.dataItem(e.item.index());
$("#listView").data("kendoListView").dataSource.read();
}
</script>
@model IEnumerable<HeatSeekerWeb.Models.Document>
<script type="text/x-kendo-tmpl" id="template">
<div class="Document" id="template">
<h3>#:Title#</h3>
<a href="@Url.Content("~/Document/Download?url=#:Path#&fileName=#:FileName#")"><small>#:FileName#</small></a>
<p>#:Description#</p>
<hr />
</div>
</script>
<div id="divSearchDoc">
@(Html.Kendo().AutoComplete()
.Name("acDocuments")
.Filter("startswith")
.HtmlAttributes(new { style = "width:500px" })
.Placeholder("Search Title...")
.DataTextField("Title")
.DataSource(source =>
{
source.Read(
read =>
{
read.Action("Get_Documents", "Document")
.Data("onAdditionalData");
}
)
.ServerFiltering(true);
})
.Events(events => events.DataBound("onDataBound").Select("onSelect").Change("onChange"))
)
@Html.ActionLink("Upload Document", "Create", "Document")
</div>
<div class="documents-sections">
@(Html.Kendo().ListView<HeatSeekerWeb.Models.Document>()
.Name("listView")
.TagName("div")
.ClientTemplateId("template")
.DataSource(dataSource =>
{
dataSource.Read(read => read.Action("Documents_Read", "Document").Data("getSelectedItems"));
dataSource.PageSize(4);
})
.AutoBind(false)
.Pageable()
)
</div>
<script>
$(function () {
// THIS LINE DOESN'T WORK on IE 8 and IE 9. No Problem in IE10
$("#listView").data("kendoListView").dataSource.read();
});
function onAdditionalData() {
return {
text: $("#acDocuments").val()
};
}
function getSelectedItems(e) {
return { text: $("#acDocuments").val() };
}
function onDataBound(e) {
$("#listView").data("kendoListView").dataSource.read();
};
function onChange() {
$("#listView").data("kendoListView").dataSource.read();
}
function onSelect(e) {
//var dataItem = this.dataItem(e.item.index());
$("#listView").data("kendoListView").dataSource.read();
}
</script>