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

2 posts, 0 answers
  1. Spirent
    Spirent avatar
    13 posts
    Member since:
    Apr 2012

    Posted 05 Nov 2014 Link to this post

    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?









  2. Daniel
    Admin
    Daniel avatar
    2231 posts

    Posted 07 Nov 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top