Sep 11, 2015, 7:07 AM
[FIXED] [#894] [3.3] GridPanel/RowExpander not working as expected
Hi
I have an application which is making extenisve use of GridPanels and RowExpanders. I'm experiencing problems with getting the functionality to behave as I want it to. The full set up is relatively complicated so I have broken it down into stages. The following code is the first stage
The View code is:
I want the RowExpander to remain open. Am I missing something or is this a bug?
As a minor aside why is the column containing the +/- sign not wide enough?
Thanks for your help
I have an application which is making extenisve use of GridPanels and RowExpanders. I'm experiencing problems with getting the functionality to behave as I want it to. The full set up is relatively complicated so I have broken it down into stages. The following code is the first stage
The View code is:
<!DOCTYPE html>
<html>
<head>
<title></title>
@{
Layout = "~/Views/Shared/_Layout.cshtml";
}
@section scripts
{
<script>
var counter = 1;
var changeText = function (button) {
var grid = button.up('grid');
var selectedRecords = grid.getSelectionModel().getSelection();
if (selectedRecords.length > 0) {
selectedRecords[0].set("Test", "Testing " + counter);
counter++;
}
}
</script>
}
</head>
<body>
@section mainBody
{
@(Html.X().GridPanel().Width(352)
.Title("Users").ID("GridPanel").Border(true)
.Store(Html.X().Store()
.ID("Store")
.Model(Html.X().Model().IDProperty("ID")
.Fields(
new ModelField("ID", ModelFieldType.Int),
new ModelField("Name"),
new ModelField("Test")
)
)
.Proxy(Html.X().AjaxProxy().Url(Url.Action("Read")).Reader(Html.X().JsonReader().RootProperty("data"))))
.ColumnModel(
Html.X().Column().Text("User").DataIndex("Name").Width(100),
Html.X().Column().Text("Test").DataIndex("Test").Flex(50)
)
.SelectionModel(Html.X().RowSelectionModel().ID("rowSelectionModel").Mode(SelectionMode.Single))
.TopBar(Html.X().Toolbar().Items(
Html.X().Button().Text("Test").Listeners(lst => { lst.Click.Handler = "changeText(this)"; })
)
)
.Plugins(
Html.X().RowExpander().SingleExpand(true).ID("RowExpand")
.Component(
Html.X().GridPanel().Border(true).Height(250).ID("AccessgridPanel")
.Store(Html.X().Store().ID("RowExpanderStore")
.Model(Html.X().Model()
.Fields(
new ModelField("ID", ModelFieldType.Int),
new ModelField("Option"),
new ModelField("IsReadOnly", ModelFieldType.Boolean)
)
)
.Proxy(Html.X().AjaxProxy().Url(Url.Action("RowExpander")).Reader(Html.X().JsonReader().RootProperty("data")))
.AutoLoadParams(new { id = JRawValue.From("this.record.data.ID") }))
.ColumnModel(
Html.X().Column().Text("Option").DataIndex("Option").Flex(1),
Html.X().CheckColumn().Text("Read Only?").DataIndex("IsReadOnly").Width(100).Editable(true)
)
)
)
)
}
</body>
</html>
The Controller code is:using Ext.Net;
using Ext.Net.MVC;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web.Mvc;
namespace ExtSandpit.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
public ActionResult Read()
{
List<User> lstUsers = new List<User>();
lstUsers.Add(new User(1000,"Jeff"));
lstUsers.Add(new User(1001,"James"));
return this.Store(lstUsers);
}
public ActionResult RowExpander(string id)
{
int userID = Int32.Parse(id);
List<AccessOptionDetail> lstAccessOptionDetail = new List<AccessOptionDetail>();
if (userID == 1001)
{
lstAccessOptionDetail.Add(new AccessOptionDetail(1, "Goods In", true));
}
else if (userID == 1000)
{
lstAccessOptionDetail.Add(new AccessOptionDetail(2, "Production", false));
}
return this.Store(lstAccessOptionDetail);
}
}
public class User
{
public User()
{
}
public User(int id, string name)
{
ID = id;
Name = name;
}
public int ID { get; set; }
public string Name { get; set; }
public string Test { get; set; }
}
public class AccessOptionDetail
{
public AccessOptionDetail()
{
}
public AccessOptionDetail(int id, string option, bool isreadonly)
{
ID = id;
Option = option;
IsReadOnly = isreadonly;
}
public int ID { get; set; }
public string Option { get; set; }
public bool? IsReadOnly { get; set; }
}
}
When I select a row in the main GridPanel and press the Test button a JavaScript function updates the value of the Test field. This works OK when the RowExpander is closed but when the RowExpander is open the effect of the function is to close the RowExpander but leave the +/- box as -. Clicking on this change it to a +. It is then possible to open the RowExpander again.I want the RowExpander to remain open. Am I missing something or is this a bug?
As a minor aside why is the column containing the +/- sign not wide enough?
Thanks for your help
Last edited by Daniil; Sep 11, 2015 at 1:20 PM.
Reason: [FIXED] [#894] [3.3]