Change HTML in ListView elements created using a template with AJAX in ASP.NET MVC 4 application

2 posts, 1 answers
  1. Matyas
    Matyas avatar
    1 posts
    Member since:
    Dec 2012

    Posted 27 Feb 2013 Link to this post

    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?
  2. Answer
    Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 01 Mar 2013 Link to this post

    Hello Matyas,

    The ListView is bound via Ajax so the items will be rendered after the data is received from the server. In order to execute your logic after the item elements have been added you should use the dataBound event.

    Regards,
    Daniel
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
Back to Top