PDA

View Full Version : [CLOSED] Grid column lock issue



alscg
Dec 12, 2013, 9:50 AM
Hi,

We are creating a grid using dynamic columns & modelfields as shown in below code.

Controller :


List<Column> columns = new List<Column>();
columns.Add(new Column() { Text = "Columns 1", DataIndex = "index1", Width = 200 });
columns.Add(new Column() { Text = "Columns 2", DataIndex = "index2", Width = 200 });
columns.Add(new Column() { Text = "Columns 3", DataIndex = "index3", Width = 200 });
// Added extra column
columns.Insert(0, new Column() { Text = "", DataIndex = "index1", Locked = true, Width = 40, Renderer = new Renderer() { Fn = "RowActionBtnState" } });

List<ModelField> modelFields = new List<ModelField>();
modelFields.Add(new ModelField("index1"));
modelFields.Add(new ModelField("index2"));
modelFields.Add(new ModelField("index3"));

Model.ParentGridColumns = columns;
Model.ParentGridModelFields = modelFields;


View :


Html.X().GridPanel()
.Header(false)
.Store(
Html.X().Store()
.PageSize(10)
.Proxy(
Html.X().AjaxProxy()
.Url(Url.Action("ReadStatePagingData"))
.Reader(Html.X().JsonReader().Root("data"))
)
.Model(
Html.X().Model().IDProperty("index1")
.Fields(Model.ParentGridModelFields)
)
)
.ColumnModel(Model.ParentGridColumns)
.Plugins(Html.X().RowExpander()
.Loader(Html.X().ComponentLoader()
.Url(Url.Action("ChildGridData", "Insurer"))
.Mode(LoadMode.Component)
.LoadMask(mask => mask.ShowMask = true)
.Params(ps => ps.Add(new Parameter("index1", "this.record.getId()", ParameterMode.Raw)))
)
.Listeners(events =>
{
events.Expand.Handler = "this.grid.doLayout();";
events.Collapse.Handler = "this.grid.doLayout();";
})
)
.BottomBar(Html.X().PagingToolbar())


When we insert a column and set its 'Locked' property to true(in Controller) the grid doesn't show the data & appears to be disabled.
Also in firebug tool it shows error as : 'TypeError: grid.getView(...).getViewRange is not a function' in file 'ext.axd?v=28524 (line 1674)'
Please refer attached image.
7362
If we remove Loader of RowExpander then everything works well but our main part of grid is RowExpander.

Please suggest.

Daniil
Dec 12, 2013, 3:08 PM
Hi @alscg,

Please try to set up

EnableLocking="true"
for the GridPanel.

alscg
Dec 13, 2013, 11:11 AM
Hi @alscg,

Please try to set up

EnableLocking="true"
for the GridPanel.

Daniil,

I have tried with .EnableLocking(true) for GridPanel but problem is same.

If we remove Loader of RowExpander then it works. I don't understand how it relates with locking.

Thanks.

Baidaly
Dec 14, 2013, 3:59 AM
Hello!

I couldn't reproduce with the sample below:


public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
}

View:


@{
DateTime now = DateTime.Now;
var data = new object[]
{
new object[] { "3m Co", 71.72, 0.02, 0.03, now },
new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, now },
new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, now },
new object[] { "American Express Company", 52.55, 0.01, 0.02, now },
new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49, now },
new object[] { "AT&T Inc.", 31.61, -0.48, -1.54, now },
new object[] { "Boeing Co.", 75.43, 0.53, 0.71, now },
new object[] { "Caterpillar Inc.", 67.27, 0.92, 1.39, now },
new object[] { "Citigroup, Inc.", 49.37, 0.02, 0.04, now }
};
List<Column> columns = new List<Column>();
columns.Add(new Column() { Text = "FirstName", DataIndex = "FirstName", Width = 200 });
columns.Add(new Column() { Text = "LastName", DataIndex = "LastName", Width = 200 });
columns.Add(new Column() { Text = "Company", DataIndex = "Company", Width = 200 });
// Added extra column
columns.Insert(0, new Column() { Text = "City", DataIndex = "City", Locked = true, Width = 40 });

List<ModelField> modelFields = new List<ModelField>();
modelFields.Add(new ModelField("FirstName"));
modelFields.Add(new ModelField("LastName"));
modelFields.Add(new ModelField("Company"));
modelFields.Add(new ModelField("City"));

