Using the grid's change event to populate an editable partial view with data from selected row

[Timothy]

Thought this might help, a client has a requirement for a grid to be placed in a splitter with grid in line editing at the same time in another splitter pane they want an editable version of the record shown.
The problem I had was getting kendo data binding on to the partial view this is my solution for a general binding function where the container is an html form bound to a POCO class, the model is the dataItem of a selected grid row.

function databind (container, model) {
   if (container) {
      container.find(":input:not(:button, [" + kendo.attr("role") + "=upload], [" + kendo.attr("skip") + "]), select").each(function () {
         var bindAttr = kendo.attr("bind"),
               binding = this.getAttribute(bindAttr) || "",
               bindingName = this.type === "checkbox" ? "checked:" : "value:",
               fieldName = this.name;

         if (binding.indexOf(bindingName) === -1 && fieldName) {
            binding += (binding.length ? "," : "") + bindingName + fieldName;

            $(this).attr(bindAttr, binding);
         }
      });
      kendo.bind(container, model);
   }
}

function grid_change (e) {
   var pid = this.select();
   var dataItem = this.dataItem(pid);
   var details = $('#your container for form');
   var frm = $("#your form");
   if (frm[0]) {
      databind(details, dataItem);
   }
   else {
      $.post('@Url.Action("GetPartialViewForForm","Controller")', {
         ID: dataItem.ID
      }, function (data) {
         details.empty().append(data);
         databind(details, dataItem);
         var frm = $("#your form");
         frm.submit(function (e) {
            var data = $(this).serialize();
            $.post(this.action, data, function () { });
            e.preventDefault();
         });
      });
   }
}

//Controller
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult GetPartialViewForForm(int ID)
{
   //get the data
   return PartialView();
}