Kendo grid generate dynamic html in a column based on column value?

Question

I'm using kendo grid,where i have a requirement to generate dynamic HTML based on value of a column which will be returned by another function.I have the following code

 $("#divGenerateLogin_kendogrid").kendoGrid({ dataSource: { data: data, pageSize: 10 }, sortable: true, reorderable: true, pageable: { pageSizes: true, buttonCount: 5 }, filterable: true, // selectable: true , // dataBound: onDataBound, columns: [ { field: "StudentName", title: "Student Name", type: "string" }, { field: "Class", title: "Class", type: "string" }, { title: "Login", template: "#: LoginColHtml(IsLoginAvilable==1) #" } ] }); function LoginColHtml(isLoginAvilable) { var html = ""; if (isLoginAvilable == true) { html = "<button type='button' class='btn-ressetpwd'><i class='fa fa-key'></i> reset password</button>"; } else { html = "<button type='button' class='btn-generatelogin'><i class='fa fa-user'></i> generate login</button>"; } // "<div>#: (IsGuardianLoginAvilable==1) #</div>"; return html; } 

Instead of returning actual html in a column its returning as a string. How can i add actual HTML to the column instead of as a string ?

FYI

Answer 1

I have tried with this and it worked

 { title: "Guardian Login", template: "#= LoginColHtml(IsLoginAvilable==1) #" }