title: KendoUI - How to create controls at runtime based on user input?
body: <p>Is there a way to create different type of controls in a KendoUI grid column at runtime?  The scenario is, I have 2 columns in my grid.  The first column displays a dropdown list which has the some strings like, 'Name', 'StartDate', etc.  When user selects a value from it, I want to show an appropriate control in the 2nd column.  If the user picks 'StartDate', I want to show the 'DateTime' control.  Can you please let me know how to do this thru ASP.Net MVC 5 wrapper?</p>
  
  <p>Sample Code:</p>
  
  <pre><code>@(Html.Kendo().Grid&lt;ArulUI.Models.UserFilter&gt;()
      .Name("Grid")
      .Columns(columns =&gt;
      {
          columns.ForeignKey(f =&gt; f.FilterName, (System.Collections.IEnumerable)ViewData["Filters"], "Name", "Name");
          columns.Bound(f =&gt; f.FilterValue).ClientTemplate("#= gridValueColumnFormatter(data) #");
  
          columns.Template(t =&gt; { }).HeaderTemplate("").ClientTemplate(@"
              &lt;a href='javascript: void(0)' class='abutton delete' onclick='deleteRow(this)' title='remove'&gt;remove&lt;/a&gt;")
               .Width(100).Title("");
      })
      .ToolBar(toolbar =&gt;
      {
          toolbar.Create();
          toolbar.Save();
      })
  
      .Editable(editable =&gt; editable.Mode(GridEditMode.InCell))
      .Editable(e =&gt; e.DisplayDeleteConfirmation(false))
      .Sortable()
      .Scrollable()
      .Events(e =&gt; e.Edit("onEdit"))
      .DataSource(dataSource =&gt; dataSource
          .Ajax()
          .ServerOperation(false)
          .Model(model =&gt;
          {
              model.Id(f =&gt; f.Id);
              model.Field(f =&gt; f.Id).Editable(false);
          })
          .Create(create =&gt; create.Action("Filter_Create", "Home"))
          .Destroy(destroy =&gt; destroy.Action("Filter_Delete", "Home"))
          .Read(read =&gt; read.Action("Filter_Read", "Home"))
          .Update(update =&gt; update.Action("Filter_Update", "Home"))
      )
  )
  
  &lt;script&gt;
  
      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();
      }
  &lt;/script&gt;
  
  Controller:
  
  public class HomeController : Controller
      {
          public static List&lt;ArulUI.Models.Filter&gt; ListFilter = new List&lt;ArulUI.Models.Filter&gt;();
          public static List&lt;UserFilter&gt; ListUserFilters = new List&lt;UserFilter&gt;();
          public void Seed()
          {
              ListFilter = new List&lt;Models.Filter&gt;{
                  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&lt;UserFilter&gt; {
                  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 =&gt; 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 &amp;&amp; ModelState.IsValid)
              {
                  var target = ListUserFilters.Where(f =&gt; 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 &amp;&amp; ModelState.IsValid)
              {
                  var target = ListUserFilters.Where(f =&gt; 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();
          }
      }
  </code></pre>
  
  <p>Thank you</p>