Javascript - Dynamically added checkboxes not working as expected in Kendo Panelbar headers

Question

I have this fiddle which works when adding static checkboxes. I'm creating the checkboxes for the accordion panels like so:

liID = "tab" + x;
$("<li id = '"+ liID +"' class='k-item k-last k-state-default' aria-expanded='false'><input type='checkbox' id='c" + x + "' class='cbSelect' /><label for='c" + x + "'><span  id='cbSelect" + x + "'></span>" + liID + "</label></li>").appendTo("#panelbar");

The above x-value is the for loop variable.

I have used the following styles on the checkboxes:

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

input[type="checkbox"] + label span
{
    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 span 
{
    background:url('../images/checkBox.png') -1px top no-repeat;
}

The checkbox.png image above is the following:

Which displays the checkboxes, but does not allow the check event when clicked, as it first opens the tab before allowing this.

I have tried using the following:

$("#panelbar").on("click", "input.cbSelect", function(evt) 
{
    evt.stopPropagation();
});

but I'm not sure whether I'm linking it properly as this is linked with the normal checkbox which I have hidden using display:none;

When the normal checkbox is displayed with the newly styled checkbox, and when clicking on the original checkbox, it works as expected. Instead of clicking on the original checkbox, I want to be able to click on the newly created checkbox and use the stopPropagation on it.

That is the first issue, the next is that I'm creating a checkbox for a grid like so:

var chkBox =  "<input type='checkbox' id='cUpload1' class='cbSelect' /><label for='cUpload1'><span  id='cbSelectUpload'></span>test1</label>";

Then trying to add it to a simple dataSourse like so:

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

The styles used for the above checkbox aren't applied to the checkbox as nothing is displayed.

Any ideas why it isn't working?

btw, I'm trying to implement all of the above into this fiddle. The above coding isn't currently in the fiddle.

Any help will be appreciated!

Answer 1

Your first issue is mainly due to the interaction with kendo. The selector "input.cbSelect" is not correct, since you are replacing the original checkboxes with label-only ones. So actually you are clicking on the label and not on the checkbox itself. The correct one would be "li label span" but even then it wouldn't work because you cannot prevent kendo from selecting the panel.

Even

$("#panelbar").on("click", "label span", function(evt) {
    evt.stopImmediatePropagation();
    return false;
})

wouldn't prevent the kendo selection.

But what you actually can do is unbinding the child from the parent with a html action, so the kendo handler doesn't trigger:

Solution:

In your template replace

<span  id='cbSelect" + x + "'></span>

with

<a href="#" id='cbSelect" + x + "'></a>

and in your input css the span with a.

The a-Element triggers a seperate action, so now you can stop the kendo Handler with

$("#panelbar").on("click", "label a", function(evt) {
    evt.stopImmediatePropagation();
});

The problem now is, that the checking of the checkbox by clicking on the label also doesn't work. So we have to do this manually by extending the handler above:

$("#panelbar").on("click", "label a", function(evt) {
    var chkbx = $(this).closest('li').find('input');
    chkbx.prop('checked', !chkbx.prop('checked'));
    evt.stopImmediatePropagation();
})

Working example:
http://jsfiddle.net/Nitro3k/5nX8r/47/

Alternative:

If you do not want the link inside the label, you can also:

1. remove the span completely, style the label directly instead and call return false; instead of evt.stopImmediatePropagation();
2. build a custom checkbox, since you have to trigger it with js anyway:

Remove the lable, style a block instead (e.g .checkbox) together with a checked class (e.g. .checkbox.checked). Build the block around the checkbox:

<div class="checkbox"><input type='checkbox' id='c1' class='cbSelect' /></div>

and add the handler:

$(document).on('click', '.checkbox', function(){
    var chkbx = $(this).find('input');
    chkbx.prop('checked', !chkbx.prop('checked'));
    $(this).toggleClass('checked');
})