This is a migrated thread and some comments may be shown as answers.

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

1 Answer 191 Views
ListView
This is a migrated thread and some comments may be shown as answers.
sharon
Top achievements
Rank 1
sharon asked on 24 Nov 2015, 06:02 AM

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

1 Answer, 1 is accepted

Sort by
0
Boyan Dimitrov
Telerik team
answered on 26 Nov 2015, 08:38 AM

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!
 
Tags
ListView
Asked by
sharon
Top achievements
Rank 1
Answers by
Boyan Dimitrov
Telerik team
Share this question
or