Hello,
I have the following challenge:
I'm using the ListView in an ASP.NET MVC application, where the Kendo UI ListView sits in a Partial View. The items in the list view shall be created using another Partial View (so their content may be different item by item). I've tried to hook up some jQuery code, which alter the elements by using AJAX calls, but it seems that my code runs before the ListView gets rendered. The Action URL is stored in a data attribute of the generated 'div' sections.
Here is the .cshtml code for the partial view:
@model TheModel
@*@{ Layout = null; }*@
<link href="@Url.Content("~/Content/listviewitem.css")" rel="stylesheet" type="text/css" />
<script type="text/x-kendo-tmpl" id="template">
<div class="itemclass" data-actionurl="${ActionUrl}" />
</script>
<div>
@(Html.Kendo().ListView<TheDetailModel>()
.Name("ListView")
.TagName("div")
.ClientTemplateId("template")
.Pageable()
.DataSource(p_DataSource => p_DataSource
.Read(p_Read => p_Read.Action("TheDetailModel_Read", "TheModel")
.Data("additionalData")))
)
</div>
<script type="text/javascript">
function additionalData() {
return { p_TheDetailModelId: "@Model.Id" };
}
jQuery(function () {
jQuery('.itemclass').each(
function (index, element) {
var actionUrl = jQuery(element).attr('data-actionurl');
jQuery.ajax({
url: actionUrl,
success: function (result) {
jQuery(element).html(result);
}
});
}
)
});
</script>
Has anybody an idea how to make this work as expected?
I have the following challenge:
I'm using the ListView in an ASP.NET MVC application, where the Kendo UI ListView sits in a Partial View. The items in the list view shall be created using another Partial View (so their content may be different item by item). I've tried to hook up some jQuery code, which alter the elements by using AJAX calls, but it seems that my code runs before the ListView gets rendered. The Action URL is stored in a data attribute of the generated 'div' sections.
Here is the .cshtml code for the partial view:
@model TheModel
@*@{ Layout = null; }*@
<link href="@Url.Content("~/Content/listviewitem.css")" rel="stylesheet" type="text/css" />
<script type="text/x-kendo-tmpl" id="template">
<div class="itemclass" data-actionurl="${ActionUrl}" />
</script>
<div>
@(Html.Kendo().ListView<TheDetailModel>()
.Name("ListView")
.TagName("div")
.ClientTemplateId("template")
.Pageable()
.DataSource(p_DataSource => p_DataSource
.Read(p_Read => p_Read.Action("TheDetailModel_Read", "TheModel")
.Data("additionalData")))
)
</div>
<script type="text/javascript">
function additionalData() {
return { p_TheDetailModelId: "@Model.Id" };
}
jQuery(function () {
jQuery('.itemclass').each(
function (index, element) {
var actionUrl = jQuery(element).attr('data-actionurl');
jQuery.ajax({
url: actionUrl,
success: function (result) {
jQuery(element).html(result);
}
});
}
)
});
</script>
Has anybody an idea how to make this work as expected?