This is a migrated thread and some comments may be shown as answers.

Unable to make grid editable with custom Editor Template

4 Answers 21 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Jon
Top achievements
Rank 1
Jon asked on 25 Jan 2021, 04:05 PM

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.

 

 

4 Answers, 1 is accepted

Sort by
0
Jon
Top achievements
Rank 1
answered on 26 Jan 2021, 09:45 PM

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

0
Jon
Top achievements
Rank 1
answered on 27 Jan 2021, 09:45 PM

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.

0
Accepted
Anton Mironov
Telerik team
answered on 28 Jan 2021, 01:11 PM

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/.

0
Jon
Top achievements
Rank 1
answered on 28 Jan 2021, 04:50 PM

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!

Tags
Grid
Asked by
Jon
Top achievements
Rank 1
Answers by
Jon
Top achievements
Rank 1
Anton Mironov
Telerik team
Share this question
or