DropDownList works in Edit mode but not in client mode

[Greg]

This grid is working. It has a DropDownList in the muni_code column's EditorTemplate, which also works.

@(Html.Kendo().Grid<PublicUserMunicipality>()
                  .Name("publicUserMunicipalitiesGrid")
                  .Columns(columns =>
                    {
                      columns.Bound(u => u.muni_code).EditorTemplateName("muni_codesList");
                      columns.Bound(u => u.SuperUser).ClientTemplate("<input type='checkbox' #= SuperUser ? checked='checked' : '' # ></input>");
                      columns.Bound(u => u.CanSubmitForms).ClientTemplate("<input type='checkbox' #= CanSubmitForms ? checked='checked' : '' # ></input>");
                      columns.Command(command => { command.Edit(); command.Destroy(); }).Width(180);
                    })
                  .ToolBar(toolbar => toolbar.Create())
                  .DataSource(dataSource => dataSource
                    .Ajax()
                    .Model(model => model.Id(p => p.Id))
                    .Read(read => read.Action("PublicUserMunicipalitiesRead", "PublicUserMunicipalities")
                                            .Data("getSelectedPublicUserId"))
                    .Create(create => create.Action("PublicUserMunicipalitiesCreate", "PublicUserMunicipalities"))
                    .Update(update => update.Action("PublicUserMunicipalitiesUpdate", "PublicUserMunicipalities"))
                    .Destroy(destroy => destroy.Action("PublicUserMunicipalitiesDestroy", "PublicUserMunicipalities"))
                  )
                )

 

I want to use the same DropDownList in non-edit mode. i.e. Have the ClientTemplate the same as the EditorTemplate.

I don't see the utility of posting the various failed attempts I've made to the

columns.Bound(u => u.muni_code).EditorTemplateName("muni_codesList");

line so I'll stop here.

Thanks.

[Greg]

To clarify, I don't want the ClientTemplate to allow a list to actually drop down or allow user interaction. I just want the data to value translation to occur.

[Georgi Krustev]

Hello Greg,

If I understand you question correctly, you would like to display the selected text inside the grid column. If this is the case, please refer to this online demo that shows how to use ClientTemplate option:

• http://demos.telerik.com/aspnet-mvc/grid/editing-custom

You can find more details about grid templates here:

• http://docs.telerik.com/kendo-ui/aspnet-mvc/helpers/grid/faq#how-do-i-have-conditional-logic-in-a-column-client-template

Regards,
Georgi Krustev
Telerik

[Greg]

In that demo, http://demos.telerik.com/aspnet-mvc/grid/editing-custom, where is Kendo.Mvc.Examples.Models.CategoryViewModel defined?

Most Telerik demos seem to include an undefined element or three that make them very hard to use as examples...

[Greg]

Ok. I have guessed at the missing definitions in the demo and have gotten my own app to:

1) Include the lookup data in the ViewData. (categories in the demo, municipalities in mine)

2) Use a ViewModel with the added virtual element (ProductViewModel.Category in the demo, PublicUserMunicipalityViewModel.Municipality in mine)

 

