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

Nested ClientTemplates not working

6 Answers 423 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Jason
Top achievements
Rank 1
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

Sort by
0
Jason
Top achievements
Rank 1
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>") 
0
Jason
Top achievements
Rank 1
answered on 23 Jul 2012, 04:34 PM
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!
0
Dan
Top achievements
Rank 1
answered on 06 Aug 2012, 04:05 PM
I have the same issue as the poster. Can we get a response from Kendo?

Thanks.
0
Jark Monster
Top achievements
Rank 1
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.
0
Najah
Top achievements
Rank 1
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)
                )
        %>
0
Mike
Top achievements
Rank 1
answered on 06 Oct 2014, 04:51 PM
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);
Tags
Grid
Asked by
Jason
Top achievements
Rank 1
Answers by
Jason
Top achievements
Rank 1
Dan
Top achievements
Rank 1
Jark Monster
Top achievements
Rank 1
Najah
Top achievements
Rank 1
Mike
Top achievements
Rank 1
Share this question
or