Css - Custom style on checkbox not working

Question

First off I have a kendo grid. Now I am dynamically adding a checkbox to the DataSource like below:

var chkBox =  "<input type='checkbox' id='chUpload'/><label for='chUpload'><a href='#' id='cbChoose'></a>test</label>";

var uploadedFiles = 
[
    { 
        facility: "Sunrise medical Laboratories", 
        documentName:  "Lab Results",
        documentType: "PDF",
        selected: chkBox
    }
];

Following are the styles implemented on the checkbox:

input[type="checkbox"]
{
    display:none;
}

input[type="checkbox"] + label a
{
    display:inline-block;
    width:14px;
    height:14px;
    margin:-1px 4px 0 0;
    vertical-align:middle;
    background:url('../images/checkBox.png') right top no-repeat;
    cursor:pointer;
    float:right;
    margin-top:10px;
    margin-right:10px;
}

input[type="checkbox"]:checked + label a 
{
    background:url('../images/checkBox.png') -1px top no-repeat;
}

I found that these styles work on other checkboxes which I added to a panelbar's tabs, but in the grid, nothing is displayed.

I have created a jsfiddle with the black boxes being the styled checkbox. I have hidden the display:none; in the css to see where all textboxes are. If it is in use, no check custom boxes are displayed in the grid.

Any ideas why?

Answer 1

I found the problem.

template: "<input type='checkbox' style='margin-right:23px; margin-top:0px;'  />"

should be:

template: "#= selected #"

which was a simple mistake of mine.

Here is a working example.