How to properly load partialview with devexpress elements into extjs panel - asp.net-mvc

Question

I was wondering if it is possible to make partialview with devexpress elements to work properly in Extjs panel. So far I managed to load partialview into Extjs panel.All devexpress controls are rendered in a proper way, however it seems that entire client side functinality of devexpress is gone - there is no reaction on hover, click etc. Here is my code
//loading partialView
Ext.getCmp('centerPanel').body.load({ url: 'Home/TempView',scripts:true})
//controller
public class HomeController : Controller
{
//
// GET: /Home/
public ActionResult Index()
{
return View();
}
public PartialViewResult TempView()
{
return PartialView();
}
}
//TempView
<div>
#Html.Partial("ToolBarView");
</div>
//ToolBarView
#using DevExpress.Web.Mvc.UI
#Html.DevExpress().ReportToolbar(settings => {
// The following settings are necessary for a Report Toolbar.
settings.Name = "ReportToolbar";
settings.ReportViewerName = "reportViewer1";
}).GetHtml()
Is there any way to make it work ?
Here is my application
http://www.sendspace.pl/file/591cd7a07e43f15a22759b2

Answer 1

With the ExtJS contentEl property you can include any content in a panel.
//index.cshtml
<div id="dxGrid">
#Html.Partial("GridViewPartialView")
</div>
//GridViewPartialView.cshtml
#Html.DevExpress().GridView(settings =>
{
settings.Name = "DevExGrid";
settings.CallbackRouteValues = new { Controller = "Home", Action = "GridViewPartialView" };
settings.Width = System.Web.UI.WebControls.Unit.Percentage(100);
settings.ClientSideEvents.EndCallback = "function(s, e) { endSizeGrid(s); }";
}).Bind(Model).GetHtml()
//ExtJS code
Ext.create('Ext.panel.Panel', {
contentEl: 'dxGrid',
id: 'gridContainer',
title: 'Devexpress inside ExtJS'
});
Keep in mind that if you resize the panel you need to resize the DevEx grid manually. You can achieve this by setting a listener on the panel with the DevEx control on it.
listeners: {
resize: function () {
adjustGridSize(this, DevExGrid);
}
}
When you interact with the DevEx control it will resize too, that is why you need to specify a clientsideevent called EndCallBack.
The implementation of the resize functions looks something like this:
function endSizeGrid(sender) {
var el = Ext.get("gridContainer");
adjustGridSize(el, sender);
};
function adjustGridSize(aGridPnl, aGridView) {
aGridView.SetHeight(aGridPnl.getHeight());
aGridView.SetWidth(aGridPnl.getWidth());
};
I hope this will help someone.