MVC Grid with ClientTemplate not displaying correctly

[GCS]

Having a hard time getting a grid with a ClientTemplate that uses a Dropdown control. 

Two problems, 

1. The text in the grid does not display a proper value, instead it displays the text used to specify the template. So when you add a row, this is what shows up in the column with the ClientTemplate, "#=StateEditor.Name\\#" instead of an actual state name. (I've attached an image to this post)

2. The dropdown works, I can open it and select an item, but once I leave the column, it reverts back to the text, "#=StateEditor.Name\\#". 

As far as I can tell, this is a display issue only because the values selected are valid when I submit the grid data to save. 

Here is my setup. 

Client Template

@model GCSConnections.Model.SelectListItemDto

@(Html.Kendo().DropDownListFor(m => m)
        .DataValueField("Id")
        .DataTextField("Name")
        .BindTo((System.Collections.IEnumerable)ViewData["StateListDto"])
)

 This is the SelectListItemDto

public class SelectListItemDto
{
    public int Id { get; set; }
    public string Name { get; set; }
}

The Controller Method that invokes the screen is:

public ActionResult ProjectManagement()
{
    var states = LookupService.Instance.GetStates();
    ViewData["StateListDto"] = states;
    ViewData["DefaultState"] = states.First();

    SupplierDto model = new SupplierDto();
    return View(model);
}

 The Grid is defined as: 

 

<div class="form-group">
    @(Html.Kendo().Grid(Model.LocationEngagements)
        .Name("LocationEngagementsGrid")
        .Columns(columns =>
        {
            columns.Bound(l => l.City);
            columns.Bound(l => l.State).ClientTemplate("\\#=StateEditor.Name\\#");
        })
        .ToolBar(toolBar =>
        {
            toolBar.Create();
            toolBar.Save();
        })
        .Editable(editable => editable.Mode(GridEditMode.InCell))
       .Sortable()
        .Scrollable()
        .Events(events => events.Edit("LocationGridEdit"))
        .DataSource(dataSource => dataSource
            .Ajax()
            .Batch(true)
            .ServerOperation(false)
            .Events(events => events.Error("error_handler"))
            .Create("GridLocationsEngagement_Create", "Supplier")
            .Update("GridLocationsEngagement_Update", "Supplier")
             .Model(model =>
             {
                 model.Id(l => l.Id);
                 model.Field(l => l.Id).Editable(false);
                 model.Field(l => l.State).DefaultValue(
                    ViewData["DefaultState"] as GCSConnections.Model.SelectListItemDto);
             })
         ))
</div>

Something to note is that the grid is contained within a parent model so I have to use the excape characters "\\" so specify the in the ClientTemplate definition. If I don't use those, nothing works. 

Any ideas? 

 

 

 

[Danail Vasilev]

Hi Dave,

I am not sure how is declared the data source for the StateEditor field. I have created, however, a sample page that uses such a field, which is part of the grid's data source and it works properly on my side. Could you please modify the attached example and then provide it back to us, so that we can proceed further with the investigation?

Regards,
Danail Vasilev
Telerik