I have a grid with a Country (ID, Name) and a DropDownList for a list of presidents. The drop down list needs to filter based on the Country. This far I have gotten, however I can't use ViewData because the list is dynamic based on the country and the # of presidents is large.
My problem...
When the grid first loads and there is a PresidentID in the row - the President's name is not visible, only the PresidentID
Note that PresidentID is a nullable int!
The ViewModel
Simplified Grid
JavaScript on the same view as the grid...
Presidents.cshtml template file...
Please help - I've been at this for hours
My problem...
When the grid first loads and there is a PresidentID in the row - the President's name is not visible, only the PresidentID
Note that PresidentID is a nullable int!
The ViewModel
public
class
CountryViewModel
{
public
int
CountryID {
get
;
set
; }
public
string
CountryName {
get
;
set
; }
[UIHint(
"Presidents"
)]
public
int
? PresidentID {
get
;
set
; }
}
Simplified Grid
@(Html.Kendo().Grid<CountryViewModel>()
.Name(
"CountriesGrid"
)
.Columns(c =>
{
c.Bound(x => x.CountryName)
c.Bound(x => x.PresidentID)
.EditorTemplateName(
"Presidents"
)
})
.Editable(e => e.Mode(GridEditMode.InCell))
.Events(x => x.Edit(
"onEdit"
))
.DataSource(ds => ds
.Ajax()
.ServerOperation(
false
)
.AutoSync(
true
)
.Model(m =>
{
m.Id(x => x.CountryID);
m.Field(x => x.CountryID).Editable(
false
);
m.Field(x => x.PresidentID).DefaultValue(1);
})
.Read(r => r.Action(
"GetCountries"
,
"Country"
))
.Update(u => u.Action(
"UpdateCountry"
,
"Country"
))
)
)
JavaScript on the same view as the grid...
<script>
function
getCountryID() {
var
row = $(event.srcElement).closest(
"tr"
);
var
grid = $(event.srcElement).closest(
"[data-role=grid]"
).data(
"kendoGrid"
);
var
dataItem = grid.dataItem(row);
return
{ CountryID: dataItem.CountryID }
}
//for InCell edit mode
function
onEdit(e) {
var
dropDown = e.container.find(
"[data-role=dropdownlist]"
).data(
"kendoDropDownList"
);
if
(dropDown) {
dropDown.bind(
"change"
,
function
(e) {
var
grid = e.sender.wrapper.closest(
".k-grid"
).data(
"kendoGrid"
);
var
dataItem = grid.dataItem(e.sender.wrapper.closest(
"tr"
));
//If current value is null
if
(!dataItem.PresidentID) {
//change the model value
dataItem.PresidentID = 0;
//get the currently selected value from the DDL
var
currentlySelectedValue = e.sender.value();
//set the value to the model
dataItem.set(
'PresidentID'
, currentlySelectedValue);
}
});
}
}
</script>
Presidents.cshtml template file...
@(Html.Kendo().DropDownListFor(m => m)
.DataValueField(
"ID"
)
.DataTextField(
"Name"
)
.AutoBind(
true
)
.OptionLabel(
"Select..."
)
.DataSource(ds => ds.Read(r => r.Action(
"GetPossiblePresidents"
,
"Country"
)
.Data(
"getCountryID()"
))
)
)
Please help - I've been at this for hours