KnockoutJS checkboxlist not binding selected values

Question

I have a checkbox list with the following values:

"AllAuctionTypes": [
{
  "AuctionTypeID": "e42fde21-807c-4c81-938d-1918ca13f28b",
  "AuctionTypeName": "Truck & Trailer",
  "AuctionID": "00000000-0000-0000-0000-000000000000"
},
{
  "AuctionTypeID": "eb1cc1c2-d08d-45b6-8c46-1dbd9d54bd35",
  "AuctionTypeName": "Agriculture",
  "AuctionID": "00000000-0000-0000-0000-000000000000"
},
{
  "AuctionTypeID": "edb81092-0bfc-462e-a50e-4510feb54c55",
  "AuctionTypeName": "Plant & Machinery",
  "AuctionID": "00000000-0000-0000-0000-000000000000"
}
]

I want to data-bind the checked value from data that I obtain from my server. Which looks like this:

  {
  "AuctionID": "88848ed7-c2bd-4428-9c4c-c524f2717051",
  "AuctionName": "Another Auction",
  "AuctionDate": "2015-04-22",
  "AuctionTime": "16:50:00",
  "AuctionLocation": "LolVille",
  "AuctionContactPerson": "Bill",
  "AuctionContactNumber": "0115552222",
  "AuctionEMail": "[email protected]",
  "AuctionWebsite": "http://somesite.co.za",
  "AuctionType": [
    {
      "AuctionTypeID": "e42fde21-807c-4c81-938d-1918ca13f28b",
      "AuctionTypeName": "Truck & Trailer",
      "AuctionID": "00000000-0000-0000-0000-000000000000"
    },
    {
      "AuctionTypeID": "edb81092-0bfc-462e-a50e-4510feb54c55",
      "AuctionTypeName": "Plant & Machinery",
      "AuctionID": "00000000-0000-0000-0000-000000000000"
    }
  ]
}

The AuctionType value(s) are the items that should be marked as selected, but it does not seem to do the binding. Here is my HTML with the bindings:

<div class="form-group">
                                <label>Auction Catagory</label>
                                <div>
                                    <table data-bind="foreach: AllAuctionTypes">
                                        <tr>
                                            @*Debugging*@
                                            <td data-bind="text: ko.toJSON($parent.Auction.AuctionType)"></td>
                                            <td>

                                                @*this is the segment I am trying to bind*@
                                                <input type="checkbox" data-bind="checkedValue: $data, checked: $parent.Auction.AuctionType" />  <span data-bind="text: AuctionTypeName"></span>
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                            </div>

But it doesn't seem to bind the values based on what was selected, or I am just binding it incorrectly.

Here is a screen cap of the screen showing the debugging segment and the unchecked boxes Screen Capture

Any help will be greatly appreciated!

Have you tried binding a boolean value to the checked binding? I see in the knockout docs that the checked binding behaves loosely when applied to checkboxes and bound to non-boolean values. — Cameron Tinker
– Cameron Tinker, Commented Apr 16, 2015 at 17:21
@CameronTinker No not yet. but also not sure how I would go about doing that — Jacques Bronkhorst
– Jacques Bronkhorst, Commented Apr 16, 2015 at 17:23
I'm confused. When should the box be checked/unchecked? When the data is present/undefined? — Kyeotic
– Kyeotic, Commented Apr 16, 2015 at 18:48
@Tyrsius When the data is present, in Auction the Box should be checked — Jacques Bronkhorst
– Jacques Bronkhorst, Commented Apr 16, 2015 at 19:25
@JacquesBronkhorst Is unchecking the checkbox intended to delete the data? — Kyeotic
– Kyeotic, Commented Apr 16, 2015 at 19:32

Community · Accepted Answer · 2017-05-23 11:57:03Z

2

I got it working with a custom Checked binding as suggested by Tyrsius.

The Checkbox binding looks like this:

 <input type="checkbox" data-bind="checked: $root.IsChecked(AuctionTypeID), checkedValue: $data" /> <span data-bind="text: AuctionTypeName"></span>

I provide the IsChecked function with the AuctionTypeID and it runs a comparison to see which ID has been checked.

Here is the IsChecked function that works perfectly for me:

 self.IsChecked = function (ListID) {
        var K;
        var match = ko.utils.arrayFirst(self.Auction.AuctionType(), function (item) {
            return ListID === item.AuctionTypeID
        });

        if (!match) {
            K = false;
        } else {
            K = true;
        }
        return K;
    }

edited May 23, 2017 at 11:57

CommunityBot

11 silver badge

answered Apr 16, 2015 at 20:52

Jacques Bronkhorst

1,6956 gold badges35 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Brett Green · Accepted Answer · 2015-04-16 18:32:03Z

Some odd scoping to deal with, but this works:

HTML:

<div class="form-group">
                                <label>Auction Category</label>
                                <div>
                                    <table data-bind="foreach: allAuctionTypes">
                                        <tr>
                                            <td>
                                                <input type="checkbox" data-bind="checkedValue: AuctionTypeID, checked: $root.auctionTypeSelected($data)" />  <span data-bind="text: AuctionTypeName"></span>
                                            </td>
                                        </tr>
                                    </table>
                                </div>

JS:

var auction = {
  "AuctionID": "88848ed7-c2bd-4428-9c4c-c524f2717051",
  "AuctionName": "Another Auction",
  "AuctionDate": "2015-04-22",
  "AuctionTime": "16:50:00",
  "AuctionLocation": "LolVille",
  "AuctionContactPerson": "Bill",
  "AuctionContactNumber": "0115552222",
  "AuctionEMail": "[email protected]",
  "AuctionWebsite": "http://somesite.co.za",
  "AuctionType": [
    {
      "AuctionTypeID": "e42fde21-807c-4c81-938d-1918ca13f28b",
      "AuctionTypeName": "Truck & Trailer",
      "AuctionID": "00000000-0000-0000-0000-000000000000"
    },
    {
      "AuctionTypeID": "edb81092-0bfc-462e-a50e-4510feb54c55",
      "AuctionTypeName": "Plant & Machinery",
      "AuctionID": "00000000-0000-0000-0000-000000000000"
    }
  ]
};
var allAuctionTypes = [
{
  "AuctionTypeID": "e42fde21-807c-4c81-938d-1918ca13f28b",
  "AuctionTypeName": "Truck & Trailer",
  "AuctionID": "00000000-0000-0000-0000-000000000000"
},
{
  "AuctionTypeID": "eb1cc1c2-d08d-45b6-8c46-1dbd9d54bd35",
  "AuctionTypeName": "Agriculture",
  "AuctionID": "00000000-0000-0000-0000-000000000000"
},
{
  "AuctionTypeID": "edb81092-0bfc-462e-a50e-4510feb54c55",
  "AuctionTypeName": "Plant & Machinery",
  "AuctionID": "00000000-0000-0000-0000-000000000000"
}
];

var vm = function(auctionTypes, auction){
    var self = this;
    self.allAuctionTypes = ko.observableArray(auctionTypes);
    self.auction = ko.observable(auction);
    self.auctionTypeSelected = function(auctionType) {
        var selected = false;
        $.each(self.auction().AuctionType, function(i, aType){
            if (auctionType.AuctionTypeID === aType.AuctionTypeID) {
                selected = true;
                return; // break from for loop
            }
        });
        return selected;
    };
};

ko.applyBindings(new vm(allAuctionTypes, auction));

Fiddle: http://jsfiddle.net/brettwgreen/ccjjc44d/

Collectives™ on Stack Overflow

KnockoutJS checkboxlist not binding selected values

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related