<form method="post">
      <input type="hidden" asp-for="editedFileName" />
      <input type="hidden" asp-for="ImagePath" />
      <div class="admin-button-container align-right">
        <button type="submit" class="btn btn-theme-admin">Save Image</button>
      </div>
      <div class="imageEditor"></div>
    </form>

$(document).ready(function() {
	var OpenExecuted = false;
	//  page load
	showImgOption();
});


function onSelect(e) {
	$('#editedFileName').val(e.files[0].name);
}

function handleUploadImageEvents(imageEditor) {
	OpenExecuted = true;
	imageEditor._upload.bind("select", onSelect);
}

function onImageRendered(e) {
	zoom();
	saveImagePath();
};

function onExecute(e) {
	if (e.command === "OpenImageEditorCommand") {
		setTimeout(function() {
			handleUploadImageEvents(e.sender);
		});
	}
};

// this function will zoom out the photo if the height is more than 600px 
// so that it does not overlap other fields on the page
function zoom() {
	var imgEditor = $('.imageEditor').data('kendoImageEditor');

	imgEditor.executeCommand({ command: "ZoomImageEditorCommand", options: imgEditor.zoom = 1 });
	var imgHt = $(".k-imageeditor-canvas").height();
	if (imgHt > 600) {
		imgEditor.executeCommand({ command: "ZoomImageEditorCommand", options: imgEditor.getZoomLevel() - 0.5 });
	}
};


function ImgEditor() {
	$(`.imageEditor`).kendoImageEditor({
		toolbar: {
			items: [
				"open",
				"save",
				"crop",
				"resize",
				"undo",
				"redo",
				"zoomIn",
				"zoomOut",
				"zoomDropdown",
			]

		},
		messages: {
			toolbar: {
				open: "Upload"
			},
		},
		imageUrl: $('[id="ImagePath"]').val(),
		height: 650,
		error: onError,
		imageRendered: onImageRendered,
		execute: onExecute,
	});
}



function onError(e) {
	console.log('Error');
};

function showImgOption() {
	var imgFilePath = $('[id="ImagePath"]').val();
	if (imgFilePath.length > 0) {
		var imgFilename = imgFilePath.slice(imgFilePath.lastIndexOf("/") + 1, imgFilePath.length + 1);
		$('[id="FileName"]').val(imgFilename);
	}

		ImgEditor();
}


function saveImagePath() {
	const imageEditor = $('.imageEditor').data('kendoImageEditor');
	const image = imageEditor.getCurrentImage();
	const imageObject = new DOMParser().parseFromString(image, "text/xml");
	const canvas = imageEditor.getCanvasElement();
	const fileArray = canvas.toDataURL().split(",");
	const base64String = canvas.toDataURL();
	const imagePathSaved = $('[id="ImagePath"]').val(fileArray[1]);
}

columns.ForeignKey(c => c.STATUS, Helper.IDTB_PRUEFUNG.Dropdowns.Status, "Value", "Text");

public class Dropdowns
{
    public static List<SelectListItem> Status
    {
        get
        {
            return new List<SelectListItem>()
            {
                new SelectListItem()
                {
                    Text = "New",
                    Value = "NEU",
                    Selected = true
                },                
                new SelectListItem()
                {
                    Text = "Locked",
                    Value = "GESPERRT"
                }
            };
        }
    }
}

[AcceptVerbs(HttpVerbs.Post)]
public JsonResult Read([DataSourceRequest] DataSourceRequest request, int lot_id)
{
    var pruefungen = db.IDTB_PRÜFUNG.Where(p => p.LOT_ID == lot_id);

    return Json(pruefungen.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
}

<div class="row">
    <div class="col">
        <div class="form-group">
            @Html.LabelFor(model => model.TESTDATUM, htmlAttributes: new { @class = "control-label" })
            <div>
                @Html.Kendo().DatePickerFor(model => model.TESTDATUM)
                @Html.ValidationMessageFor(model => model.TESTDATUM, "", new { @class = "text-danger" })
            </div>
        </div>
    </div>
</div>

<div style="width: 17.5em">
    @Html.Kendo().DatePickerFor(model => model.TESTDATUM)
</div>

public class Dropdowns
{        
    public static List<SelectListItem> Status
    {
        get
        {
            return new List<SelectListItem>()
            {
                new SelectListItem()
                {
                    Text = Resource.ACTIVE,
                    Value = "Aktiv"
                },
                new SelectListItem()
                {
                    Text = Resource.DELETED,
                    Value = "Gelöscht"
                },
                new SelectListItem()
                {
                    Text = Resource.EXPIRED,
                    Value = "Ausgelaufen"
                }
            };
        }
    }
}

[Required]
[UIHint("STATUSEditor")]        
[Display(Name = "STATUS", ResourceType = typeof(Resource))]
public string STATUS { get; set; }

@using Kendo.Mvc.UI
@model Models.IDTB_CHARGE

@(
Html.Kendo().DropDownListFor(m => m.STATUS)
    .Name("STATUS")
    .DataValueField("Value")
    .DataTextField("Text")
    .ValuePrimitive(true)    
    .BindTo(Areas.Chargen.Helper.Dropdowns.Status)
)

 columns.Bound(c => c.STATUS).ClientTemplate("#=STATUS.Text#").Width(130);