Kendo Template shows Raw html when called from a function

Question

I am using a Kendo Grid and I have a function which I am using to get some Html to render for one of my colmumns. My code looks like following:

{
                        field: "StateString",
                        title: "State",
                        width: "120px",
                        encoded: true,
                        template: '#:GetFaClass(data.StateString)#'
 }   

Now, when we call this function it looks like following:

function GetFaClass(status) {
    if (status == 'Queued') {
        return ('<i class="fa fa-folder" aria-hidden="true"></i>')
    }
}

Funny enough, it does call the function and return the value but then shows it as text rather than rendering the html. Now, if instead of calling the function, if I hardcode the value like below then it renders fine:

{
                        field: "StateString",
                        title: "State",
                        width: "120px",
                        encoded: true,                     
                        template: ('<i class="fa fa-folder" aria-hidden="true"></i>')
                    }     

What may I be doing wrong?

Answer 1

If you want to render as HTML you had to change

template: '#:GetFaClass(data.StateString)#'

to:

template: '#=GetFaClass(data.StateString)#'

You have to change the colon(":") to an equals ("=")

source kendo template