AJAX Bound Grid Column Bound to ViewModel can't display name

[Spirent]

I have an ajax bound grid:

@(Html.Kendo().Grid<LocationViewModel>()
      .Name("locationGrid_#=CustomerID#")
      .Columns(columns =>
      {
          columns.Bound(c => c.Name).Title("Location Name");
          columns.Bound(c => c.Description).Title("Description");
          columns.Bound(c => c.SummaryDescription).Title("Summary Description");
          columns.Bound(c => c.Environment).Title("Environment Name"); //.ClientTemplate("\\#: Environment.Name \\#")
          columns.Command(command => { command.Edit(); command.Destroy(); }).Width(200);
      })
      .DataSource(dataSource => dataSource
          .Ajax()
          .PageSize(10)
          .Read(read => read.Action("GetLocations", "Home", new { customerID = "#=CustomerID#" }))
          .Create(create => create.Action("AddLocation", "Home", new { id = "#=CustomerID#" }))
          .Update(update => update.Action("UpdateLocation", "Home"))
          .Destroy(update => update.Action("DeleteLocation", "Home"))
          .Model(model =>
          {
              model.Id(m => m.LocationID);
          })
          .Events(e => e.Error(@<text>function(e) { onError(e,"locationGrid_#=CustomerID#", "locationErrors") }</text>))
      )
      .ToolBar(toolbar => toolbar.Create().Text("Add Location"))
      .Editable(editable => editable.Mode(GridEditMode.InLine))
      .Pageable()
      .Sortable()
      .ToClientTemplate()
      )

That uses this view model:

public class LocationViewModel
    {
        public Guid? LocationID { get; set; }

        [Required]
        [StringLength(256)]
        public string Name { get; set; }

        [StringLength(1024)]
        public string Description { get; set; }

        public int TestPointNo { get; set; }

        public MarketViewModel Market { get; set; }

        [UIHint("EnvironmentEditor")]
        public EnvironmentViewModel Environment { get; set; }

        public int TimeZoneGmtOffset { get; set; }

        public double Latitude { get; set; }

        public double Longitude { get; set; }

        public double HAE { get; set; }

        public bool Deleted { get; set; }

        [StringLength(512)]
        public string SummaryDescription { get; set; }
    }

This is the editor template for Environment:

@(Html.Kendo().DropDownList()
    .Name("EnvironmentViewModel")
    .DataValueField("EnvironmentID")
    .DataTextField("Name")
    .DataSource(d =>
    {
        d.Read(r => r.Action("GetEnvironmentsJsonResult", "Home").Data("getCustomerID()")).ServerFiltering(true);
    }
    )
    .SelectedIndex(0)
)

Right now everything "works" but I'd like to display the Environment.name instead of [Object object] in the grid. If I use the commented out client template than the add function returns a javascript error "Uncaught ReferenceError: Environment is not defined". If I bind the column to Environment.Name than the editor with the ddl doesn't work. How do I bind to the EnvironmentViewModel but just display the name in the grid?

[Daniel]

Hello,

You can either set a default value for the Enviroment field:

.Model(model =>
  {
      model.Id(m => m.LocationID);
      mode.Field(m => m.Environment).DefaultValue(new EnvironmentViewModel());
  })

or use a condition in the template:

columns.Bound(c => c.Environment).Title("Environment Name").ClientTemplate("\\#: data.Environment ? Environment.Name : ''\\#");

in order to avoid the error on add.


Regards,
Daniel
Telerik