KendoUI - Как создавать элементы управления во время выполнения на основе пользовательского ввода?

Есть ли способ создать различные типы элементов управления в столбце сетки KendoUI во время выполнения? Сценарий таков: у меня в сетке 2 столбца. В первом столбце отображается раскрывающийся список, в котором есть несколько строк, таких как «Имя», «Дата начала» и т. Д. Когда пользователь выбирает из него значение, я хочу показать соответствующий элемент управления во втором столбце. Если пользователь выбирает «StartDate», я хочу показать элемент управления «DateTime». Не могли бы вы сообщить мне, как это сделать через оболочку ASP.Net MVC 5?

Образец кода:

@(Html.Kendo().Grid<ArulUI.Models.UserFilter>()
    .Name("Grid")
    .Columns(columns =>
    {
        columns.ForeignKey(f => f.FilterName, (System.Collections.IEnumerable)ViewData["Filters"], "Name", "Name");
        columns.Bound(f => f.FilterValue).ClientTemplate("#= gridValueColumnFormatter(data) #");

        columns.Template(t => { }).HeaderTemplate("").ClientTemplate(@"
            <a href='javascript: void(0)' class='abutton delete' onclick='deleteRow(this)' title='remove'>remove</a>")
             .Width(100).Title("");
    })
    .ToolBar(toolbar =>
    {
        toolbar.Create();
        toolbar.Save();
    })

    .Editable(editable => editable.Mode(GridEditMode.InCell))
    .Editable(e => e.DisplayDeleteConfirmation(false))
    .Sortable()
    .Scrollable()
    .Events(e => e.Edit("onEdit"))
    .DataSource(dataSource => dataSource
        .Ajax()
        .ServerOperation(false)
        .Model(model =>
        {
            model.Id(f => f.Id);
            model.Field(f => f.Id).Editable(false);
        })
        .Create(create => create.Action("Filter_Create", "Home"))
        .Destroy(destroy => destroy.Action("Filter_Delete", "Home"))
        .Read(read => read.Action("Filter_Read", "Home"))
        .Update(update => update.Action("Filter_Update", "Home"))
    )
)

<script>

    function gridValueColumnFormatter(dataRow) {
        var returnValue = "";
        if (dataRow.FilterName == "DateTimeRange") {
            returnValue = kendo.format('{0:MM/dd/yyyy hh:mm}', new Date(dataRow.FilterValue));
        }
        else {
            returnValue = dataRow.FilterValue;
        }

        return returnValue;
    }


    function onEdit(e) {
        var actElement = document.activeElement;
        //alert(txt.id);
        if (actElement.id == "FilterValue") {
            var selectedValue = e.model.FilterValue;
            var selectedDate = Date.parse(selectedValue);
            console.log(selectedValue);
            console.log(selectedDate);

            if (e.model.FilterName == "DateTimeRange") {
                if (isNaN(selectedDate)) {
                    initDatePicker(new Date());
                } else {
                    //initDatePicker(selectedValue);
                    $("#FilterValue").kendoDateTimePicker({
                        value: new Date(selectedValue)
                    });
                }
            } else {
                if (!isNaN(selectedDate)) {
                    $("#FilterValue").val("");
                }
            }
        }
    }

    function initDatePicker(dateValue) {
        $("#FilterValue").empty();

        $("#FilterValue").kendoDateTimePicker({
            value: new Date(dateValue),
            format: "MM/dd/yyyy hh:mm",
            parseFormats: "MM/dd/yyyy hh:mm"
        });
        var dateTimePicker = $("#FilterValue").data("kendoDateTimePicker");
        dateTimePicker.value(dateValue);

    }

    function disposeDatePicker() {
        var datepicker = $("#FilterValue").data("kendoDateTimePicker");
        if (datepicker) {
            popup = datepicker.dateView.popup;
            element = popup.wrapper[0] ? popup.wrapper : popup.element;

            //Move the shared calendar to the body
            kendo.ui.DatePicker.sharedCalendar.element.hide().appendTo(document.body);

            //remove popup element;
            element.remove();
            //unwrap element
            var input = datepicker.element.show();

            input.removeClass("k-input"); //.css("width", "auto");
            input.insertBefore(datepicker.wrapper);

            datepicker.wrapper.remove();

            //remove DatePicker object
            input.removeData("kendoDateTimePicker");
        }
    }

    function deleteRow(element) {
        grid = $("#Grid").data("kendoGrid");
        grid.removeRow($(element).closest("tr"));
    }

    function createRow() {
        grid = $("#Grid").data("kendoGrid");
        grid.addRow();
    }
</script>

Controller:

public class HomeController : Controller
    {
        public static List<ArulUI.Models.Filter> ListFilter = new List<ArulUI.Models.Filter>();
        public static List<UserFilter> ListUserFilters = new List<UserFilter>();
        public void Seed()
        {
            ListFilter = new List<Models.Filter>{
                new ArulUI.Models.Filter { Name = "Name", Type="string"},
                new ArulUI.Models.Filter { Name = "Dept", Type="string"},
                new ArulUI.Models.Filter { Name = "Age", Type="string"},
                new ArulUI.Models.Filter { Name = "DateTimeRange", Type="datetime"}
            };

            ListUserFilters = new List<UserFilter> {
                new UserFilter { Id = 1, FilterName="Name", FilterValue = "Empty"},
                new UserFilter { Id = 2, FilterName="Dept", FilterValue = "Empty2"},
                //new UserFilter { Id = 2, FilterName="DateTimeRange", FilterValue = "12/20/2013 10:00"}
            };
        }

        public ActionResult Index()
        {
            this.Seed();
            ViewData["Filters"] = ListFilter.Select(f => new
            {
                Name = f.Name,
                Type = f.Type
            });

            return View();
        }

        public ActionResult Filter_Read([DataSourceRequest] DataSourceRequest request)
        {
            return Json(ListUserFilters.ToDataSourceResult(request));
        }

        public ActionResult Filter_Delete([DataSourceRequest] DataSourceRequest request, UserFilter userFilter)
        {
            if (userFilter != null && ModelState.IsValid)
            {
                var target = ListUserFilters.Where(f => f.Id == userFilter.Id).FirstOrDefault();

                if (target != null)
                {
                    ListUserFilters.Remove(target);
                }
            }

            return Json(ModelState.ToDataSourceResult());
        }

        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult Filter_Update([DataSourceRequest] DataSourceRequest request, UserFilter userFilter)
        {
            if (userFilter != null && ModelState.IsValid)
            {
                var target = ListUserFilters.Where(f => f.Id == userFilter.Id).FirstOrDefault();
                if (target != null)
                {
                    int targetIndex = ListUserFilters.IndexOf(target);
                    ListUserFilters[targetIndex].FilterName = target.FilterName;
                    ListUserFilters[targetIndex].FilterValue = target.FilterValue;
                }
            }

            return Json(ModelState.ToDataSourceResult());
        }

        public ActionResult Filter_Create([DataSourceRequest] DataSourceRequest request, UserFilter userFilter)
        {
            userFilter.Id = ListUserFilters[ListUserFilters.Count - 1].Id + 1;
            userFilter.Id = 10;
            ListUserFilters.Add(userFilter);

            return Json(new[] { userFilter }.ToDataSourceResult(request, ModelState));
        }


        public ActionResult About()
        {
            ViewBag.Message = "Your application description page.";

            return View();
        }

        public ActionResult Contact()
        {
            ViewBag.Message = "Your contact page.";

            return View();
        }
    }

Спасибо