How to parse field data as html

[troy]

I am using a grid with some local data, but I want to use some simple html before and after one of the fields in a column.  I'm actually doing it in the PHP code before it even gets into the array "data_source".  

I just want html to parse inside the grid basically.

$(document).ready(function() {

     $("#grid").kendoGrid({

         dataSource: {

             data: booking_data,

             schema: {

                 model: {

                     fields: {

                         invoice_id: { type: "number" },

                         invoice_date: { type: "string" },

                         invoice_name: { type: "string" },

                         invoice_price: { type: "number" },

                         invoice_status: { type: "string" }

                     }

                 }

             },

             pageSize: 15

         },

         scrollable: true,

         sortable: true,

         filterable: true,

         pageable: true,

         columns: [

             {

                 field: "invoice_id",

                 title: "Invoice ID"

             },

             {

                 field: "invoice_date",

                 title: "Invoice Date"

             },

             {

                 field: "invoice_name",

                 title: "Customer Name"

             },

             {

                 field: "invoice_price",

                 title: "Invoice Price"

             },

             {

                 field: "invoice_status",

                 title: "Invoice Status"

             }

         ]

     });

 });

[John DeVight]

Hi Troy,

A template can be used to display some simple html before and after one of the fields in a column.  The field value is displayed like this in the template: ${ field_name }.  The rest of the template is html.

Let's say you want to add some html before and after the invoice_price.  You could define a template like this:

<script id="invoicePriceTemplate" type="text/x-kendo-tmpl">

  

    <span>The total is: </span>

    ${ invoice_price }

    <span>dollars</span>

  

</script>

To tell the grid to use the template, you can define your invoice_price column like this:

{

    field: "invoice_price",

    title: "Invoice Price",

    template: kendo.template($("#invoicePriceTemplate").html())

},

Hope this helps...

Regards,

John DeVight

[troy]

Hey,  Thanks for your answer, I've tried it and now the html is parsing and it looks great, but the invoice_price is not being passed to the template.  


EDIT:
I added the template like this and it works just fine:

<script id="invoicePriceTemplate" type="text/x-kendo-tmpl">  
    &euro;   #= invoice_price #    
</script>

I basically only needed the Euro symbol to parse, but this will be useful for many other things in the future.
Thanks again.

[John DeVight]

Glad to see that worked out for you! =)

Regards,

John DeVight