When my controller returns the PublicUserMunicipalityViewModel data to the grid, no rows display in the grid. (I've verified that the controller is returning rows). This is my problem now.

If I click "Add New Record", a row is added to the grid and the Municipality dropdown works and is populated with the expected data.

Here is my code:

public class PublicUserMunicipalityViewModel
{
  [Key]
  [DatabaseGenerated(DatabaseGeneratedOption.Identity)]
  public int Id { get; set; }

  [Required]
  public int PublicUserId { get; set; }

  [Required]
  [StringLength(128)]
  public string UserId { get; set; }

  [Required]
  [StringLength(12)]
  [Display(Name = "Municipality")]
  public string muni_code { get; set; }

  [UIHint("ClientMunicipality")]
  public MunicipalityViewModel Municipality { get; set; }

  [Required]
  [Display(Name = "Requested Date")]
  public DateTime RequestedDate { get; set; }

  [Display(Name = "Granted")]
  public bool Granted { get; set; }

  [Display(Name = "User Can Submit Forms")]
  public bool CanSubmitForms { get; set; }

  [Display(Name = "Super User")]
  public bool SuperUser { get; set; }

  public bool IsCurrent { get; set; }
}

 

public class MunicipalityViewModel
 {
   public string muni_code { get; set; }

   public string MuniCombo { get; set; }
 }

 

public ActionResult PublicUserMunicipalityViewModelsRead([DataSourceRequest] DataSourceRequest request, int publicUserId)
{
  IQueryable<PublicUserMunicipality> publicUserMunicipalities = db.PublicUserMunicipalities.Where(c => c.PublicUserId == publicUserId);

  var result = publicUserMunicipalities.Select(x => new PublicUserMunicipalityViewModel
        {
          Id = x.Id,
          PublicUserId = x.PublicUserId,
          UserId = x.UserId,
          muni_code = x.muni_code,
          Municipality =
            new MunicipalityViewModel()
              {
                muni_code = x.muni_code,
                MuniCombo = x.Municipality.muni_name + " - " + x.Municipality.community_type + " - " + x.Municipality.muni_code
              },
          RequestedDate = x.RequestedDate,
          Granted = x.Granted,
          CanSubmitForms = x.CanSubmitForms,
          SuperUser = x.SuperUser,
          IsCurrent = x.IsCurrent
        });

  return Json(result);
}

[Greg]

More code: (I either hit a limit or something went wrong editing my last post)

public ActionResult Index()
 {
   var municipalities = db.fin_muni_codes.Select(f => new MunicipalityViewModel {
             muni_code = f.muni_code,
             MuniCombo = f.muni_name + " - " + f.community_type + " - " + f.muni_code
         })
         .OrderBy(x => x.MuniCombo);

   ViewData["municipalities"] = municipalities;

   return View();
 }

@(Html.Kendo().Grid<PublicUserMunicipalityViewModel>()
  .Name("publicUserMunicipalitiesGrid")
  .Columns(columns =>
    {
      columns.Bound(u => u.Municipality).ClientTemplate("#=Municipality.MuniCombo#");
      columns.Bound(u => u.SuperUser).ClientTemplate("<input type='checkbox' #= SuperUser ? checked='checked' : '' # ></input>");
      columns.Bound(u => u.CanSubmitForms).ClientTemplate("<input type='checkbox' #= CanSubmitForms ? checked='checked' : '' # ></input>");
      columns.Command(command => { command.Edit(); command.Destroy(); }).Width(180);
    })
  .ToolBar(toolbar => toolbar.Create())
  .DataSource(dataSource => dataSource
    .Ajax()
    .Model(model =>
      {
        model.Id(p => p.Id);
        model.Field(p => p.Municipality);
      })
    .Read(read => read.Action("PublicUserMunicipalityViewModelsRead", "PublicUserMunicipalityViewModels")
                            .Data("getSelectedPublicUserId"))
    .Create(create => create.Action("PublicUserMunicipalityViewModelsCreate", "PublicUserMunicipalityViewModels")
                .Data("getSelectedPublicUserId"))
    .Update(update => update.Action("PublicUserMunicipalityViewModelsUpdate", "PublicUserMunicipalityViewModels"))
    .Destroy(destroy => destroy.Action("PublicUserMunicipalityViewModelsDestroy", "PublicUserMunicipalityViewModels"))
  )
)

 

@using Kendo.Mvc.UI
@model PLUS.Models.ViewModels.MunicipalityViewModel

@(Html.Kendo().DropDownListFor(m => m)
        .DataValueField("muni_code")
        .DataTextField("MuniCombo")
        .BindTo((System.Collections.IEnumerable)ViewData["municipalities"])
)

 

Again, my current problem is that no rows display in the grid after the server sends them to the grid.

Thanks.

[Greg]

That last code snippet was ClientMunicipality.cshtml, which is in the ~/Views/Shared/EditorTemplates folder.

[Greg]

Solved. While my controller read method was returning the data to the browser, it was not in a format the grid would use.

Changing:

 

public ActionResult PublicUserMunicipalityViewModelsRead([DataSourceRequest] DataSourceRequest request, int publicUserId)
{
  IQueryable<PublicUserMunicipality> publicUserMunicipalities = db.PublicUserMunicipalities.Where(c => c.PublicUserId == publicUserId);

  var result = publicUserMunicipalities.Select(x => new PublicUserMunicipalityViewModel
        {
          Id = x.Id,
          PublicUserId = x.PublicUserId,
          UserId = x.UserId,
          muni_code = x.muni_code,
          Municipality =
            new MunicipalityViewModel()
              {
                muni_code = x.muni_code,
                MuniCombo = x.Municipality.muni_name + " - " + x.Municipality.community_type + " - " + x.Municipality.muni_code
              },
          RequestedDate = x.RequestedDate,
          Granted = x.Granted,
          CanSubmitForms = x.CanSubmitForms,
          SuperUser = x.SuperUser,
          IsCurrent = x.IsCurrent
        });

  return Json(result);
}

To:

 

public ActionResult PublicUserMunicipalityViewModelsRead([DataSourceRequest] DataSourceRequest request, int? publicUserId)
{
  if (publicUserId == null)
  {
    publicUserId = 0;
  }

  IQueryable<PublicUserMunicipality> publicUserMunicipalities = db.PublicUserMunicipalities.Where(c => c.PublicUserId == publicUserId);

  var munis = publicUserMunicipalities.Select(x => new PublicUserMunicipalityViewModel
        {
          Id = x.Id,
          PublicUserId = x.PublicUserId,
          UserId = x.UserId,
          muni_code = x.muni_code,
          Municipality =
            new MunicipalityViewModel()
              {
                muni_code = x.muni_code,
                MuniCombo = x.Municipality.muni_name + " - " + x.Municipality.community_type + " - " + x.Municipality.muni_code
              },
          RequestedDate = x.RequestedDate,
          Granted = x.Granted,
          CanSubmitForms = x.CanSubmitForms,
          SuperUser = x.SuperUser,
          IsCurrent = x.IsCurrent
        }).ToList();

  DataSourceResult result = munis.ToDataSourceResult(request, d => new
                                                    {
                                                      Id = d.Id,
                                                      PublicUserId = d.PublicUserId,
                                                      UserId = d.UserId,
                                                      muni_code = d.muni_code,
                                                      Municipality = d.Municipality,
                                                      RequestedDate = d.RequestedDate,
                                                      Granted = d.Granted,
                                                      CanSubmitForms = d.CanSubmitForms,
                                                      SuperUser = d.SuperUser,
                                                      IsCurrent = d.IsCurrent
                                                    });

  return Json(result);
}

Fixed it.