Apr 26, 2016, 3:10 PM
[CLOSED] JavaScript error - RowExpander and component TreeGrid
Hello!
I have
GridPanel -> Grouping + RowExpand( Load component - partition view(TreeGrid))
If I change mouse cursor position in treeGrid JavaScript throws an error
(Uncaught TypeError: Cannot read property 'isCollapsedPlaceholder' of null)
It is necessary to fix it
Index.cshtml
I have
GridPanel -> Grouping + RowExpand( Load component - partition view(TreeGrid))
If I change mouse cursor position in treeGrid JavaScript throws an error
(Uncaught TypeError: Cannot read property 'isCollapsedPlaceholder' of null)
It is necessary to fix it
Index.cshtml
@
@using Ext.Net.MVC
@using Icon = Ext.Net.Icon
@using Region = Ext.Net.Region
@model ICollection<StageItemModel>
@{
ViewBag.Title = "";
Layout = "~/Views/Shared/_BaseLayout.cshtml";
var X = Html.X();
}
@section bodySection
{
@(X.Viewport()
.MinWidth(1245)
.MinHeight(600)
.Layout(LayoutType.Border)
.AutoScroll(true)
.Items(
X.GridPanel()
.ID("gpnlCalPlan")
.Title("CalPlan")
.Region(Region.Center)
.Flex(1)
.Frame(true)
.Store(
X.StoreForModel()
.Proxy(X.AjaxProxy()
.Url(Url.Action("LoadCalendarPlan"))
.Reader(X.JsonReader().RootProperty("data"))
.ActionMethods(methods => methods.Read = HttpMethod.POST)
)
.GroupField("CalendarPlanName")
)
.ColumnModel(
X.Column().DataIndex(Model, m => m.CalendarPlanName).Text("CalPlan").Hidden(true),
X.Column().DataIndex(Model, m => m.Name).Text("Stage Name").MinWidth(150).Flex(1),
X.DateColumn().DataIndex(Model, m => m.DateTo).Text("Date To").MinWidth(150)
)
.Plugins(Html.X().RowExpander()
.Loader(Html.X().ComponentLoader()
.Url(Url.Action("GetGrid"))
.Mode(LoadMode.Component)
.LoadMask(mask => mask.ShowMask = true)
).ExpandOnEnter(true)
.ExpandOnDblClick(true)
.SingleExpand(true)
)
.View(
Html.X().GridView()
)
.Features(
Html.X().Grouping()
.ID("grCalendarPlan")
.GroupHeaderTplString("{columnName}: {name}")
.StartCollapsed(false)
)
))
} public class StageItemModel
{
public string Name { get; set; }
public string CalendarPlanName { get; set; }
public DateTime DateTo { get; set; }
} public ActionResult Index()
{
return View();
}
public ActionResult LoadCalendarPlan()
{
var ListStage = new List<StageItemModel>
{
new StageItemModel()
{
CalendarPlanName = "CalPlan 1",
Name = "Stage 1",
DateTo = DateTime.Now.AddDays(5)
},
new StageItemModel()
{
CalendarPlanName = "CalPlan 1",
Name = "Stage 2",
DateTo = DateTime.Now.AddDays(10)
},
new StageItemModel()
{
CalendarPlanName = "CalPlan 1",
Name = "Stage 3",
DateTo = DateTime.Now.AddDays(15)
},
new StageItemModel()
{
CalendarPlanName = "CalPlan 2",
Name = "Stage 4",
DateTo = DateTime.Now.AddDays(5)
},
new StageItemModel()
{
CalendarPlanName = "CalPlan 2",
Name = "Stage 5",
DateTo = DateTime.Now.AddDays(10)
},
new StageItemModel()
{
CalendarPlanName = "CalPlan 2",
Name = "Stage 6",
DateTo = DateTime.Now.AddDays(15)
}
};
return this.Store(ListStage);
}
public ActionResult GetGrid(StoreRequestParameters parameters)
{
var root = new Node
{
Text = "root"
};
root.CustomAttributes.Add(new ConfigItem
{
Name = "Comment",
Value = "Comment root"
});
var child1 = new Node
{
Text = "child1"
};
child1.CustomAttributes.Add(new ConfigItem
{
Name = "Comment",
Value = "Comment 1"
});
var child2 = new Node
{
Text = "child2"
};
child2.CustomAttributes.Add(new ConfigItem
{
Name = "Comment",
Value = "Comment 2"
});
root.Children.Add(child1);
root.Children.Add(child2);
return this.ComponentConfig("InnerGrid", root);
//return this.ComponentConfig("InnerGrid", ExtNetModel.GetAllExtModels());
}@model Node
@{
var X = Html.X();
}
@(
X.TreePanel()
.ID("tpnlDetail")
.Region(Region.Center)
.RootVisible(true)
.AutoScroll(true)
.Width(600)
.Height(300)
.ColumnModel(
X.TreeColumn().Width(150)
.DataIndex("text"),
X.Column().Width(150)
.DataIndex("Comment")
)
.AutoLoad(false)
.Root(Model)
)
Last edited by fabricio.murta; May 24, 2016 at 7:47 PM.
