Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Francisco
245
IGGrid - RowTemplate
posted

HI,

I have a grid with 2 columns. In my first column I would like to have a complex control (image and text side by side).

So I have 2 colums with key, Col1, Col2.

Col1 has the value '<a>test</a>'. 

My rowtemplate is defined like :" <tr><td> ${Col1} </td><td>${Col2}</td></tr>". 

 

The problem is that my "url" is shown as simple text "<a>test</a>" and not as a URL.

If I change my rowtemplate to "<tr><td><a>${Col1}</a></td><td>${Col2}</td></tr>", it works fine, but thats not the behavior I pretend to implement, has my Col1 will be more complex than just a <a>test</a>.

 

Any ideas?

 

Best Regards!

Francisco Correia

Parents
  • 23953
    Suggested Answer
    Offline posted

    Hi Francisco,

    The answer to your question is that you're trying to inject html content into the row template, but the expression template ${} which you're using is escaping them. You should use {{html <fieldName>}} template expression instead.

    Here you can find the explanation. This is the except from the document:

    "The values rendered by ${} are evaluated as strings, and are HTML encoded. Any embedded markup will therefore be encoded. To insert the not encoded markup in the rendered template, use instead the  {{html}}  template tag. "

    Having said all that you should use the following row template:

    

    rowTemplate: "<tr><td> {{html Col1}} </td><td>${Col2}</td></tr>"

    In 12.1 we introduced our own templating engine which is supposed to replace the jQuery templating engine which we used in earlier versions. We now use our templating engine by default in our jQuery controls. If you want to use the jQuery templating engine you should set jQueryTemplating option of igGrid to true.

    Again in 12.1 release we introduced column templates which is convenient way to set template only for one column. Here is an example code of using column templating:

    

    $("#grid1").igGrid({
    

    columns: [
    

         { headerText: "col1", key:"col1", dataType:"string", template: "{{html col1}}"},
    

                    { headerText: "col2", key:"col2", dataType:"string"},
    

    ],
    

     
    

    });

    You can use column template in your scenario.

     

    Hope this helps,

    Martin Pavlov

    Infragistics, Inc.

Reply Children