var parentGridColumns = columns;
var parentGridModelFields = modelFields;
}

@Html.X().ResourceManager()

@(Html.X().GridPanel()
.Title("Customers")
.Width(630)
.Height(300)
.ColumnModel(parentGridColumns)
.Store(Html.X().Store()
.Model(Html.X().Model()
.Fields(parentGridModelFields)
)
.DataSource(data)
)
)

alscg
Dec 16, 2013, 10:09 AM
Baidaly,

As I said when I lock the column from controller & remove Loader of RowExpander plugin everything works well.

Please try to set RowExpander plugin with LoadMode.Component in your example.

Thanks

Baidaly
Dec 16, 2013, 7:34 PM
Try the following overriding it has some problems but it works. We will investigate this issue:


<script>
Ext.override(Ext.ux.RowExpander, {
restoreComponents: function () {
var grid = this.getCmp(),
cmps = [];
Ext.each(grid.getView().isLockingView ? grid.getView().normalView.getViewRange() : grid.getView().getViewRange(), function (record, i) {
if (record.isCollapsedPlaceholder) {
return;
}
if (this.recordsExpanded[record.internalId]) {
var rowNode = grid.getView().isLockingView ? grid.view.normalView.getNode(record, false) : grid.getView().getNode(record, false),
row = Ext.get(rowNode),
nextBd = row.down(this.rowBodyTrSelector),
body = row.down("div.x-grid-rowbody"),
rowCmp = this.getComponent(record, body);
if (!rowCmp) {
rowCmp = this.createComponent(record, body);
}
cmps.push(rowCmp);
}
}, this);
this.removeOuterOrphans();

if (!grid.getView().isLockingView) {
grid.view.refreshSize();
}

Ext.each(cmps, function (cmp) {
cmp.doLayout ? cmp.doLayout() : cmp.doComponentLayout();
});
},

onRowCmpLoad: function (loader, response, options) {
if (loader.paramsFnScope.expander.getCmp().getView(). isLockingView) {
loader.paramsFnScope.expander.getCmp().view.locked View.refreshSize();
loader.paramsFnScope.expander.getCmp().view.normal View.refreshSize();
} else {
loader.paramsFnScope.expander.getCmp().view.refres hSize();
loader.paramsFnScope.expander.getCmp().view.refres hSize();
}
var target = loader.getTarget();
target.doLayout ? target.doLayout() : target.doComponentLayout();
}
});
</script>


Here is the full example. To reproduce remove overriding:

Controller:

public ActionResult Index()
{
return View();
}

public ActionResult GetGrid(string id)
{
List<object> data = new List<object>();
for (int i = 1; i <= 10; i++)
{
data.Add(new { ID = "P" + i, Name = "Product " + i });
}

GridPanel grid = new GridPanel
{
Height = 200,
EnableColumnHide = false,
Store =
{
new Store
{
Model =
{
new Model {
IDProperty = "ID",
Fields = {
new ModelField("ID"),
new ModelField("Name")
}
}
},
DataSource = data
}
},
ColumnModel =
{
Columns =
{
new Column { Text = "Products's Name", DataIndex = "Name" }
}
}
};

return this.ComponentConfig(grid);
}

View:

@{
DateTime now = DateTime.Now;
var data = new object[]
{
new object[] { "3m Co", 71.72, 0.02, 0.03, now },
new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, now },
new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, now },
new object[] { "American Express Company", 52.55, 0.01, 0.02, now },
new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49, now },
new object[] { "AT&T Inc.", 31.61, -0.48, -1.54, now },
new object[] { "Boeing Co.", 75.43, 0.53, 0.71, now },
new object[] { "Caterpillar Inc.", 67.27, 0.92, 1.39, now },
new object[] { "Citigroup, Inc.", 49.37, 0.02, 0.04, now }
};
List<Column> columns = new List<Column>();
columns.Add(new Column() { Text = "FirstName", DataIndex = "FirstName", Width = 200 });
columns.Add(new Column() { Text = "LastName", DataIndex = "LastName", Width = 200 });
columns.Add(new Column() { Text = "Company", DataIndex = "Company", Width = 200 });
// Added extra column
columns.Insert(0, new Column() { Text = "City", DataIndex = "City", Locked = true, Width = 40 });

