$("#pdfPreviewList").kendoListBox({
            draggable: true,
            connectWith: "proposal",
            selectable: "multiple",
            dropSources: ["proposal"],
            template: `
                    <div id='#:file#'>
                        #:pn#
                    </div>`,
            toolbar: {
                tools: ["moveUp", "moveDown", "transferTo"]
            },
            change: (e) => {
                let f = e.sender.select()[0].getElementsByTagName("div")[0].id;
                displayPdfPrview(f)
            }
        });

select: "multiple" // normal selection *without* box selection
select: "dragToSelect" // selection with box selection and all the other features of "multiple" such as key modifiers

    interface ChartOptions {
        name?: string | undefined;
        autoBind?: boolean | undefined;
        axisDefaults?: ChartAxisDefaults | undefined;
        categoryAxis?: ChartCategoryAxisItem | ChartCategoryAxisItem[] | undefined;
        chartArea?: ChartChartArea | undefined;
        dataSource?: any|any|kendo.data.DataSource | undefined;
        legend?: ChartLegend | undefined;
        panes?: ChartPane[] | undefined;
        pannable?: boolean | ChartPannable | undefined;
        pdf?: ChartPdf | undefined;
        persistSeriesVisibility?: boolean | undefined;
        plotArea?: ChartPlotArea | undefined;
        renderAs?: string | undefined;
        series?: ChartSeriesItem[] | undefined;
        seriesColors?: any;
        seriesDefaults?: ChartSeriesDefaults | undefined;
        theme?: string | undefined;
        subtitle?: string | ChartSubtitle | undefined;
        title?: string | ChartTitle | undefined;
        tooltip?: ChartTooltip | undefined;
        transitions?: boolean | undefined;
        valueAxis?: ChartValueAxisItem | ChartValueAxisItem[] | undefined;
        xAxis?: ChartXAxisItem | ChartXAxisItem[] | undefined;
        yAxis?: ChartYAxisItem | ChartYAxisItem[] | undefined;
        zoomable?: boolean | ChartZoomable | undefined;
        axisLabelClick?(e: ChartAxisLabelClickEvent): void;
        dataBound?(e: ChartDataBoundEvent): void;
        drag?(e: ChartDragEvent): void;
        dragEnd?(e: ChartDragEndEvent): void;
        dragStart?(e: ChartDragStartEvent): void;
        legendItemClick?(e: ChartLegendItemClickEvent): void;
        legendItemHover?(e: ChartLegendItemHoverEvent): void;
        legendItemLeave?(e: ChartLegendItemLeaveEvent): void;
        noteClick?(e: ChartNoteClickEvent): void;
        noteHover?(e: ChartNoteHoverEvent): void;
        noteLeave?(e: ChartNoteLeaveEvent): void;
        paneRender?(e: ChartPaneRenderEvent): void;
        plotAreaClick?(e: ChartPlotAreaClickEvent): void;
        plotAreaHover?(e: ChartPlotAreaHoverEvent): void;
        plotAreaLeave?(e: ChartPlotAreaLeaveEvent): void;
        render?(e: ChartRenderEvent): void;
        select?(e: ChartSelectEvent): void;
        selectEnd?(e: ChartSelectEndEvent): void;
        selectStart?(e: ChartSelectStartEvent): void;
        seriesClick?(e: ChartSeriesClickEvent): void;
        seriesHover?(e: ChartSeriesHoverEvent): void;
        seriesOver?(e: ChartSeriesOverEvent): void;
        seriesLeave?(e: ChartSeriesLeaveEvent): void;
        zoom?(e: ChartZoomEvent): void;
        zoomEnd?(e: ChartZoomEndEvent): void;
        zoomStart?(e: ChartZoomStartEvent): void;
    }

var chart = $("#chart").data("kendoChart");
var series = [];

$(theData.Serieses).each(function (index) {
	series.push({
		name: theData.Serieses[index].Name,
		field: theData.Serieses[index].Name,
		data: theData.Serieses[index].SeriesPoints,
		xField: "X",
		yField: "Y",
		color: theData.Serieses[index].Colour,
		markers: {
			type: theData.Serieses[index].Shape
		}
	});
});
chart.setOptions({ series: series, noData: series.length == 0 });
chart.redraw();
console.log(chart.options);

var datepicker = $("#datepicker").data("kendoDatePicker").reset();

dataBound: function(e) {
        e.sender.autoFitColumns();
},

