Jun 15, 2011, 3:54 PM
[CLOSED] Multi Level Grid -> Column Headers css style and alignment
I am working on a multilevel grid and have run into 2 issues:
Issue #1 in the rowexpander grid the header css is over written by grid body div. Using the following code and firebug or IE dev toolbar you'll see that the header column of the nested grid does not use .x-grid3-hd-inner. It appears in the css style but is crossed out by .x-grid3-body div. How do I change the header css in the nested grid?
Issue #2 -> revisting the issue with aligning nested grids column headers and grid cells. I have tried the css solutions mentioned in other threads and they don't seem to make a difference.
See attachment for the visual of the issues
Also here is code recreating the problem. I have included other js and markup changes I have in my grid. I have tried removing my additions to see if they were the cause and does not appear to be.
Thank You~
Issue #1 in the rowexpander grid the header css is over written by grid body div. Using the following code and firebug or IE dev toolbar you'll see that the header column of the nested grid does not use .x-grid3-hd-inner. It appears in the css style but is crossed out by .x-grid3-body div. How do I change the header css in the nested grid?
Issue #2 -> revisting the issue with aligning nested grids column headers and grid cells. I have tried the css solutions mentioned in other threads and they don't seem to make a difference.
See attachment for the visual of the issues
Also here is code recreating the problem. I have included other js and markup changes I have in my grid. I have tried removing my additions to see if they were the cause and does not appear to be.
Thank You~
<%@ Page Language="C#" %>
<%@ Import Namespace="Ext.Net.Utilities"%>
<%@ Import Namespace="System.Collections.Generic"%>
<%@ Import Namespace="ListView=Ext.Net.ListView"%>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<style type="text/css">
/* For the rowexpander getRowClass */
.subLevel-row .x-grid3-cell-inner {font-style:italic;color: #6c777d;}
/* Issue #1 -> in rowexpander grid the header class is overwritten by grid body div */
/* Changes font in the body of the grid */
.x-grid3-body div{font:normal 8pt Arial, Helevetica, sans-serif;}
/* Changes the grid header row */
.x-grid3-hd-inner {font:bold 7.5pt Arial, Helevetica, sans-serif;}
/* Issue #2 -> Here I am trying to align the Column Headers and grid cells - neither solution appears to work */
/* this is for the row expander so that width is correct and aligns header and column
per http://forums.ext.net/showthread.php?11270-Layout-issue-Show-Gridpanel-in-gridpanel-with-rowexpander&highlight=rowexpander+template
also added ScrollOffset = 0
*/
.x-grid3-row td {padding-left: 0px;padding-right: 0px;}
/* also tried this css
per http://forums.ext.net/showthread.php?13168-1.0-RowExpander-Nested-GridPanel-Columns-Misaligned-amp-Bug-in-Changing-Widths&highlight=rowexpander+template */
.x-grid3 .x-row-expander-control .x-grid3-header-offset table {table-layout:fixed;}
</style>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (X.IsAjaxRequest)
{
//We do not need to DataBind on an DirectEvent
return;
}
//Build first level
this.BuildLevel(1, "r0", "g0");
}
[DirectMethod]
public void BuildLevel(int level, string recId, string gridId)
{
var storeId = "L".ConcatWith(level, "_", recId, "_Store");
var newGridId = "L".ConcatWith(level, "_", recId, "_Grid");
// build store
var store = new Store{ID = storeId};
var reader = new JsonReader {IDProperty = "ID"};
reader.Fields.Add("ID", "Name");
reader.Fields.Add("Level", Ext.Net.RecordFieldType.Int); // Added this to control the css used by the RowExpander
reader.Fields.Add("ChildCount", Ext.Net.RecordFieldType.Int); // added this to control whether or not to build an additional level
reader.Fields.Add("Column2"); // added this to test bug in width with column headers and columns
reader.Fields.Add("Column3"); // added this to test bug in width with column headers and columns
reader.Fields.Add("Column4"); // added this to test bug in width with column headers and columns
reader.Fields.Add("Column5"); // added this to test bug in width with column headers and columns
reader.Fields.Add("Column6"); // added this to test bug in width with column headers and columns
reader.Fields.Add(new RecordField
{
Name = "Level",
Convert = {Handler = "return ".ConcatWith(level, ";")}
});
store.Reader.Add(reader);
store.CustomConfig.Add(new ConfigItem("level", level.ToString(), ParameterMode.Raw));
// bind store
var data = new List<object>();
for (int i = 1; i <= 10; i++)
{
data.Add(new { ID = recId.ConcatWith("_R", i)
, Level = i
, ChildCount = (i%2 == 0) ? 1: 0
, Name = "Level".ConcatWith(level, ": Row " + i)
, Column2 = "Column2".ConcatWith(": Row " + i)
, Column3 = "Column3".ConcatWith(": Row " + i)
, Column4 = "Column4".ConcatWith(": Row " + i)
, Column5 = "Column5".ConcatWith(": Row " + i)
, Column6 = "Column6".ConcatWith(": Row " + i)
});
}
store.DataSource = data;
//build grid
var grid = new GridPanel
{
ID = newGridId,
StoreID = "{raw}"+storeId,
AutoHeight = true,
HideHeaders = false // level != 1 change to false to demonstrate css grid header issue
};
//build columns
grid.ColumnModel.Columns.Add(new Column {DataIndex = "Name", Header = "Name"});
grid.ColumnModel.Columns.Add(new Column { DataIndex = "Column2", Header = "Column2", Width=55 });
grid.ColumnModel.Columns.Add(new Column { DataIndex = "Column3", Header = "Column3", Width =60 });
grid.ColumnModel.Columns.Add(new Column { DataIndex = "Column4", Header = "Column4", Width = 75 });
grid.ColumnModel.Columns.Add(new Column { DataIndex = "Column5", Header = "Column5", Width = 90 });
grid.ColumnModel.Columns.Add(new Column { DataIndex = "Column6", Header = "Column6", Width = 100 });
grid.ColumnModel.ID = newGridId + "_CM";
// build view
var view = new Ext.Net.GridView
{
ID = newGridId + "_View",
ForceFit = true,
ScrollOffset = 0
};
grid.View.Add(view);
// build selection model
var sm = new RowSelectionModel { ID = newGridId + "_SM" };
grid.SelectionModel.Add(sm);
// add expander for all levels except last (last level is 5)
if (level < 5)
{
view.Listeners.BeforeRefresh.Fn = "clean";
var re = new RowExpander
{
ID = newGridId + "_RE",
EnableCaching = true,
Template = { ID = newGridId + "_TPL", Html = "<div id=\"row_{ID}\" style=\"background-color:white;\"></div>" }
};
re.Listeners.BeforeExpand.Fn = "loadLevel";
grid.Plugins.Add(re);
}
if (level == 1)
{
grid.Title = "MultiLevel grid";
grid.Width = 800;
grid.Height = 600;
grid.AutoHeight = false;
this.Form.Controls.Add(store);
this.Form.Controls.Add(grid);
grid.Plugins.Add(new PanelResizer());
store.DataBind();
}
else
{
var renderEl = "row_" + recId;
X.Get(renderEl).SwallowEvent(new string[] { "click", "mousedown", "mouseup", "dblclick" }, true);
this.RemoveFromCache(storeId, gridId);
store.Render();
this.AddToCache(storeId, gridId);
this.RemoveFromCache(newGridId, gridId);
grid.Render(renderEl, RenderMode.RenderTo);
this.AddToCache(newGridId, gridId);
}
}
private void RemoveFromCache(string id, string parentId)
{
ResourceManager1.AddScript("removeFromCache({0}, {1});", JSON.Serialize(id), JSON.Serialize(parentId));
}
private void AddToCache(string id, string parentId)
{
ResourceManager1.AddScript("addToCache({0}, {1});", JSON.Serialize(id), JSON.Serialize(parentId));
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>MultiLevel GridPanel - Ext.NET Examples</title>
<link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" />
<ext:ResourcePlaceHolder runat="server" Mode="Script" />
<script type="text/javascript">
// have to override the rowexpander (not ideal) or extend the rowexpander and call it this way:
// getRowClass: function (record, rowIndex) {
// var cls = 'subLevel-row'; // add code here to determine correct class
// return this.constructor.prototype.getRowClass.apply(this, arguments) + ' ' + cls;
// }
Ext.grid.RowExpander.override({
getRowClass: function (record, rowIndex, p, ds) {
p.cols = p.cols - 1;
var content = this.bodyContent[record.id];
if (!content && !this.lazyRender) {
content = this.getBodyContent(record, rowIndex);
}
if (content) {
p.body = content;
}
var cls = (record.data.Level > 1) ? 'subLevel-row': '';
return this.state[record.id] ? "x-grid3-row-expanded" : "x-grid3-row-collapsed" + ' ' + cls;
},
// Sets the visibility of the +/- for the grid row expander
renderer: function (v, p, record) {
if (record.get('ChildCount') !== 0) {
p.cellAttr = 'rowspan="2"';
return '<div class="x-grid3-row-expander"> </div>';
}
return '';
}
});
window.lookup = {};
var clean = function (view, isDestroy) {
var controls = window.lookup[view.grid.id] || {},
ids = [];
for(var c in controls){
ids.push(controls[c].id || controls[c].storeId);
}
if (ids.length > 0){
if (isDestroy !== true){
view.grid.getRowExpander().collapseAll();
}
for(var i=0; i<ids.length;i++){
removeFromCache(ids[i], view.grid.id);
}
}
};
var addToCache = function(c, parent){
window.lookup[parent] = window.lookup[parent] || {};
window.lookup[parent][c] = window[c];
}
var removeFromCache = function(c, parent){
window.lookup[parent] = window.lookup[parent] || {};
var ctrl = window.lookup[parent][c];
delete window.lookup[parent][c];
if (ctrl){
if (ctrl.view){
clean(ctrl.view, true);
}
ctrl.destroy();
}
}
var loadLevel = function (expander, record, body, row) {
if (body.rendered) {
return;
}
// Code added to stop expansion when there are no children
if (record.data.ChildCount === 0) {
return false;
}
var recId = record.id,
gridId = expander.grid.id,
level = record.data.Level;
mLevels.BuildLevel(level + 1, recId, gridId, {
eventMask: {
showMask: true,
tartget: "customtarget",
customTarget: expander.grid.body
},
success: function () {
body.rendered = true;
}
});
};
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" ScriptMode="Debug" SourceFormatting="true" DirectMethodNamespace="mLevels" />
<h1>MultiLevel GridPanel</h1>
</form>
</body>
</html>
Last edited by Daniil; Jun 27, 2011 at 12:37 PM.
Reason: [CLOSED]
Originally Posted by bsnezw
