Unable to make grid editable with custom Editor Template

5 posts, 1 answers
  1. Jon
    Jon avatar
    4 posts
    Member since:
    Aug 2020

    Posted 25 Jan Link to this post

    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.

     

     

  2. Jon
    Jon avatar
    4 posts
    Member since:
    Aug 2020

    Posted 26 Jan Link to this post

    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

  3. Jon
    Jon avatar
    4 posts
    Member since:
    Aug 2020

    Posted 27 Jan Link to this post

    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.

  4. Answer
    Anton Mironov
    Admin
    Anton Mironov avatar
    204 posts

    Posted 28 Jan Link to this post

    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

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

  5. Jon
    Jon avatar
    4 posts
    Member since:
    Aug 2020

    Posted 28 Jan in reply to Anton Mironov Link to this post

    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!

Back to Top