Switching Radio Panels

by grippstick

HTML

<link rel="stylesheet" href="http://babackofficedev.radolo.com/kendo/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://babackofficedev.radolo.com/Kendo/Styles/kendo.flat.min.css">
<script src="http://babackofficedev.radolo.com/Kendo/js/jquery.min.js"></script>
<script src="http://babackofficedev.radolo.com/Kendo/js/kendo.all.min.js"></script>
<div id='container'>
    <label>
        <input type="radio" name='statusgroup' value="Shipping" data-bind="checked: Status" />Shipping</label>
    <label>
        <input type="radio" name='statusgroup' value="Shipped" data-bind="checked: Status" />Shipped</label>
    <label>
        <input type="radio" name='statusgroup' value="Partially Shipped" data-bind="checked:Status" />Partial
    </label>
    <div style="display:none;" data-bind='visible:showShipping'>
        <label>TrackingNumber
            <input data-bind='value:po.TrackingNumber' />
        </label>
        <label>ShipMethod
            <input data-bind='value:po.ShipMethod' />
        </label>
    </div>
    <div style="display:none;" data-bind='visible:showShipped'>
        <label>SomeProperty
            <input data-bind='value:po.SomeProperty' />
        </label>
        <label>TrackingNumber
            <input data-bind='value:po.TrackingNumber' />
        </label>
    </div>
    <div style="display:none;" data-bind='visible:showPartiallyShipped'>
        <label>SomeProperty
            <input data-bind='value:po.SomeProperty' />
        </label>
        <label>ShipMethod
            <input data-bind='value:po.ShipMethod' />
        </label>
    </div>
</div>

JavaScript

var vm = new kendo.observable({
    Status: "Shipping",
    showShipping: function () {
        return "Shipping" == vm.get('Status');
    },
    showShipped: function () {
        return "Shipped" == vm.get('Status');
    },
    showPartiallyShipped: function () {
        return "Partially Shipped" == vm.get('Status');
    },
    po: {
        TrackingNumber: "",
        ShipMethod: "Truck",
        SomeProperty: "Just some cool ass text"
    }
});


kendo.bind($('#container'), vm);