Available in the OSS Version

Rating - Precision

This sample illustrates how to dynamically change options responsible for the size of the step of the selected items.

Select precision and decimal places







This sample is designed for a larger screen size.

On mobile, try rotating your screen, view full size, or email to another device.

The first option configured is for precision. Possible precision values include Exact, Half, and Whole. When the control is configured to use the Exact mode, you have precise control over the portion of the rating item selected. Configuring the roundedDecimalPlaces property sets the accuracy of the value.

Code View

Copy to Clipboard 
<!DOCTYPE html>
<html>
<head>
    <title></title>

    <!-- Ignite UI for jQuery Required Combined CSS Files -->
    <link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/structure/infragistics.css" rel="stylesheet" />

    <style type="text/css">
        .rating-options {
            width: 350px;
            margin-top: 20px;
        }

            .rating-options label {
                width: 200px;
            }

            .rating-options label, .rating-options select {
                float: left;
            }

        #selectPrecision, #decimalPlaces, #currValue {
            width: 130px;
        }

        .rating-options > div {
            margin: 7px 0;
        }
    </style>

    <script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

    <!-- Ignite UI for jQuery Required Combined JavaScript Files -->
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.lob.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.dv.js"></script>
    <!-- REMOVE: Remove any product script references that aren't
        required for this sample and remove this comment -->

</head>
<body>

    <p>Select precision and decimal places</p>
    <div id="igRating1"></div>

    <div class="rating-options ui-helper-clearfix">

        <label>Current value: </label>
        <input id="currValue" type="text" value="" disabled />
        <br />
        <br />
        <label>Value as percent </label>
        <input id="chkPercent" type="checkbox" checked />
        <br />
        <br />

        <label>Precision</label>
        <select id="selectPrecision">
            <option value="exact">Exact</option>
            <option value="half">Half</option>
            <option selected="selected" value="whole">Whole (default)</option>
        </select>
        <br />
        <br />

        <div id="dynamicDiv">
            <label>Select decimal places</label>
            <select id="decimalPlaces">
                <option value="1">.0</option>
                <option value="2">.00</option>
                <option selected="selected" value="3">.000 (default)</option>
            </select>
        </div>

    </div>


    <script>

        $(function () {

            $("#igRating1").igRating({
                voteCount: 10,
                valueAsPercent: true,
                value: 0.4,
                valueChange: function (evt, ui) {
                    $("#currValue").val(ui.value);
                }
            });

            $("#currValue").val($("#igRating1").igRating("value"));
            OnSelectPrecision($("#selectPrecision").val());

            $("#selectPrecision").change(function () {
                var value = $(this).val();
                OnSelectPrecision(value);
            });

            function OnSelectPrecision(value) {
                $("#igRating1").igRating("option", "precision", value);
                $("#dynamicDiv").css("visibility", (value === "exact") ? "visible" : "hidden");
                $("#currValue").val($("#igRating1").igRating("value"));
            }

            $("#decimalPlaces").change(function () {
                $("#igRating1").igRating("option", "roundedDecimalPlaces", parseInt($(this).val(), 10));
            });

            $("#chkPercent").change(function () {
                $("#igRating1").igRating("option", "valueAsPercent", $(this).is(":checked"));
                $("#currValue").val($("#igRating1").igRating("value"));
            });

        });

    </script>

</body>
</html>