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

Nested ClientTemplates not working

6 Answers 459 Views

Grid

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

Jason asked on 19 Jul 2012, 07:40 PM

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!

6 Answers, 1 is accepted

answered on 19 Jul 2012, 08:59 PM

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>")

answered on 29 Aug 2012, 08:09 PM

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.

answered on 20 Nov 2012, 01:07 AM

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)
                )
        %>