List<ModelField> modelFields = new List<ModelField>();
modelFields.Add(new ModelField("FirstName"));
modelFields.Add(new ModelField("LastName"));
modelFields.Add(new ModelField("Company"));
modelFields.Add(new ModelField("City"));

var parentGridColumns = columns;
var parentGridModelFields = modelFields;
}

@Html.X().ResourceManager()

<script>
Ext.override(Ext.ux.RowExpander, {
restoreComponents: function () {
var grid = this.getCmp(),
cmps = [];
Ext.each(grid.getView().isLockingView ? grid.getView().normalView.getViewRange() : grid.getView().getViewRange(), function (record, i) {
if (record.isCollapsedPlaceholder) {
return;
}
if (this.recordsExpanded[record.internalId]) {
var rowNode = grid.getView().isLockingView ? grid.view.normalView.getNode(record, false) : grid.getView().getNode(record, false),
row = Ext.get(rowNode),
nextBd = row.down(this.rowBodyTrSelector),
body = row.down("div.x-grid-rowbody"),
rowCmp = this.getComponent(record, body);
if (!rowCmp) {
rowCmp = this.createComponent(record, body);
}
cmps.push(rowCmp);
}
}, this);
this.removeOuterOrphans();

if (!grid.getView().isLockingView) {
grid.view.refreshSize();
}

Ext.each(cmps, function (cmp) {
cmp.doLayout ? cmp.doLayout() : cmp.doComponentLayout();
});
},

onRowCmpLoad: function (loader, response, options) {
if (loader.paramsFnScope.expander.getCmp().getView(). isLockingView) {
loader.paramsFnScope.expander.getCmp().view.locked View.refreshSize();
loader.paramsFnScope.expander.getCmp().view.normal View.refreshSize();
} else {
loader.paramsFnScope.expander.getCmp().view.refres hSize();
loader.paramsFnScope.expander.getCmp().view.refres hSize();
}
var target = loader.getTarget();
target.doLayout ? target.doLayout() : target.doComponentLayout();
}
});
</script>

@(Html.X().GridPanel()
.ID("GridPanel1")
.Title("Customers")
.Width(630)
.Height(300)
.ColumnModel(parentGridColumns)
.EnableLocking(true)
.Store(Html.X().Store()
.Model(Html.X().Model()
.Fields(parentGridModelFields)
)
.DataSource(data)
)
.Plugins(Html.X().RowExpander()
.Loader(Html.X().ComponentLoader()
.Url(Url.Action("GetGrid"))
.LoadMask(mask => mask.ShowMask = true)
.Mode(LoadMode.Component)
.Params(ps => ps.Add(new Parameter("index1", "this.record.getId()", ParameterMode.Raw)))
)
.Listeners(events =>
{
events.Expand.Handler = "this.grid.doLayout();";
events.Collapse.Handler = "this.grid.doLayout();";
})
)
.BottomBar(Html.X().PagingToolbar())
)

alscg
Dec 17, 2013, 6:23 AM
Its working.

Thank you Baidaly.

Daniil
Dec 17, 2013, 11:26 AM
I think we got it fixed in the trunk. Could you update and retest, please?

alscg
Dec 19, 2013, 8:56 AM
Yes. We have taken the latest dlls from trunk. The locking issue is solved but we are facing row expand collapse issue.

When we expand row for the first time the inner block overlaps over below rows as shown in image :
7381

And after collapsing it and expanding again, the row will get re-sized as shown in image :
7382

We used following code in cshtml :


.Plugins(Html.X().RowExpander()
.Loader(Html.X().ComponentLoader()
.Url(Url.Action("ChildGridDataData", "Child"))
.Mode(LoadMode.Component)
.LoadMask(mask => mask.ShowMask = true)
.Params(ps => ps.Add(new Parameter("Child_ID", "this.record.getId()", ParameterMode.Raw)))
)
.Listeners(events =>
{
events.Expand.Handler = "this.grid.doLayout();";
events.Collapse.Handler = "this.grid.doLayout();";
})
)
.Listeners(events => events.ViewReady.Handler = "this.grid.doLayout();this.up('gridpanel').doLayout ();")

Daniil
Dec 19, 2013, 1:59 PM
Please provide a full test case to copy/paste and run.