ASP MVC Grid. ClientTemplate parameter is undefined.

4 posts, 0 answers
  1. Pavel
    Pavel avatar
    2 posts
    Member since:
    Jul 2017

    Posted 04 Aug 2017 Link to this post

    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?

  2. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    1082 posts

    Posted 07 Aug 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Pavel
    Pavel avatar
    2 posts
    Member since:
    Jul 2017

    Posted 08 Aug 2017 in reply to Alex Hajigeorgieva Link to this post

    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.
  4. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    1082 posts

    Posted 09 Aug 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top