public class AlertRuleGridViewModel
{
    public int Id { get; set; }

    [UIHint("ComponentEditor")]
    public string? Component { get; set; }

    [UIHint("EmailAddress")]
    public string? Email { get; set; }

    [UIHint("TypeEditor")]
    public string? Type { get; set; }

    [UIHint("Boolean")]
    public bool Enabled { get; set; }
}

<div class="container alert-rules-grid">
    @(Html.Kendo().Grid<AlertRuleGridViewModel>()
        .Name("alert-grid")
        .DataSource(dataSource => dataSource
        .Ajax()
        .Model(model =>
        {
            model.Id(l => l.Id);
            model.Field(field => field.Id).Editable(false);
            model.Field(field => field.Type).DefaultValue(ViewData["defaultType"] as String);
        })
        .PageSize(12)
        .Sort(a => a.Add("Id").Descending())
        .Read(read => read.Action("GetRules", "Alerts").Data("additionalData"))
        .Create(update => update.Action("UpdateRule", "Alerts"))
        .Update(update => update.Action("UpdateRule", "Alerts"))
        .Destroy(destroy => destroy.Action("DeleteRule", "Alerts"))
        .Events(e => e.Error("gridErrorHandler"))
        )
        .Columns(columns =>
        {
            columns.Bound(b => b.Id).Title("Id").Visible(true).Width("4%");
            columns.Bound(b => b.Component).Title("Component").EditorTemplateName("ComponentEditor").Visible(true);
            columns.Bound(b => b.Email).Title("Email").Visible(true);
            columns.Bound(b => b.Type).Title("Log Type").EditorTemplateName("TypeEditor").Visible(true);
            columns.Bound(b => b.Enabled).Title("Enabled").ClientTemplate("#=renderStatus(data)#").Visible(true);
            columns.Command(command =>
            {
                command.Edit();
                command.Destroy();
            });
        }
        )
        .ToolBar(toolBar =>
        {
            toolBar.ClientTemplateId("toolBarTemplate");
        })
        .Events(events =>
        {
            events.Cancel("onCancelEdit");
            events.Save("onSave");
        }
        )
        .Editable(editable => editable.Mode(GridEditMode.InLine))
        .Pageable() // Enable paging
        .Sortable() // Enable sorting
        .Scrollable(s => s.Height("auto"))
        .Resizable(resize => resize.Columns(true))
        )
</div>

<td class="k-table-td" role="gridcell" data-container-for="Component">
	<span class="k-input k-combobox k-combobox-clearable k-input-solid k-input-md k-rounded-md k-valid" style="">
		<input name="Component.Component_input" class="k-input-inner k-valid" type="text" autocomplete="off" title="" role="combobox" aria-expanded="false" style="" tabindex="0" aria-disabled="false" aria-readonly="false" aria-busy="false" aria-autocomplete="none" aria-controls="Component_Component_listbox" data-bind="value:Component.Component_input">
			<span unselectable="on" class="k-clear-value k-hidden" title="clear" role="button" tabindex="-1">
				<span class="k-svg-icon k-svg-i-x" aria-hidden="true">
					<svg viewBox="0 0 512 512" focusable="false" xmlns="http://www.w3.org/2000/svg">
						<path d="M416 141.3 301.3 256 416 370.7 370.7 416 256 301.3 141.3 416 96 370.7 210.7 256 96 141.3 141.3 96 256 210.7 370.7 96l45.3 45.3z"/>
					</svg>
				</span>
			</span>
			<button type="button" class="k-input-button k-button k-button-md k-button-solid k-button-solid-base k-icon-button" aria-label="expand combobox" role="button" tabindex="-1">
				<span class="k-svg-icon k-svg-i-caret-alt-down k-button-icon" aria-hidden="true">
					<svg viewBox="0 0 512 512" focusable="false" xmlns="http://www.w3.org/2000/svg">
						<path d="M256 352 128 160h256L256 352z"/>
					</svg>
				</span>
			</button>
			<input id="Component_Component" name="Component.Component" type="text" value="" data-role="combobox" aria-disabled="false" aria-readonly="false" style="display: none;" data-bind="value:Component.Component"/>
			<script>kendo.syncReady(function(){jQuery("#Component_Component").kendoComboBox({"dataTextField":"Name","dataValueField":"Value","valuePrimitive":true,"dataSource":[{"Name":"AppLog.Common.Test","Value":"AppLog.Common.Test"},{"Name":"AppLog.WebAPI","Value":"AppLog.WebAPI"},{"Name":"BadgeReader","Value":"BadgeReader"},{"Name":"CCS.WebUI","Value":"CCS.WebUI"},{"Name":"LVCVA.AppLog.Internal.Web","Value":"LVCVA.AppLog.Internal.Web"},{"Name":"LVCVA.AppSecurity.Domain","Value":"LVCVA.AppSecurity.Domain"},{"Name":"Registration.WPF.UI","Value":"Registration.WPF.UI"},{"Name":"spLogApplicationMessage","Value":"spLogApplicationMessage"}]});});</script>
			<span class="field-validation-valid" data-valmsg-for="Component" data-valmsg-replace="true"/>
		</td>

<td class="k-table-td" role="gridcell" data-container-for="Type">
	<span title="" class="k-picker k-dropdownlist k-picker-solid k-picker-md k-rounded-md k-valid" unselectable="on" role="combobox" aria-expanded="false" tabindex="0" aria-controls="Type_Type_listbox" aria-disabled="false" aria-readonly="false" aria-busy="false" aria-describedby="e73b8727-5e28-4d9b-9faa-df8239f54aa5" style="">
		<span id="e73b8727-5e28-4d9b-9faa-df8239f54aa5" unselectable="on" class="k-input-inner">
			<span class="k-input-value-text"/>
		</span>
		<span role="button" class="k-input-button k-button k-button-md k-button-solid k-button-solid-base k-icon-button" aria-label="select" type="button">
			<span class="k-svg-icon k-svg-i-caret-alt-down k-button-icon" aria-hidden="true">
				<svg viewBox="0 0 512 512" focusable="false" xmlns="http://www.w3.org/2000/svg">
					<path d="M256 352 128 160h256L256 352z"/>
				</svg>
			</span>
		</span>
		<input id="Type_Type" name="Type.Type" type="text" value="" data-role="dropdownlist" style="display: none;" data-bind="value:Type.Type"/>
		<script>kendo.syncReady(function(){jQuery("#Type_Type").kendoDropDownList({"dataTextField":"Type","dataValueField":"Value","valuePrimitive":true,"dataSource":[{"Type":"Critical","Value":"Critical"},{"Type":"Error","Value":"Error"},{"Type":"Warning","Value":"Warning"},{"Type":"Information","Value":"Information"},{"Type":"Verbose","Value":"Verbose"},{"Type":"Start","Value":"Start"},{"Type":"Stop","Value":"Stop"},{"Type":"Suspend","Value":"Suspend"},{"Type":"Resume","Value":"Resume"}]});});</script>
		<span class="field-validation-valid" data-valmsg-for="Type" data-valmsg-replace="true"/>
	</td>