Trying to render a result row as html in a grid cell

[Ross]

I have a grid that I'm filling with the results of a REST API call. The grid should have a dynamic button that renders based on the status in the results.

The API is actually sending a valid link so but when I try to display the result in a column it renders as text is there a trick to this?

Example result that is not rendering as a button just as text. For the field

Properties.AppointRetire

<a href="/Governance/Forms/Staff/Retire.aspx?ID=9526295&OfficeHolderID=9526744&SEQN=170" class="TextButton">Retire</a>"

 

CODE:

function fillgrid(parsedPayload) {

          $("#grid").kendoGrid({
dataSource: {
              data: parsedPayload,
              pageSize: 15,
            },
            columns: [
              { field:"Properties.DivisionBranch", title: "Division - Branch", width: 300  },
              { field:"Properties.FirstName", title: "First Name", width: 200  },
              { field: "Properties.LastName", title: "Last Name", width: 200  },
              { field: "Properties.Appointed", title: "Appointed", type: "date", format: "{0:dd/MM/yyyy}" },
              { field: "Properties.GoverningCommittee", title: "Governing Committee", width: 300 },
              { field: "Properties.Office", title: "Office", width: 200  },
              { field: "Properties.Occupation", title: "Occupation", width: 200  },
              { field: "Properties.Status", title: "Office <br />Status", filterable:false, width:80  },
              { field: "Properties.AppointRetire", title: " ", filterable:false, width:100  }
            ],
            filterable: {
              mode: "row",
              operators: {
                       string: {
                            contains: "Contains"
                               }
                             }
            }, 
            toolbar: ["excel", "pdf", "search"],
           excel: {
                filterable: false
            },
            sortable: true,
            pageable: {
                        pageSizes: [10, 20, 50, "all"],
                        buttonCount: 15
           }
          });
        
 }

[Georgi Denchev]

Hello, Ross,

I am copying the answer that I gave you in the ticket here as well, so others with a similar issue may know how to solve it:

You can set the encoded property of the column to false, this would allow the grid to render the html value without escaping it.

{ field: "Properties.AppointRetire", title: " ", filterable:false, width: 300, encoded: false }

Best Regards,
Georgi Denchev
Progress Telerik