ASP MVC Grid. ClientTemplate parameter is undefined.

[Pavel]

Hi! I'm trying to display List of items DecimalPriceList. I have function:

<script type="text/javascript">
    function iterate(object) {
        debugger;
        var html = '<ul>';
        if (object !== null && object.length > 0) {
            object.forEach(function (data) {
                html += '<li>' + data + '</li>';
            });
        } else {
            html += '<li>-</li>';
        }
        html += '</ul>';
        return html;
    }
</script>

And Grid, which displaying as ClientDetailTemplate:

<script id="SelectionsTemplate" type="text/kendo-tmpl">
    @(Html.Kendo().Grid
    <BetInAction.Backend.Models.FeedSelectionViewModel>
        ()
        .Name("grid_#=MarketId#") // template expression, to be evaluated in the master context
        .Columns(columns =>
        {
            columns.Bound(o => o.MarketId).Width(50);
            columns.Bound(o => o.SelectionId).Width(110);
            columns.Bound(o => o.SelectionName).Width(350);
            columns.Bound(o => o.SelectionTypeId).Width(110);
            columns.Bound(o => o.CreatedDate).Width(110);
            columns.Bound(o => o.DecimalPriceList).ClientTemplate("#= iterate(DecimalPriceList)#");
        })
        .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(10)
        .Read(read => read.Action("HierarchyBinding_Selections", "FeedMapping", new { eventId = "#=EventId#", marketId = "#=MarketId#" }))
        )
        .Pageable()
        .Sortable()
        .ToClientTemplate()
    )
</script>

I'm getting an error like on picture.

What should I do?

[Alex Hajigeorgieva]

Hello Pavel,

The client template will pass the whole dataItem to the function. Something like the below should work for you:

columns.Bound(o => o.DecimalPriceList).ClientTemplate("#= iterate(data)#");

<script type="text/javascript">
  function iterate(data) {
   var decimalPriceList = data.DecimalPriceList;
   var html = '<ul>';
   if (decimalPriceList && decimalPriceList .length) {
   decimalPriceList.forEach(function (item) {
    html += '<li>' + item+ '</li>';
   });
   } else {
   html += '<li>-</li>';
  }
  html += '</ul>';
   return html;
}
</script>

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[Pavel]

Hi, Alex!
Thank you for your answer, but it's working not well for me. "data" object contains model of parent Grid, which using this grid as template.
Look at attach picture.

[Alex Hajigeorgieva]

Hi Pavel,

Both the ClientTemplate and the ClientDetailTemplate have the dataItem as data. The provided log of the data in the console shows that the DecimalPriceList is not part of the dataItem. 

I have prepared a demo which addresses both scenarios possible

- a detail template from the internal array (own property of the dataItem) 
- a detail template from an external array 

https://dojo.telerik.com/aQixe

Please let me know what you think and how I can help you further.

Regards,
Alex Hajigeorgieva
Progress Telerik