KendoUI Grid with UIHint
I'm having some difficulties creating a KendoUI grid with a foreign key using a UIHint to create a dropdown list in the Grid. My hinted partial view doesn't seem to be getting called at all. Is there a code example of a sitefinity site and KendoUI grid working with a foreign key drop down? Or maybe tell me where I am messing mine up?
Here is what I have right now:
~/MVC/Models/BFormSimple.cs
namespace SitefinityWebApp.Mvc.Models
[DataContract]
public class BFormSimple
[DataMember]
public long Id get; set;
[DataMember]
public string Name get; set;
[DataMember]
public string PdfPath get; set;
[DataMember]
public string Slug get; set;
[DataMember]
[Display(Name = "Plan Type"),UIHint("FormTypeForeignKey")]
public string Type get; set;
[DataMember]
public DateTime UploadTime get; set;
Type is the column that I need to show as a drop down when editing a row in the grid.
~/Mvc/Views/PlansEditor/FormTypeForeignKey.cshtml
@using Kendo.Mvc.UI
@model object
@( Html.Kendo().DropDownListFor(m => m)
.BindTo((SelectList) ViewData["formtypes"]).ToHtmlString()
)
~/Mvc/Controllers/PlansEditorController.cs
Snippet from public ActionResult Index() that sets the ViewData for the MVC control. ent is my EntityFramework object
var list = ent.formtypes.Select(f => new SelectListItem() Text = f.formtype1, Value = f.formtype1 ).ToArray();
ViewData
["formtypes"] = new SelectList(list);
~/Mvc/Views/PlansEditor/Default.cshtml
@model SitefinityWebApp.Mvc.Models.PlansEditorModel
@(Html.Kendo().Grid<
BFormSimple
>()
.Name("grid")
.Columns(columns =>
columns.Bound(p => p.Name).Title("Name");
columns.Bound(p => p.PdfPath).Width(200).Title("Path");
//columns.Bound(p => p.Type).Width(200).Title("Form Type");
columns.ForeignKey(p => p.Type, (System.Collections.IEnumerable) ViewData["formtypes"], "Value", "Text").Title("Type");
columns.Command(command => command.Edit(); command.Destroy(); ).Width(160);
)
.ToolBar(toolbar => toolbar.Create())
.Editable(editable => editable.Mode(GridEditMode.PopUp))
.Scrollable()
.HtmlAttributes(new style = "height: 100%" )
.DataSource(dataSource => dataSource
.Ajax()
.Events(events => events.Error("error_handler"))
.Model(model =>
model.Id(p => p.Id);
model.Field(p => p.Id).Editable(false);
model.Field(p => p.Type).DefaultValue("Enrollment");
)
.Create(update => update.Action("EditingPopup_Create", "PlansEditor"))
.Read(read => read.Action("EditingPopup_Read", "PlansEditor"))
.Update(update => update.Action("EditingPopup_Update", "PlansEditor"))
.Destroy(update => update.Action("EditingPopup_Destroy", "PlansEditor"))
))
Thanks,
Ryan
Hi Ryan,
In Kendo Documentation there is a very close sample to what you are trying to achieve:
http://docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/helpers/grid/editor-templates
Here is a thread with ForeignKey in Grid as DropDownList:
http://www.telerik.com/community/forums/aspnet-mvc/grid/foreignkey-in-grid-as-dropdownlist---selection-problem.aspx
You could also find useful the KendoUI code library, where you have access to multiple code samples:
http://www.kendoui.com/code-library.aspx
Regards,
Vassil Vassilev
Telerik