Nested ClientTemplates not working

7 posts, 0 answers
  1. Jason
    Jason avatar
    10 posts
    Member since:
    Jul 2012

    Posted 19 Jul 2012 Link to this post

    I can't seem to get nested templates to work.  Perhaps this isn't even supported?  I am seeing the following in console.  
    Uncaught ReferenceError: BotName is not defined 
    I believe this is related to the last file shown, _BotGrid.  This grid should display a link to the details page for the Bot, however, the ClientTemplate("#=BotName#") does not appear to be working.  My guess is the templating engine is looking for BotName to come from the parent grids model, and not from the Bot Grids model.  Is there a work around or a way to make this work?

    Files

    TopLevelGrid.cshtml
    @model System.Collections.Generic.List<Subscriber>

    @(Html.Kendo().Grid<Subscriber>()
        .Name(ViewData["Name"].ToString())
        .ClientDetailTemplateId("gridDetailsTemplate")
        .DataSource(dataSource =>
            dataSource
            .Ajax()
            .Sort(sortOrder => sortOrder.Add(s => s.Name).Ascending())
            .PageSize(20)
            .Read(
                read => read.Action("_Grid", "Subscribers", new { Area = "Admin" })
            )
        )
        .Columns(columns =>
        {
            columns
                .Bound(s => s.Name)
                .ClientTemplate("<a href=\"\\#/Detail/#=Id#\">#=Name#</a>")
                .Title("Subscriber")
                .Width("100%");
            columns
                .Bound(s => s.Active)
                .Filterable(false)
                .HeaderHtmlAttributes(new { style = "text-align:center; " })
                .HtmlAttributes(new { style = "text-align:center; " })
                .ClientTemplate("<input type=\"checkbox\" #=Active ? checked='checked' : '' # disabled=\"disabled\" />");
        })
        .Filterable()
        .Sortable()
        .Pageable()
    )

    @Html.Partial("_GridDetail")


    _GridDetail.cshtml partial view -- This part seems to work fine if I remove the _BotGrid partial view
    <script id="gridDetailsTemplate" type="text/kendo-tmpl">
        <ul id="subscriber-tabs-#=Id#" class="nav nav-tabs">
            <li class="active"><a href="\\#subscriber-bots-#=Id#" data-toggle="tab">Bots</a></li>
            <li class=""><a href="\\#subscriber-markets-#=Id#" data-toggle="tab">Markets</a></li>
            <li class=""><a href="\\#subscriber-report-scheduling-#=Id#" data-toggle="tab">Online Report Schedules</a></li>      
        </ul> 
        <div id="subscriber-tab-content-#=Id#" class="tab-content">
            <div class="tab-pane fade active in"  id="subscriber-bots-#=Id#"> 
                @Html.Partial("_BotGrid", new ViewDataDictionary { { "SubscriberID", "#=Id#" } })
            </div>
        </div>
    </script>


    _BotGrid.cshtml partial view
    @(Html.Kendo().Grid<AMS.DTO.Bot>()
        .Name("Bots-" + ViewData["SubscriberID"].ToString())
        .DataSource(dataSource => dataSource
            .Ajax()
            .Sort(sortOrder => sortOrder.Add(b => b.BotName).Ascending())
            .Model(model => model.Field(m => m.BotName))
            .PageSize(20)
            .Read(
                read => read.Action("_BotGrid", "Subscribers", new { Area = "Admin", id = ViewData["SubscriberID"].ToString() })
            )
        )
        .Columns(columns =>
            {
                columns.Bound(b => b.BotName)
                    .ClientTemplate("#=BotName#")
                    .Title("Name");
                columns
                    .Bound(b => b.CreateDate)
                    .Filterable(false)
                    .Format("{0:MM/dd/yyyy}")
                    .Title("Created");
            }
        )
        .Sortable()
        .Pageable()
        .Filterable()
        .Scrollable(scrolling =>
            scrolling.Height(200)
        )     
        .ToClientTemplate()
    )

    Thanks!
  2. Jason
    Jason avatar
    10 posts
    Member since:
    Jul 2012

    Posted 19 Jul 2012 Link to this post

    I was able to get a bit further, but the problem appears to be with having a hashtag in my URLs.  

    Ultimately, I am trying to do the following in the ClientTemplate of my BotGrid.

    .ClientTemplate("<a href=\"/Admin/Subscribers/%23Detail/\">\\#=BotName\\#</a>")

    I found that adding \\ before my #=BotName# fixed the issue with the templating engine not finding my fields.  Now I need to get a hashed URL generated.  /Admin/Subscribers/#Detail.  I have tried adding escapes, etc. to no avail.  Any advice?


    EDITED: Of course, the obvious answer was to add %23, instead of # for the URL.  Hope this helps someone else.

    Final answer - .ClientTemplate("<a href=\"/Admin/Subscribers/%23Detail/\">\\#=BotName\\#</a>") 
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Jason
    Jason avatar
    10 posts
    Member since:
    Jul 2012

    Posted 23 Jul 2012 Link to this post

    I would just like to add, that this doesn't really fix the issue.  There are cases where the URL can't be found, and the %23 character is not interpreted as #.  Perhaps the Kendo team has some advice here?  I'm trying to get ClientTemplates to work for an Ajax loaded Details grid, where one of my columns has the following URL /Admin/Subscribers/#Detail/5.

    Thanks!
  5. Dan
    Dan avatar
    6 posts
    Member since:
    Jul 2012

    Posted 06 Aug 2012 Link to this post

    I have the same issue as the poster. Can we get a response from Kendo?

    Thanks.
  6. Jark Monster
    Jark Monster avatar
    46 posts
    Member since:
    Jan 2012

    Posted 29 Aug 2012 Link to this post

    I'm also experiencing this issue.  I would love a response from Kendo.

    I have a feeling that the issue is caused by a lack of support for nested object properties (same as in the grid).

    In my case, my grid is using something along these lines:

    columns.Bound(i => i.FreightClass)

    However, I need my detailTemplate to utilize an object one level lower (e.g. item.HazmatDetails.HazmatClass):

    <script id="ItemDetails" type="text/kendo-tmpl">
        @(Html.Kendo().TabStrip()
            .Name("Details")
            .SelectedIndex(0)
            .Items(items =>
            {
                items.Add().Text("Hazmat").Content(@<div>     
                    <table id="HazmatForm">
                        <tr>
                            <td><label>Hazmat Class</label>#= HazmatDetails.HazmatClass #</td>
                        </tr>
                    </table>
                </div>);
            })
            .ToClientTemplate()
        
    </script>

    The object's structure might have too much depth.  It'd be great if we could hear from Kendo on this and whether this is intentional.  Regardless, I'd also like to hear if this is changing in a release soon.
  7. Sunny
    Sunny avatar
    18 posts
    Member since:
    Jan 2007

    Posted 19 Nov 2012 Link to this post

    The same error is happening to me, did somebody find the problem?

    <%: Html.Kendo().Grid(Model.BankAccountViewModelList)
                .Name("BankAccounts")
                .Columns(columns =>
                {
                    columns.Bound(p => p.AcountNumber).ClientTemplate("#= AcountNumber #" +
                       "<input type='hidden' name='BankAccountViewModelList[#= index(data)#].AcountNumber' value='#= AcountNumber #' />"
                     );
                    columns.Bound(p => p.BankAccountType).ClientTemplate("#= BankAccountType.Name #");
                    columns.Command(command => command.Destroy()).Width(100);
                })
               .ToolBar(toolbar => toolbar.Create().Text("Add new Bank Account"))
                .Editable(editable => editable.Mode(GridEditMode.InCell).CreateAt(GridInsertRowPosition.Bottom))
                .Scrollable()
                .DataSource(dataSource => dataSource
                   .Ajax()
                   .Batch(true)
              .Model(model =>
              {
                  model.Id(p => p.Id);
                  model.Field(p => p.Id).Editable(false);
              })
            .ServerOperation(false)
                    )
            %>
  8. Mike
    Mike avatar
    16 posts
    Member since:
    Feb 2014

    Posted 06 Oct 2014 Link to this post

    Not sure if this helps but I had a similar issue with using hashtags in my url: this worked for me. Hope it helps.

    col.Bound(c => c.SeqId).ClientTemplate("<a href='" +
    Url.Action("Replenish", "StockPile") +
    "/" + "\\" + "#= SeqId" + "\\#" + "'" +
    "class= 'k-button k-button-icontext m-grid-edit'><span class ='k-icon k-add'></span>Add Inventory</a>" +
    "<a href='" +
    Url.Action("Edit", "StockPile") +
    "/" + "\\" + "#= SeqId\\" + "#" + "'" +
    "class= 'k-button k-button-icontext'><span class ='k-icon k-edit'></span>Edit</a>").Sortable(false).Title("").Width(150);
Back to Top
UI for ASP.NET MVC is VS 2017 Ready