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

Grid with custom editor controls generating errors

2 Answers 26 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Francis
Top achievements
Rank 1
Veteran
Francis asked on 20 Jul 2020, 09:28 AM

Hi,
I've created a grid to with i've added several dropdowns as editor controls I have added the relevant UIHints etc... and the drop downs are shoing and being populated correctly however when selecting a value from one of the dropdows I get an error that shows up in the console complaining that the property is null and when the model is passed through to the update method the values being passed are those of the original data and not the updated fields 
This is my grid:

@(
        Html.Kendo().Grid<BookingHub.Areas.Admin.ViewModels.DriverTestTypeViewModel>
        ()
        .Name("DrivingTestTypesGrid")
        .Columns(columns => {
        columns.Bound(t => t.Name).Title("Category Name");
        columns.Bound(t => t.Description).Title("Description");
        columns.Bound(t => t.Duration).Title("Duration");
        columns.Bound(t => t.StandardFee).Title("Standard Fee");
        columns.Bound(t => t.PremiumFee).Title("Premium Fee");
        columns.Bound(t => t.TheoryTestCode).Title("Theory Test Required")
        .ClientTemplate("#= TheoryTestCode == null? '' : TheoryTestCode.Description  #");
        columns.Bound(t => t.FullTestRequired).Title("Full Test Required")
            .ClientTemplate("#= FullTestRequired == null? '' : FullTestRequired.Category  #");
        columns.Command(command => {
        command.Edit().Template("<a title='Click to edit' class='k-button k-button-icontext btn btn-sm k-secondary k-grid-edit'><i class='fa fa-pencil-alt text-primary'></i></a>");
        command.Custom("UpdateFee").Click("").Template("<a title='Click to edit' class='k-button k-button-icontext btn btn-sm k-secondary' data-toggle='modal'><i class='fa fa-pencil-alt text-primary'></i></a>");
            });
        })
        .Editable(editable => editable.Mode(GridEditMode.InLine))
        .Pageable()
        .Sortable()
        .DataSource(dataSource => dataSource
                    .Ajax()
                    .PageSize(15)
                    .AutoSync(false)
                    .ServerOperation(false) //paging, sorting and grouping performed in the client
                    .Events(events => events.Error("GenericErrorHandler.handleCoreErrors('#DrivingTestTypesGrid')"))
                    .Model(model =>
                    {
                        model.Id(p => p.Id);
                        model.Field(p => p.Name);
                        model.Field(t => t.Description);
                        model.Field(t => t.Duration);
                        model.Field(t => t.StandardFee);
                        model.Field(t => t.PremiumFee);
                        model.Field(t => t.TheoryTestCode);
                        model.Field(t => t.FullTestRequired).DefaultValue(ViewData["DriverTestTypesDefault"] as BookingHub.Areas.Admin.ViewModels.FullTestRequiredViewModel );
                    })
                    //.Create("CreateCustomerAccount", "View", new { Area = "Admin" })
                    .Read("GetDriverTestTypes", "DriverTestTypes", new { Area = "Admin" })//.Type(HttpVerbs.Post))
                    .Update("UpdateDriverTestType", "DriverTestTypes", new { Area = "Admin" })
                    //.Destroy("DeactivateCustomerAccount", "View", new { Area = "Admin" })
 
                    )
    )

 

My View Model : 

