let newShape = function() {
            let dataviz = kendo.dataviz
            let g = new dataviz.diagram.Group()
            let dataItem = options.dataItem

            g.append(new dataviz.diagram.Rectangle({
                width: 210,
                height: 75,
                stroke: {
                    width: 0
                },
                fill: {
                    gradient: {
                        type: 'linear',
                        stops: [{
                            color: dataItem.colorScheme,
                            offset: 0,
                            opacity: 0.5
                        }, {
                            color: dataItem.colorScheme,
                            offset: 1,
                            opacity: 1
                        }]
                    }
                }
            }))
            
            g.append(new dataviz.diagram.TextBlock({
                text: dataItem.name,
                x: 20,
                y: 20,
                fill: '#fff'
            }))
            
            g.append(new dataviz.diagram.TextBlock({
                text: dataItem.props,
                x: 20,
                y: 40,
                fill: '#fff'
            }))
            return g
}

<script src="~/Scripts/jquery-3.4.1.min.js"></script>
<script src="~/Scripts/kendo/2022.3.1109/kendo.all.min.js"></script>

@Styles.Render("~/Content/css")
@Styles.Render("~/Content/kendo/styles")
@Styles.Render("~/Content/kendo/css")

<style>
    .row {
        padding-top: 12px;
        padding-bottom: 12px;
    }
</style>

<main>

    <div id="cloneDiv" style="display:none;">
        <div id="row0" class="row">
            <div class="col-md-1 form-label">Date/Time:</div>
            <div class="col-md-5">
                <input id="dateTimePickerFrom_row0" />
            </div>
            <div class="col-md-5">
                <input id="dateTimePickerTo_row0" />
            </div>
            <btn id="button_row0" class="col-md-1 btn btn-outline-info" onclick="addNewRow(this);">Add</btn>
        </div>
    </div>

    <div id="parentDiv">
        <div id="row1" class="row">
            <div class="col-md-3">
                <input id="dateTimePickerBase_row1" class="date-time-picker" />
            </div>
            <div class="col-md-3">
                <input id="dateTimePickerFrom_row1" class="date-time-picker" />
            </div>
            <div class="col-md-3">
                <input id="dateTimePickerTo_row1" class="date-time-picker" />
            </div>
            <btn id="button_row1" class="col-md-1 btn btn-outline-info" onclick="addNewRow(this);">Add</btn>
        </div>
    </div>
</main>

<script>

    var row = parseInt(1);

    console.log('converting before document ready...');
    convertNewPickerControl("dateTimePickerBase_row1")

    $(document).ready(function () {
        console.log('converting within document ready...');
        convertNewPickerControl("dateTimePickerFrom_row1");
    });

    console.log('converting after document ready...');
    convertNewPickerControl("dateTimePickerTo_row1");

    function convertNewPickerControl(sender) {

        var savedStartDate = new Date();

        $("#" + sender).kendoDateTimePicker({
            format: "MM/dd/yyyy hh:mm:ss tt",
            value: savedStartDate,
            min: savedStartDate
        });
        console.log('...successfully converted.');
    }

    function addNewRow(sender) {

        var sourceRow = $('#row0');
        var newRow = $('#row' + row);
        var currentRowNumber = 'row' + row;
        var regex = new RegExp(currentRowNumber, "g");
        var proxyListRegex = new RegExp(/\.ProxyList\[\d+\]/g);
        var _rowRegex = new RegExp(/\_row\d+/g);

        var clonedRow = $('<div>').append(sourceRow.clone()).html().replace(regex, 'row' + (parseInt(row) + 1)).replace(proxyListRegex, '.ProxyList[' + row + ']').replace(_rowRegex, '_row' + (parseInt(row) + 1));

        clonedRow = clonedRow.replace("row0", "row" + (parseInt(row) + 1));
        newRow.after(clonedRow);

        /* convert new inputs to datetimepickers */
        var newFromControl = "dateTimePickerFrom_row" + row;
        var newToControl = "dateTimePickerTo_row" + row;

        convertNewPickerControl(newFromControl);
        convertNewPickerControl(newToControl);

        row = (parseInt(row) + 1);

    }
</script>

series: [
                    {
                        type: "pie",
                        field: "value",
                        categoryField: "category",
                        aggregate: "sum",
                        padding: 10,
                        overlay: {
                            gradient: "none",
                        },
                        categoryAxis: {
                            baseUnit: "months",
                            maxDivisions: 5,
                            rangeLabels: {
                              visible: true,
                              format: "M"
                            },
                            labels: {
                              format: "d-M"
                            }
                        },]

                    open: function () {
                        let optionLabel = this.element.getKendoDropDownList().list.find(".k-list-optionlabel");
                        let isDisabled = $(optionLabel).find(".disabled").length > 0;
                        if (isDisabled) {
                            $(optionLabel).hide();
                        }
                    },