DropDownList works in Edit mode but not in client mode

8 posts, 0 answers
  1. Greg
    Greg avatar
    35 posts
    Member since:
    Sep 2013

    Posted 05 Jan Link to this post

    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.

  2. Greg
    Greg avatar
    35 posts
    Member since:
    Sep 2013

    Posted 05 Jan in reply to Greg Link to this post

    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.
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 07 Jan Link to this post

    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: You can find more details about grid templates here:
    Regards,
    Georgi Krustev
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  5. Greg
    Greg avatar
    35 posts
    Member since:
    Sep 2013

    Posted 07 Jan in reply to Georgi Krustev Link to this post

    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...

  6. Greg
    Greg avatar
    35 posts
    Member since:
    Sep 2013

    Posted 07 Jan in reply to Greg Link to this post

    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);
    } 

  7. Greg
    Greg avatar
    35 posts
    Member since:
    Sep 2013

    Posted 07 Jan in reply to Greg Link to this post

    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.

  8. Greg
    Greg avatar
    35 posts
    Member since:
    Sep 2013

    Posted 07 Jan in reply to Greg Link to this post

    That last code snippet was ClientMunicipality.cshtml, which is in the ~/Views/Shared/EditorTemplates folder.
  9. Greg
    Greg avatar
    35 posts
    Member since:
    Sep 2013

    Posted 08 Jan in reply to Greg Link to this post

    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.

Back to Top
UI for ASP.NET MVC is VS 2017 Ready