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 :)