Best Practice for kendo UI with MVC wrappers when data binding a detail grid

Question

I would like to know how to best build a detail grid view/controller when using Kendo UI with MVC. My detail model looks like this:

public class EditablePinNote
{
    [ScaffoldColumn(false)]
    public int PinId { get; set; }
    public int NoteId { get; set; }
    [Editable(false)]
    public int? SaleYear { get; set; }
    public string Note { get; set; }
}

View

      @(Html.Kendo().Grid<W2D.Models.EditablePinNote>()
        .Name("PinNote_#=Id#")
        .ToolBar(commands => commands.Create().Text("Add Note"))
        .Editable(editing => editing.Mode(Kendo.Mvc.UI.GridEditMode.InLine))
        .Scrollable()
        .DataSource(dataBinding => dataBinding
            .Ajax()
            .Create(c=> c.Action("Create","PinNote", new { pPinId = "#=PinId#" , pSaleYear="#=TaxYear#"}))
            .Read("Read", "PinNote", new { PinId = "#=PinId#" })
            .Update("Update", "PinNote")
            .Destroy("Destroy","PinNote")
            .Model(model => 
            {
                model.Id(p => p.NoteId);
            })
            .Events(events => events.Error("error_handler"))
        )
        .Columns(columns =>
            {
                columns.Bound(c => c.SaleYear).Width(80).Title("Year");
                columns.Bound(c => c.Note);
                columns.Command(command =>
                {
                    command.Edit().CancelText(" ").Text(" ").UpdateText(" ").HtmlAttributes(new { style = "min-width: 10px" });
                    if (User.IsInRole("admin")) command.Destroy().Text(" ").HtmlAttributes(new { style = "min-width: 10px" });
                }).Width(80);
            })
         .ToClientTemplate()
    )

and Controller for create operation

    [AcceptVerbs(HttpVerbs.Post)]
    public ActionResult Create([DataSourceRequest]DataSourceRequest request, EditablePinNote model, int pPinId, int? pSaleYear)
    {
        model.PinId = pPinId;
        model.SaleYear = pSaleYear;
        if (TryValidateModel(model)) //TryUpdateModel will overwrite set values
        {
            StorePinNote.Insert(model);
        }

        return Json(new[] { model }.ToDataSourceResult(request, ModelState));
    }

This works, seems like there should be a better way. The part I don't like is in the controller. Need to pass parameters pPinId and pSaleYear because there is no way (at least I don't know how to add these to the model while in the view). Additionally the model binding will not work if the parameters are called with the same name as the field names in the model so one needs to call them something different for model binding to work. In summary I would like to set the model value for PinId and SaleYear in the view and then the controller would have a nice signature, like Create([DataSourceRequest]DataSourceRequest request, EditablePinNote model). If one could have a constructor or somehow set field values in the detail model from the detail view code would be better.

Answer 1

Have you tried this?:

        .Model(model => 
        {
            model.Id(p => p.NoteId);
            model.Field(p => p.PinId).DefaultValue("#=PinId#");
        })

I've done something similar in my own application.

Answer 2

Telerik does allow for parameters to be passed.

This example has the value hardcoded, but you can use the GetElementByID to grab the value from a field in your view and use as the value of the parameter instead of the hardcoded value.

@(Html.Kendo().Grid<RoutingInquiryModel>()
   .Name("RoutingInquirys")
  .Columns(c =>
  {
      c.Bound(p => p.TextValue);
      c.Bound(p => p.DataValue);
      c.Bound(p => p.RoutingDescription);
      c.Bound(p => p.RoutingRev);
  })
  .DataSource(d => d
                .Ajax()
                .Read(read => read.Action("get", "RoutingInquirys",
                                          new { pPlant = "PL2" } ) )
                .PageSize(12)
             )
    .Pageable()
    .Filterable()
    .Selectable()
    .Sortable()
    .Groupable()
    .Scrollable()
    .Resizable(resize => resize.Columns(true))
)

In the controller, the code would be similar to

public ActionResult Get([DataSourceRequest] DataSourceRequest request, String pPlant)
{ 
    ...

pPlant is the name of the parameter you use in your controller. For more than 1 parameter they are comma separated.