Custom Action to open Partial View as Popup

[Louise]

I'm trying to create a detail popup for each line in my grid (which uses Server Binding)
I've created a custom command as follows.

columns.Command(command =>
{command.Edit();
command.Custom(

"Details").Text("Line Details").Action("Product", "Home").DataRouteValues(v => v.Add(c => c.SKU).RouteKey("selectSID"));}
);

Corresponding Controller action

public ActionResult Product(string selectSID){
var result = IProductRepository.One(p => p.SID == selectSID);
if (result == null)
{return RedirectToAction("Error");}
else
return PartialView(result);
}

This all works but my Partial View is opened as a full page in the existing window, how can I open this as a popup?

I've tried using JS and kendowindow to open the popup and this does work but I can't see how to pass the SKU from the selected line in the grid so I see my error page loaded in the popup window.

This is my partial view

 @model TestKendo.Models.Product

 <fieldset>
<div class="display-field">
@Html.DisplayFor(model => model.Description)

</div> 
 <img src="..\120571.jpg" />
</fieldset> 
 <p> @Html.ActionLink("Back to List", "Order") </p>  

Any and all help appreciated, i've got this far from browsing the forums and sample apps.

[Timothy]

You need to create the popup form like this with javascript:-

function poprefresh (e) {
   if (!ps_PopOptions.form)
      return;
   this.center().open();
   var pfrm = $(ps_PopOptions.form);
   pfrm.kendoValidator();
   if (ps_PopOptions.model) {
      databind(pfrm, ps_PopOptions.model);
   }
   pfrm.submit(function (e) {
      if (ps_PopOptions.OnSave) {
         ps_PopOptions.OnSave();
      }
      var data = $(this).serialize();
      $.post(this.action, data, function () {
         ps_PopOptions.window.close();
         if (ps_PopOptions.AfterSave) {
            ps_PopOptions.AfterSave();
         }
      });
      e.preventDefault();
   });
}
function popclose() {
   ps_PopOptions.form = undefined;
}
function popedit (options) {
   ps_PopOptions = options;
   ps_PopOptions.name = options.name + "_wd";
   var nwdiv = $("#" + ps_PopOptions.name); //$("#" + name);
   if (!nwdiv[0]) {
      nwdiv = $('<div/>', { id: ps_PopOptions.name }).appendTo("#footer");
      nwdiv.kendoWindow({
         title: ps_PopOptions.title,
         visible: false,
         modal: true,
         animation: false,
         resizable: false,
         open: ps_PopOptions.OnOpen,
         close: ps_Fn.popclose,
         refresh: ps_Fn.poprefresh
      });
   }
   if (ps_PopOptions.read) {
      var dataSource = new kendo.data.DataSource({
         transport: {
            read: {
               url: ps_PopOptions.read,
               dataType: "json",
               contentType: "application/json",
               cache: false,
               type: "POST"
            }
         },
         change: function () {
            var vw = this.view();
            ps_PopOptions.model = vw[0];
            ps_PopOptions.window = $("#" + ps_PopOptions.name).getKendoWindow();
            ps_PopOptions.window.refresh(options.action);
         }
      });
      dataSource.read();
   }
   else {
      ps_PopOptions.window = $("#" + ps_PopOptions.name).getKendoWindow();
      ps_PopOptions.window.refresh(options.action);
   }
}

The just call the popedit function with the options detailed in above code like:-
onclick="popedit({name:'AdminSettting',title:'Admin Settings',action:'@Url.Action("Admin_Setting", "Admin")',form:'#popFrm', read:'@Url.Action("Admin_SettingsRead", "Admin")' });"

see another of my earlier posts regarding using grid change event to bind a partial view to get the databind function