jube-fork/Jube.App/wwwroot/kendo/examples/badge/labels.html

<!DOCTYPE html>
<html>
<head>
    <title>Labels</title>
    <meta charset="utf-8">
    <link href="../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="../../styles/kendo.rtl.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.mobile.min.css" rel="stylesheet">
    <script src="../../js/jquery.min.js"></script>
    <script src="../../js/jszip.min.js"></script>
    <script src="../../js/kendo.all.min.js"></script>
    <script src="../content/shared/js/console.js"></script>
    <script>
        
    </script>
    
    
</head>
<body>
    
        <a class="offline-button" href="../index.html">Back</a>
    
    
<div id="example">
    <div class="demo-section">
        <div id="toolbar"></div>
        <div id="listView"></div>
    </div>
</div>

<script type="text/x-kendo-template" id="template">
    <div class="issue">
        <h4>#:title# <span class="#=type#"></span> #= approved? '<span class="approved"></span>' : '' # <span class="internal"></span></h4>
        <p><small>#:additionalInfo#</small></p>
    </div>
</script>

<script>
    var data = [{
        title: 'Implement lazy loading',
        additionalInfo: 'opened 13 days ago by starku',
        type: 'feature',
        approved: false
    },
    {
        title: 'Scrolling freezes in IE 8',
        additionalInfo: 'opened 2 days ago by gink',
        type: 'bug',
        approved: true
    },
    {
        title: 'Keyboard navigation throws an exception',
        additionalInfo: 'opened 1 days ago by toydivas',
        type: 'bug',
        approved: true
    },
    {
        title: 'Improve searching performance',
        additionalInfo: 'opened 12 days ago by peterC',
        type: 'enhancement',
        approved: false
    },
    {
        title: 'Add documentation for lazy loading',
        additionalInfo: 'opened 11 days ago by starku',
        type: 'documentation',
        approved: true
    }];

    var dataSource = new kendo.data.DataSource({
        data: data
    });

    $('#toolbar').kendoToolBar({
        items: [
            { template: '<span class="k-d-flex k-flex-row k-align-items-center"><span class="status-icon k-icon k-i-warning"></span> 5 Open</span>' },
            { template: '<span class="k-d-flex k-flex-row k-align-items-center"><span class="status-icon k-icon k-i-check"></span> 90 Closed</span>' }
        ]
    });

    $("#listView").kendoListView({
        dataSource: dataSource,
        template: kendo.template($("#template").html()),
        dataBound: function() {
            $('.bug').kendoBadge({
                themeColor: 'error',
                text: 'Bug'
            });

            $('.enhancement').kendoBadge({
                themeColor: 'warning',
                text: 'Enhancement'
            });

            $('.feature').kendoBadge({
                themeColor: 'info',
                text: 'Feature request'
            });

            $('.approved').kendoBadge({
                themeColor: 'success',
                text: 'Approved'
            });

            $('.approved').kendoBadge({
                themeColor: 'success',
                text: 'Approved'
            });

            $('.documentation').kendoBadge({
                themeColor: 'primary',
                text: 'Documentation'
            });
        }
    });

</script>

<style>
    .issue {
        padding: 10px 20px;
        border-bottom: 1px solid lightgrey;
    }

    #toolbar .status-icon {
        margin-inline-end: 4px;
    }
</style>

    
</body>
</html>