2 July, 2014 Roel van Lisdonk 0 Comments 1 category

 

If you want to use Kendo UI switch widgets with Font Awsome icons in a Kendo grid with MVVM binding, you can use the code below:

 

image

 

Code

<!DOCTYPE html>
<html>
<head>
    <title>Kendo element binding research page.</title>
    <link rel="stylesheet" type="text/css" href="//cdn.kendostatic.com/2014.1.528/styles/kendo.common.min.css" />
    <link rel="stylesheet" type="text/css" href="//cdn.kendostatic.com/2014.1.528/styles/kendo.rtl.min.css" />
    <link rel="stylesheet" type="text/css" href="//cdn.kendostatic.com/2014.1.528/styles/kendo.metro.min.css" />
    <link rel="stylesheet" type="text/css" href="//cdn.kendostatic.com/2014.1.528/styles/kendo.metro.mobile.min.css" />
    <link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
    <style>
        /* Resets */
        * {
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box; /* Border boxing is used, so the padding, margin and borders are within the width and height of de element. */
            color: rgb(112, 112, 112);
            font-family: Arial, Helvetica, sans-serif; /* For know use default fonts used on google.com stackoverflow.com, telerik.com etc. */
            font-size: 13px;
            margin: 0; /* Margin zero is used to prevent unnecessary white space. */
            padding: 0; /* Padding zero is used to prevent unnecessary white space. */
        }

        html, body {
            height: 100%;
            max-height: 100%;
        }

        body {
            padding: 20px;
        }

        .info {
            border: 1px solid rgb(128, 128, 128);
            box-shadow: rgba(0, 0, 0, 0.298039) 0 2px 6px 0, rgba(0, 0, 0, 0.2) 0 -3px 8px 0;
            padding: 10px;
        }

        .addressRow {
            cursor: move;
            cursor: -webkit-grab;
            cursor: -moz-grab;
            height: 10px;
            line-height: 10px;
            padding: 0;
            margin: 0;
        }

            .addressRow input {
                font-family: FontAwesome;
            }

        #addressGrid tr > td {
            height: 1.6em;
            line-height: 1.6em;
            padding: 1px 4px 1px 4px;
            margin: 0;
        }

        #addressGrid tr > th {
            font-weight: bold;
            height: 1.6em;
            line-height: 1.6em;
            margin: 0;
            padding: 1px 4px 1px 4px;
        }

        #addressGrid tr > td:first-child, #addressGrid tr > th:first-child {
            width: 56px;
        }

        #addressGrid tr:last-child td {
            padding-bottom: 3px;
        }

        .km-switch {
            cursor: pointer;
            height: 1.6em;
            line-height: 1.6em;
            margin: 0;
            padding: 0;
        }

        #addressGrid tr > td:first-child .km-switch-label-on, #addressGrid tr > td:first-child .km-switch-label-off {
            font-family: FontAwesome;
            color: rgb(112, 112, 112);
            height: 1.6em;
            line-height: 1.6em;
        }

        #addressGrid tr > td:first-child .km-switch-label-on:before {
            content: "\f023";
        }

        #addressGrid tr > td:first-child .km-switch-label-off:before {
            content: "\f09c";
        }
    </style>

</head>
<body>
    <div id="view">
        <div class="info">
            <script id="addressRowTemplate" type="text/x-kendo-tmpl">
                <tr data-uid="#: uid#" class="addressRow">
                    <td>
                        <input data-role="switch" data-on-label="" data-off-label="" data-bind="checked: IsFixed">
                    </td>
                    <td>
                        #: Address#
                    </td>
                    <td>
                        #: Lat#
                    </td>
                    <td>
                        #: Long#
                    </td>
                    <td>
                        <input data-role="switch" data-on-label="Y" data-off-label="N" data-bind="checked: IsFixed">
                    </td>
                </tr>
            </script>
            <div id="addressGrid" data-role="grid"
                 data-row-template="addressRowTemplate"
                 data-columns="[
                                    { 'field': 'IsFixed' },
                                    { 'field': 'Address' },
                                    { 'field': 'Lat' },
                                    { 'field': 'Long' },
                                    { 'field': 'Selected' }
                               ]"
                 data-bind="source: addresses"></div>
        </div>
    </div>
    <script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="//cdn.kendostatic.com/2014.1.528/js/kendo.all.min.js"></script>
    <script type="text/javascript">
        var dataService = (function ()
        {
            "use strict";
            var self = {};

            self.getAddresses = function ()
            {
                var data = new kendo.data.ObservableArray(
                [
                    { Id: 1, Address: 'Kerkweg 22',   Lat: '52.367443', Long: '4.865275', Selected: false, IsFixed: false },
                    { Id: 2, Address: 'Peilstraat 3', Lat: '52.367967', Long: '4.866217', Selected: false, IsFixed: true },
                    { Id: 3, Address: 'Bakkerloop 35', Lat: '52.367946', Long: '4.865482', Selected: false, IsFixed: false },
                    { Id: 4, Address: 'Eikenlaan 1', Lat: '52.368237', Long: '4.866694', Selected: false, IsFixed: true }
                ]);

                // Manual create a promise, so this function mimicks an Ajax call.
                var dfd = new $.Deferred();
                dfd.resolve(data);

                return dfd.promise();
            };

            return self;
        })(kendo);

        var viewModel = new kendo.observable({
            addresses: new kendo.data.DataSource({ data: [] })
        });

        var controller = (function (dataService, viewModel)
        {
            "use strict";
            var _dataService = dataService;            
            var _vm = viewModel;
            var self = {};
                        
            self.handleAdressesRefresh = function (data)
            {
                _vm.set("addresses", new kendo.data.DataSource({ data: data }));
                kendo.bind($(".info"), _vm);
            };

            self.show = function ()
            {
                $.when(_dataService.getAddresses())
                .then(self.handleAdressesRefresh);
            };

            return self;
        })(dataService, viewModel);

        controller.show();
    </script>
</body>
</html>
Tags:
Category: Uncategorized

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Related Posts