How to bind listview to grid detail template without posting to server

2 posts, 0 answers
  1. sharon
    sharon avatar
    2 posts
    Member since:
    Nov 2015

    Posted 24 Nov 2015 Link to this post

    View

    @(Html.Kendo().Grid(Model)
                    .Name("grid")
                    .Columns(columns =>
                    {
                        columns.Bound(e => e.AssessmentID).Width(110);
                        columns.Bound(e => e.AssessmentName).Width(110);
                    })
                    .Sortable()
                    .Pageable()
                    .Scrollable()
                    .ClientDetailTemplateId("scorelist")
                    .DataSource(dataSource => dataSource
                        .Ajax()
                        .PageSize(10)
                        .ServerOperation(false)
                    )
                    .Events(e => e.DetailInit("detailInit"))
    )

    <script id="listviewTemplate" type="text/kendo-tmpl">
        <div class="StudentResultItem">
            <p>#=ResultValue#</p>
        </div>
    </script>
    <script id="scorelist" type="text/kendo-tmpl">

        @(Html.Kendo().ListView<AssessmentScoreModel>()
                        .Name("Scores_#=AssessmentID#")
                        .TagName("div")
                        .ClientTemplateId("listviewTemplate")
                        .HtmlAttributes("class='StudentResultItems'")
                        .ToClientTemplate()
        )

    </script>

     

    Model:

        public class StudentResultModel
        {
            public int AssessmentID { get; set; }
            public string AssessmentName { get; set; }
            public List<AssessmentScoreModel> ResultItem { get; set; }
        }

        public class AssessmentScoreModel
        {
            public int ResultID { get; set; }
            public string ResultValue { get; set; }
        }

     

     

    When I run it, it can not show listview

  2. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 26 Nov 2015 Link to this post

    Hello sharon,

     

    The problem with the provided code is caused by the fact that the ListView in the detail template is not populated with data. Its DataSource is actually empty. 

     

    Based on the provided code I prepared a sample project that shows how to populate the ListView in the detailInit event. The main idea is to get the DataSource of the ListView and set its data based on the items stored in the gird dataItem. 

     

    Regards,
    Boyan Dimitrov
    Telerik
     
    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