How to parse field data as html

4 posts, 0 answers
  1. troy
    troy avatar
    7 posts
    Member since:
    Nov 2011

    Posted 14 Jan 2012 Link to this post

    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"
                 }
             ]
         });
     });
  2. John DeVight
    John DeVight avatar
    209 posts
    Member since:
    Jan 2010

    Posted 18 Jan 2012 Link to this post

    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
  3. Kendo UI is VS 2017 Ready
  4. troy
    troy avatar
    7 posts
    Member since:
    Nov 2011

    Posted 18 Jan 2012 Link to this post

    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.
  5. John DeVight
    John DeVight avatar
    209 posts
    Member since:
    Jan 2010

    Posted 18 Jan 2012 Link to this post

    Glad to see that worked out for you! =)

    Regards,

    John DeVight
Back to Top
Kendo UI is VS 2017 Ready