How to render JS variable in a kendo UI's itemTemplate when the variable value has spaces

Question

I am using the response data from the server in my itemTemplate function to create a list of checkboxes with values. The issue I am facing is, if there is a variable whose value has spaces in it eg: "In Progress" then it does not render correctly.

Below is my itemTemplate function and the html element after the data render.

 itemTemplate: function (e) {
       return "<li class='k-item><label class='k-label'><input type='checkbox' value=#= data.Status || data.all # />#= data.Status|| data.all #</label></li>"
  }

Here is a demo of the same. Is there a way to render the data so I could get the whole text inside the value attribute? Or Am I doing something wrong here? Please suggest, Thank you !

Answer 1

You need to add escaped quotes like this:

\'#=data.country|| data.all #\'

$("#grid").kendoGrid({
    columns: [ {
        field: "country",
        filterable: {
            multi:true,
            itemTemplate: function(e) {

                    return "<li class='k-item><label class='k-label'><input type='checkbox' value=\'#=data.country|| data.all #\' />#= data.country|| data.all #</label></li>"


            }
        }
    }],