Conditional client template in Razor hierarchical grid

7 posts, 1 answers
  1. Oana
    Oana avatar
    2 posts
    Member since:
    Dec 2013

    Posted 12 Nov 2014 Link to this post

    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





  2. Answer
    Dimo
    Admin
    Dimo avatar
    8478 posts

    Posted 14 Nov 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Oana
    Oana avatar
    2 posts
    Member since:
    Dec 2013

    Posted 17 Nov 2014 in reply to Dimo Link to this post

    You are right, the syntax is like this:

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

    Thank you,
    Oana
  4. TroyR
    TroyR avatar
    7 posts
    Member since:
    Nov 2015

    Posted 31 May 2016 in reply to Oana Link to this post

    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>

  5. TroyR
    TroyR avatar
    7 posts
    Member since:
    Nov 2015

    Posted 31 May 2016 in reply to TroyR Link to this post

    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> # } # 

  6. TroyR
    TroyR avatar
    7 posts
    Member since:
    Nov 2015

    Posted 31 May 2016 in reply to TroyR Link to this post

    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?
  7. Dimo
    Admin
    Dimo avatar
    8478 posts

    Posted 01 Jun 2016 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top