jube-fork/Jube.App/wwwroot/kendo/examples/rating/templates.html

<!DOCTYPE html>
<html>
<head>
    <title>Templates</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 k-content center">
        <h4>Rating Templates</h4>
        <input id="rating" style="width: 100%;" />
    </div>

    <div class="demo-section k-content center">
        <h4>Rating Templates with SVG Icons</h4>
        <input id="ratingSvg" style="width: 100%;" />
    </div>

    <script>
        $(document).ready(function () {
            // Rating Templates
            $("#rating").kendoRating({
                min: 1,
                max: 6,
                value: 3,
                itemTemplate: "<i class='k-icon k-i-heart-outline'></i>",
                selectedTemplate: "<i class='k-icon k-i-heart'></i>",
                hoveredTemplate: "<i class='k-icon k-i-heart'></i>"
            });

            // Rating Templates with SVG Icons
            var ratingSVG = $("#ratingSvg").kendoRating({
                min: 1,
                max: 5,
                value: 3,
                itemTemplate: $("#rating-item-template").html(),
                selectedTemplate: $("#rating-selected-template").html(),
                hoveredTemplate: $("#rating-selected-template").html(),
                label: { template: $("#rating-label-template").html() }
            }).getKendoRating();

            ratingSVG.wrapper.kendoTooltip({
                filter: ".k-rating-item",
                content: function (e) {
                    return getLabelText(e.target.data("value"));
                }
            });
        });

        function getLabelText(value) {
            var label = "";

            switch (value) {
                case 1:
                    label = "Strongly Disagree";
                    break;
                case 2:
                    label = "Disagree";
                    break;
                case 3:
                    label = "Neutral";
                    break;
                case 4:
                    label = "Agree";
                    break;
                case 5:
                    label = "Strongly Agree";
                    break;
            }

            return label;
        }
    </script>

    <script id="rating-selected-template" type="x/kendo-template">
        <svg width="50" height="30" version="1.1" xmlns="http://www.w3.org/2000/svg">
            <defs>
                <linearGradient id="Gradient#=index#">
                    <stop class="main-stop" offset="0%" />
                    <stop class="alt-stop" offset="90%" />
                </linearGradient>
            </defs>

            <rect class="k-i-rect" x="0" y="0" rx="5" ry="5" width="50" height="30" fill="url(\#Gradient#=index#)" />
        </svg>
    </script>

    <script id="rating-item-template" type="x/kendo-template">
        <svg width="50" height="30" version="1.1" xmlns="http://www.w3.org/2000/svg">
            <rect x="0" y="0" rx="5" ry="5" width="50" height="30" fill-opacity="0" stroke="\#e9e9e9" stroke-width="2" />
        </svg>
    </script>

    <script id="rating-label-template" type="x/kendo-template">
        #= getLabelText(data.value) #
    </script>

    <style>
        .k-rating {
            flex-direction: column-reverse;
        }

        .k-rating-label {
            justify-content: center;
        }

        .k-rating-item:nth-child(1) .main-stop {
            stop-color: #FF0000;
        }
        .k-rating-item:nth-child(1) .alt-stop {
            stop-color: #ff5101;
        }

        .k-rating-item:nth-child(2) .main-stop {
            stop-color: #ff5101;
        }
        .k-rating-item:nth-child(2) .alt-stop {
            stop-color: #ffaa02;
        }

        .k-rating-item:nth-child(3) .main-stop {
            stop-color: #ffc801;
        }
        .k-rating-item:nth-child(3) .alt-stop {
            stop-color: #fef100;
        }

        .k-rating-item:nth-child(4) .main-stop {
            stop-color: #dbe300;
        }
        .k-rating-item:nth-child(4) .alt-stop {
            stop-color: #a4cd00;
        }

        .k-rating-item:nth-child(5) .main-stop {
            stop-color: #8bc301;
        }
        .k-rating-item:nth-child(5) .alt-stop {
            stop-color: #4eaa01;
        }
    </style>
</div>


    
</body>
</html>