public class DriverTestTypeViewModel : GenericViewModel
    {
        [ScaffoldColumn(false)]
        public int Id { get; set; }
        [UIHint("TextArea")]
        public string Description { get; set; }
        public int Duration { get; set; }
        [Display(Name = "Start Date")]
        public DateTime StartDate { get; set; }
        [Display(Name = "End Date")]
        public DateTime? EndDate { get; set; }
        [ScaffoldColumn(false)]
        public string CreatedBy { get; set; }
        [ScaffoldColumn(false)]
        public DateTime? CreatedOn { get; set; }
        [ScaffoldColumn(false)]
        public string UpdatedBy { get; set; }
        [ScaffoldColumn(false)]
        public DateTime? UpdatedOn { get; set; }
        public string Name { get; set; }
        [DataType(DataType.Currency)]
        public decimal StandardFee { get; set; }
        [DataType(DataType.Currency)]
        public decimal PremiumFee { get; set; }
        [UIHint("TheoryTestCodeEditor")]
        public TheoryTestCodeViewModel? TheoryTestCode { get; set; }
        [UIHint("FullTestRequiredEditor")]
        public FullTestRequiredViewModel? FullTestRequired { get; set; }
        public int? TheoryTestTypeId { get; set; }
    }

 

My editor controls (obviously in separate partial views named the same as the ui hint):

@(Html.Kendo().DropDownList()
        .Name("FullTestRequired") // The name of the widget has to be the same as the name of the property.
        .DataValueField("Id") // The value of the drop-down is taken from the TheoryTestCode Id property.
        .DataTextField("Category") // The text of the items is taken from the TheoryTestCodes Description property.
        .BindTo((System.Collections.IEnumerable)ViewData["DriverTestTypes"]) // A list of all TheoryTestCodes which is populated in the controller.
        .AutoBind(false)
)
@(Html.Kendo().DropDownList()
    .Name("TheoryTestCode") // The name of the widget has to be the same as the name of the property.
    .DataValueField("Id") // The value of the drop-down is taken from the TheoryTestCode Id property.
    .DataTextField("Description") // The text of the items is taken from the TheoryTestCodes Description property.
    .BindTo((System.Collections.IEnumerable)ViewData["TheoryTestCodes"]) // A list of all TheoryTestCodes which is populated in the controller.
    .AutoBind(false)
)

 

The following is where i populate the dropdowns :

public async Task<ActionResult> Index()
       {
 
           ViewData["TheoryTestCodes"] = new List<TheoryTestCodeViewModel> {
               new TheoryTestCodeViewModel { Description = "MotorBike", Id = 2, TestCode = 2 },
               new TheoryTestCodeViewModel { Description = "Car", Id = 1, TestCode = 1 }
           };        
 
           ViewData["DriverTestTypes"] = new List<FullTestRequiredViewModel>
           {
               new FullTestRequiredViewModel { Category = "A1 Off Road", Id = 2 },
               new FullTestRequiredViewModel { Category = "Test", Id = 3 }
           };
 
           ViewData["DriverTestTypesDefault"] = new List<FullTestRequiredViewModel>
           {
               new FullTestRequiredViewModel { Category = "A1 Off Road", Id = 2 }
           };
 
           return this.View("DriverTestType");
       }

 

The console error that is displaying is "Uncaught TypeError: Cannot read property 'FullTestRequired' of null" which happen on the selection of an item from the dropdown

 

I can't see what is wrong so any assistance would be gratefully appreciated :) 

2 Answers, 1 is accepted

Sort by
0
Francis
Top achievements
Rank 1
Veteran
answered on 20 Jul 2020, 10:14 AM
One thing to note is that both of these fields can potentially be null coming from the data source.
0
Tsvetomir
Telerik team
answered on 23 Jul 2020, 08:41 AM

Hi Francis,

Thank you for the provided code snippets. Is it possible for you to alternate the template as follows:

columns.Bound(t => t.FullTestRequired).Title("Full Test Required")
            .ClientTemplate("#= data.FullTestRequired? FullTestRequired.Category : ''  #");

It would be better to check if the field has a truthy value due to the fact that it might be undefined or null. And the previous check was for null only.

 

Kind regards,
Tsvetomir
Progress Telerik

Tags
Grid
Asked by
Francis
Top achievements
Rank 1
Veteran
Answers by
Francis
Top achievements
Rank 1
Veteran
Tsvetomir
Telerik team
Share this question
or