Conditional client template in Razor hierarchical grid

[Oana]

Hello,

I have a grid like the one from your demo: http://demos.telerik.com/kendo-ui/grid/hierarchy
<div>
        @{
            Html.Kendo().Grid<TicketModel>()
                .Name("ticketsList")
                .HtmlAttributes(new { @class = "ticketsGrid" })
                .Columns(columns =>
                {
                    columns.Bound(m => m.TicketID).Visible(false);
                    columns.Bound(m => m.TicketNumber);
                    columns.Bound(m => m.TicketTypeName);
                    columns.Bound(m => m.Name);
                    columns.Bound(m => m.Status);
                    columns.Bound(m => m.Severity);
                    columns.Bound(m => m.DaysOpened);
                    columns.Bound(m => m.DateCreated).ClientTemplate("#= kendo.format('{0:d}', kendo.parseDate(DateCreated))#");
                    columns.Bound(m => m.TicketNumber).ClientTemplate("<img title='Add comment' src='" + Url.Content("~/Images/icon_edit.png") + "' onclick=\"location.href='" + Url.Action("AddTicket", "Support", new { ticketId = "#= TicketID #" }) + "'\"/>&nbsp;&nbsp;&nbsp;").Title("").Sortable(false).HtmlAttributes(new { @class = "action-buttons" });
                })
.....
        }
    </div>

    <script id="template" type="text/kendo-tmpl">
    @(Html.Kendo().Grid<ActionModel>()
            .Name("ticketsList_#=TicketID#")
            .Columns(columns =>
            {
                columns.Bound(o => o.ActionID);
                columns.Bound(o => o.Description);
                columns.Bound(o => o.Name);
                columns.Bound(o => o.Status);
                columns.Bound(o => o.AttachmentId).ClientTemplate(
                    "# if (o.AttachmentId != null) { #" +
                        "<img title='Download Attachment' src='" + Url.Content("~/Images/Attach.png") + "' onclick=\"location.href='" + Url.Action("AddTicket", "Support", new { ticketId = "#= o.AttachmentId #" }) + "'/>" +
                        "# } #").Title("").Sortable(false).HtmlAttributes(new { @class = "action-buttons" });
            })
......
    )
    </script>
The conditional from the 2nd grid is not working.. if I use the following condition "# if (AttachmentId != null) { #"  i get a javascript error in page that AttachmentId is not defined.

Could you help me please with this one?

Thank you,
Oana

[Dimo]

Hi Oana,

The "o" parameter is available on the server and can be used in server-side expressions, but o.AttachmentId makes no sense inside the Kendo UI template, which is parsed and executed on the client.

Using the following syntax...

"# if (AttachmentId != null) { #"

is "almost correct", however, you should keep in mind that this represents a nested Kendo UI template inside the existing detail template. Hash symbols inside nested templates must be escaped, so that the outer template ignores them. This is explained in the documentation.

http://docs.telerik.com/kendo-ui/framework/templates/overview#escaping-hash-literals

Regards,
Dimo
Telerik

 

 

[Oana]

You are right, the syntax is like this:

 "\\# if (AttachmentId != null) { \\#" +
....
"\\# } \\#"

Thank you,
Oana

[TroyR]

I'm setting a column in my child/detail grid like this:

What exactly is invalid? Where's my mistake?

<code>columns.Bound(c => c.PaymentType)
.Title("Payment")
.ClientTemplate(
"\\# if(PaymentType != \"Cash\" && PaymentType != \"Check\") { \\# \\#=PaymentType\\# \\# } " +
"else if(Status == \"Active\" && ReceivedPayment == true) { \\# \\#=PaymentType\\# <span class=\"glyphicon glyphicon-ok-sign\" style=\"color:\\\\#5cb85c;\"></span> \\# } " +
"else if(Status == \"Active\" && ReceivedPayment == false) { \\# \\#=PaymentType\\# <span class=\"glyphicon glyphicon-exclamation-sign\" style=\"color:\\\\#F6A600;\"></span> \\# } " +
"else if(Status != \"Active\" && ReceivedPayment == true) { \\# \\#=PaymentType\\# <span class=\"glyphicon glyphicon-ok-sign\"></span> \\# } " +
"else { \\# \\#=PaymentType\\# <span class=\"glyphicon glyphicon-exclamation-sign\"></span> \\# } \\# ")
.Width(175);</code>

[TroyR]

Here's what Chrome's Console outputs as the invalid template:

# if(PaymentType != "Cash" && PaymentType != "Check") { # #=PaymentType# # } else if(Status == "Active" && ReceivedPayment == true) { # #=PaymentType# <span class="glyphicon glyphicon-ok-sign" style="color:#5cb85c;"></span> # } else if(Status == "Active" && ReceivedPayment == false) { # #=PaymentType# <span class="glyphicon glyphicon-exclamation-sign" style="color:#F6A600;"></span> # } else if(Status != "Active" && ReceivedPayment == true) { # #=PaymentType# <span class="glyphicon glyphicon-ok-sign"></span> # } else { # #=PaymentType# <span class="glyphicon glyphicon-exclamation-sign"></span> # } # 

[TroyR]

I've resolved this invalid template by replacing the style attribute with a class assigned to those colors.  So, my issue was obviously in escaping those hex values.

How could I have done that correctly?

[Dimo]

Hi Troy,

The provided information suggests that more escaping backslashes were needed for the hex color's hash sign. Try with 6 instead of 4.

Regards,
Dimo
Telerik