Unable to make grid editable with custom Editor Template

[Jon]

I've been following the sample posted here https://docs.telerik.com/aspnet-core/html-helpers/data-management/grid/templates/editor-templates for creating a drop down list editor for the grid.

Initially the column will display fine, but as soon as I try to make the grid editable the entire grid breaks and displays nothing, not even an error message or anything.

@(Html.Kendo().Grid<TestTelerikGrid.Models.ActualExpenditureDto>()
              .Name("grid")
              .Columns(columns =>
              {
                  columns.Bound(c => c.Quantity);
                  columns.Bound(c => c.RawCostRate);
                  columns.Bound(c => c.ExpenditureTypeOption).ClientTemplate("#=ExpenditureTypeOption.Name#").Sortable(false).Width(180);
              })
              .Editable(editable => editable.Mode(GridEditMode.InCell))
              .Sortable()
              .Filterable()
              .DataSource(dataSource => dataSource
                  .Ajax()
                  .Sort(sort => sort.Add("Id").Ascending())
                  .ServerOperation(false)
                  .Batch(true)
                  .Model(model =>
                  {
                      model.Id(r => r.Id);
                  })
                  .Read(read => read.Action("Expenditure_Read", "Home"))
                )
)

 

public class ActualExpenditureDto
{
    public int Id { get; set; }

    [Display(Name = "Quantity")]
    public string Quantity { get; set; }

    [Display(Name = "Raw Cost Rate")]
    public string RawCostRate { get; set; }

    [UIHint("ExpenditureTypeEditor")]
    [Display(Name = "Expenditure Type")]
    public ExpenditureTypeModel ExpenditureTypeOption { get; set; }

}

 

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

 

Controller:

public IActionResult Index()
{
    ViewData["lookupExpenditureType"] = GetExpenditureTypes();

    return View();
}

public ActionResult Expenditure_Read([DataSourceRequest] DataSourceRequest request)
{
    List<ActualExpenditureDto> dtos = new List<ActualExpenditureDto>();

    ActualExpenditureDto dto = new ActualExpenditureDto();
    dto.Id = 1;
    dto.Quantity = "3";
    dto.RawCostRate = "7";
    dto.ExpenditureTypeOption = GetExpenditureTypes().First();
    dtos.Add(dto);

    dto = new ActualExpenditureDto();
    dto.Id = 1;
    dto.Quantity = "55";
    dto.RawCostRate = "98";
    dto.ExpenditureTypeOption = GetExpenditureTypes().Last();
    dtos.Add(dto);

    var toReturn = Json(dtos.ToDataSourceResult(request));
    return toReturn;
}

private List<ExpenditureTypeModel> GetExpenditureTypes()
{
    List<ExpenditureTypeModel> expTypes = new List<ExpenditureTypeModel>();
    ExpenditureTypeModel typ = new ExpenditureTypeModel();
    typ.Id = 1;
    typ.Name = "Type 1";
    expTypes.Add(typ);

    typ = new ExpenditureTypeModel();
    typ.Id = 2;
    typ.Name = "Type 2";
    expTypes.Add(typ);

    return expTypes;
}

 

ExpenditureTypeEditor.cshtml

@using Kendo.Mvc.UI;

@(Html.Kendo().DropDownList()
        .Name("ExpenditureTypeOption")
        .DataValueField("Id")
        .DataTextField("Name")
        .BindTo((System.Collections.IEnumerable)ViewData["lookupExpenditureType"]) // A list of all expenditure types which is populated in the controller.
    )

 

I have a full sample project which shows the problem as well, if the above is not enough, but it is too large to attach here as a zip file, so I'm not sure the best way to share it.

 

 

[Jon]

Here's a link to a full sample project in a zip file. Comment out lines 24-28 of the Index.cshtml to see that the grid works. Soon as it is made editable, it breaks.

https://www.dropbox.com/s/iopxg6u3auruvz3/TestTelerikGrid.zip?dl=0

[Jon]

Would really appreciate it if someone could help with this.

I'm porting this project to .net core from .net framework, and this is the last thing that isn't working.

[Anton Mironov]

Hello Jon,

Thank you for the application provided. 

In order to keep get you up and running, the fastest way was to create a sample project with the needed implementation.

Find the application attached that I created for the case. Observe the implementation, scripts, and behavior. Feel free to use it as a template.

After making the needed tests locally, let me know if this is the expected behavior, or further assistance is needed.

 

Kind Regards,
Anton Mironov
Progress Telerik

[Jon]

Thank you so much. Using your sample I was able to track down the problem. The main difference which ended up making it work for me was switching to Newtonsoft Json from System.Text.Json. Previously I had been using these options to make the serialization work for the grid, but apparently it doesn't work for the editor templates.

.AddJsonOptions(options =>
{
    options.JsonSerializerOptions.PropertyNameCaseInsensitive = true;
    options.JsonSerializerOptions.PropertyNamingPolicy = null;
});

So, if anyone in the future reads this, don't use those options, use AddNewtonsoftJson instead in your startup file.

Thanks again!