Kendo Grid with DropdownList - asp.net

Question

Hi I'm using Kendo grid with dropdownlist, I followed the demo in http://demos.kendoui.com/web/grid/foreignkeycolumn.html
but Im recieving this error "DataBinding: 'System.Web.Mvc.SelectListItem' does not contain a property with the name 'Id'".
Could anyone help me to make my code work without error?
here is my viewModel :
public class AccountingViewModel
{
private string _code = string.Empty;
private string _description = string.Empty;
public int Id
{
get;set;
}
public string Code
{
get { return _code; }
set { _code = value; }
}
public string Description
{
get { return _description; }
set { _description = value; }
}
public int MajorCategoryId
{
get;set;
}
public SelectList MajorCategories
{
get;set;
}
}
Here is my Controller :
public ActionResult Index()
{
var majorCategory = new SelectList(new[]
{
new {Id="1",Name="Category1"},
new{Id="2",Name="Category2"},
new{Id="3",Name="Category3"},
},
"Id", "Name", 1);
ViewData["majorCategories"] = majorCategory;
return View(accountingService.GetAllAccountings());
}
Here is my Index View:
#model IEnumerable < PPMS.Model.ViewModels.AccountingViewModel >
< br/ >
< div class="k-grid" >
#(Html.Kendo().Grid(Model)
.Name("grid")
.Columns(columns =>
{
columns.Bound(p => p.Code);
columns.Bound(p => p.Description).Width(150);
columns.ForeignKey(p => p.MajorCategoryId, (System.Collections.IEnumerable)ViewData["majorCategories"], "Id", "Name")
.Title("MajorCategory").Width(150);
columns.Command(command => command.Destroy()).Width(110);
})
.ToolBar(toolBar =>
{
toolBar.Save();
toolBar.Create();
})
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Filterable()
.Groupable()
.Pageable()
.Scrollable()
.HtmlAttributes(new { style = "height:430px;" })
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.PageSize(20)
.ServerOperation(false)
.Events(events => events.Error("errorHandler"))
.Model(model =>
{
model.Id(p => p.Id);
model.Field(p => p.Id).Editable(false);
model.Field(p => p.MajorCategoryId).DefaultValue(1);
})
.Create(create => create.Action("Create", "Accounting"))
.Read(read => read.Action("Index", "Accounting"))
.Update(update => update.Action("Edit", "Accounting"))
.Destroy(destroy => destroy.Action("Delete", "Accounting"))
)
)
</div>
<br/>
<script type="text/javascript">
function errorHandler(e) {
if (e.errors) {
var message = "Errors:\n";
$.each(e.errors, function (key, value) {
if ('errors' in value) {
$.each(value.errors, function () {
message += this + "\n";
});
}
});
alert(message);
}
}
</script>
I have updated my view into and is now binding the selectlist the problem now its displaying textbox inside the grid instead of a dropdownlist.. here is my updated Index view:
Here is my Index View:
#model IEnumerable < PPMS.Model.ViewModels.AccountingViewModel >
< br/ >
< div class="k-grid" >
#(Html.Kendo().Grid(Model)
.Name("grid")
.Columns(columns =>
{
columns.Bound(p => p.Code);
columns.Bound(p => p.Description).Width(150);
columns.ForeignKey(p => p.MajorCategoryId, (System.Collections.IEnumerable)ViewData["majorCategories"], "Value", "Text")
.Title("MajorCategory").Width(150);
columns.Command(command => command.Destroy()).Width(110);
})
.ToolBar(toolBar =>
{
toolBar.Save();
toolBar.Create();
})
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Filterable()
.Groupable()
.Pageable()
.Scrollable()
.HtmlAttributes(new { style = "height:430px;" })
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.PageSize(20)
.ServerOperation(false)
.Events(events => events.Error("errorHandler"))
.Model(model =>
{
model.Id(p => p.Id);
model.Field(p => p.Id).Editable(false);
model.Field(p => p.MajorCategoryId).DefaultValue(1);
})
.Create(create => create.Action("Create", "Accounting"))
.Read(read => read.Action("Index", "Accounting"))
.Update(update => update.Action("Edit", "Accounting"))
.Destroy(destroy => destroy.Action("Delete", "Accounting"))
)
)
</div>
<br/>
<script type="text/javascript">
function errorHandler(e) {
if (e.errors) {
var message = "Errors:\n";
$.each(e.errors, function (key, value) {
if ('errors' in value) {
$.each(value.errors, function () {
message += this + "\n";
});
}
});
alert(message);
}
}
</script>

Answer 1

The foreign dropdown list should contain items which have a "value" and "text" property ?
Like:
var categories = [{
"value": 1,
"text": "Beverages"
},{
"value": 2,
"text": "Condiments"
}
}];