/**
     * At the time of this writing, the only kosher way to dynamically add/remove tiles to a kendoUI TileLayout is
     * to use the `setOptions` method and pushing/slicing the `containers` array. However, doing this destroys the
     * TileLayout and re-initializes it. We would have to re-initialize all the data widgets and submit requests to
     * the server all over again. So... I lifted this from the KendoUI TileLayout source code and modified it to
     * suit our needs.
     * It seems to work, but it just one update away from breaking. I guess I like living on the edge.
     *
     * @deprecated
     * @param options {Object} the kendo.ui.TileLayout `containers` item configuration
     * @param idx {Number} the index of the tile to add
     * @param kendoTileLayout {kendo.ui.TileLayout} the kendo tile layout instance
     */
    const addContainer = (options, idx, kendoTileLayout) => {
        const body = $(`<div></div>`).addClass('k-tilelayout-item-body k-card-body');
        const headerSettings = options.header;
        const id = kendo.guid();

        const container = $(`<div></div>`)
            .addClass('k-tilelayout-item k-card')
            .attr({
                id: id,
                role: 'listitem',
                'aria-keyshortcuts': 'Enter',
            });

        if (headerSettings && (headerSettings.template || headerSettings.text)) {
            const header = $('<div></div>').addClass('k-tilelayout-item-header k-card-header');
            const headerContent = headerSettings.text ? `<div class="k-card-title">${headerSettings.text}</div>` : null;

            if (kendoTileLayout.options.reorderable) {
                header.addClass('k-cursor-move');
            }

            header.append(headerContent || kendo.template(headerSettings.template)({}));
            header.appendTo(container);
        }

        body.append(kendo.template(options.bodyTemplate)({}));
        body.appendTo(container);
        container.appendTo(kendoTileLayout.element);

        kendoTileLayout._addContainer(container, options, idx, id);
    };

    /**
     * @deprecated
     * This also is using KendoUI internal source code. If/when the folks at Telerik decide to implement a different
     * solution for dynamically adding/removing tiles, that should be used instead and this should be removed.
     *
     * @param widgetId {Number} the id of the widget to remove
     * @param kendoTileLayout {kendo.ui.TileLayout} the kendo tile layout instance
     */
    const removeContainer = (widgetId, kendoTileLayout) => {
        const widgetRegex = new RegExp(`${widgetId}`);
        const matchedContainer = kendoTileLayout.options.containers.find(container => container.bodyTemplate.match(widgetRegex));

        const containerGuid = matchedContainer.id;
        const containerItem = kendoTileLayout.itemsMap[containerGuid];
        const containerItemIdx = kendoTileLayout.items.indexOf(containerItem);

        kendoTileLayout.options.containers.splice(containerItemIdx, 1);
        delete kendoTileLayout.itemsMap[containerGuid];
        kendoTileLayout.items.splice(containerItemIdx, 1);

        $(`#widget-${widgetId}`).closest('.k-tilelayout-item.k-card').remove();
        kendoTileLayout._updateContainers();

        // I've got a bad feeling about this.
        kendoTileLayout.element.off('mousemove'); // after removing a container, the resize handles weren't working.
        kendoTileLayout.resizable.destroy();
        kendoTileLayout.element.find('.k-resize-handle').remove();
        kendoTileLayout.resizeHandle = null;
        kendoTileLayout._resizable();
    };

...
		&.k-scrollview {

			.k-scrollview-prev, .k-scrollview-next {

				//Prevent the control from hiding these buttons when it reaches the 'end'
				//We will be using some custom logic to force the 'wrap around'
				display:flex !important; 
...

//After the page load & scroll view is initialized...

//note: $slides is a jquery instance that the scrollView is attached to
let scrollView = $slides.data("kendoScrollView");

let $prev = $slides.find('.k-scrollview-prev');
let $next = $slides.find('.k-scrollview-next');
$prev.on("click", function (e) {
	// NOTE: Here we are looking at an 'internal' variable, this is dependent on the version of Kendo we are using - may need to change
	// in the future
	// I figured this out by looking at the implementation in the source
	//		\src\js\kendo.scrollview.js
	let pageCount = scrollView._content.pageCount;
	let currentPage = scrollView._content.page;
	if (pageCount > 1 && currentPage === 0) {
		e.preventDefault();
		e.stopPropagation();
		scrollView.scrollTo(pageCount-1);						
	}
});

$next.on("click", function (e) {
	let pageCount = scrollView._content.pageCount;
	let currentPage = scrollView._content.page;
	if (pageCount > 1 && currentPage === pageCount - 1) {
		e.preventDefault();
		e.stopPropagation();
		scrollView.scrollTo(0);						
	}
});