CODEWITHSUNDEEP
bindingcheckboxkendo-ui
cortomaltese_marcof
cortomaltese_marcof

Reputation: 155

kendo checkbox checked binding. Not able to bind to an array of checkboxes

I have an array of checkboxes and I would like to use it as an array, for example set single iitems in a group of options and retrieve the values of the group. For a single checkbox I'm able to set it and get the click event, as an array I don't get anything.

HTML code :

    <div class="k-group" id="chkbox-options">
    <label>
        Red
        <input type="checkbox" id="chk1" value="Red" data-bind="checked: colors" />
        Green
        <input type="checkbox" id="chk2" value="Green" data-bind="checked: colors" />
        Blue
        <input type="checkbox" id="chk3" value="Blue"  data-bind="checked: colors" />
    </label>
    </div>

Javascript code :

    <script  type="text/javascript">
        var colordata = null;
        $(document).ready(function () {
            colordata = kendo.observable({
                colors: ["Blue"]
            });
            kendo.bind($("chkbox-options"), colordata);
            $("#dump-values").click(function () {
                kendoConsole.log(colordata.colors.toString());
            });
            $("#chk1").click(function () {
                kendoConsole.log("click chk1");
                if (this.checked) {
                    kendoConsole.log("click chk1 true");
                }
            });
         });
    </script>

I can get the click event on a single checkbox, while I cannot set the values of the checkboxes in kendo.observable in the field var colordata.

I saw a similar example in the kendo documentation but I'm not able to make it work.

Thanks for your help

Marco

Upvotes: 1

Views: 5464

Answers (1)

Nishanth Nair
Nishanth Nair

Reputation: 2965

couple of points: 1. in kendo.bind # is missing for the div id chkbox-options 2. you need to read the changed colors inside the change event of the the observable object. The change happens after the click event so inside click event you always see the old data.

I have corrected your jsFiddle: http://jsfiddle.net/whizkid747/rPjjJ/4/

var colordata = null;
        $(document).ready(function () {
            colordata = kendo.observable({
                colors: ["Blue"]
            });
            kendo.bind($("#chkbox-options"), colordata);

            colordata.bind("change", function(e) {
                var selectedColors = '';

                $.each(colordata.colors, function(key, value){
                    selectedColors = selectedColors + " " + value;
                });
                if(colordata.colors.length == 0){
                    console.log('no colors selected');
                }else{
                console.log('selected colors:' + selectedColors);  
                }
            });            
         });

Upvotes: 1

Related Questions