Prolem with hidden columns

[anakreon]

I had post a message about the GridEditor.
Because the url kept changing I have created a static html page
which demonstrates the problem.

I think the problem is related to hidden columns in both cases.
The url of the file is:
http://mathind.csd.auth.gr/test_case.tgz(128K)
Please extract the file (It will create a directory named test_case) and open the file
test.html

[jack.slocum]

Before I do all that, what is the problem?

[anakreon]

The problem is that in the first column 4 columns are displayed one over the other
and the last for columns display nothing under the header

[jack.slocum]

Do a search for "multiple grids".. I think that is your problem.

[anakreon]

In the example there is only one grid.

[jack.slocum]

You will need to create rules as in the "multiple grids" post. If you look in grid.css there are 20 placeholder rules that are used by default if you don't define any rules for the columns in your grid. Your grid has 26 columns, so the extra 6 columns have no rules to use. Open grid.css you will see what I am talking about and there is a blob in there explaining it.

[Animal]

The Grid is so super-useful, that I think the "multiple grids" question will become a FAQ.

Jack, I suggest a "sticky" thread containing the following suggestion (Unless you want to add the CSSStyleSheet object to yui-ext!).

Use the CSSStyleSheet object to create container-specific style rules for each grid:



// Create stylesheet rules for this specific grid.
this.stylesheet = new CSSStyleSheet();
for (var i = 0; i < this.columnModel.getColumnCount(); i++)
{
this.stylesheet.addRule("#" + this.container.id + " .ygrid-col-" + i, "");
}

// Make sure the yui-ext sees the new rules
YAHOO.ext.util.CSS.getRules(true);



Where this is the CSSStyleSheet object:



/**
An object which encapsulates a dynamically created, modifiable stylesheet.
*/
function CSSStyleSheet()
{
/**
* The array of rules for this stylesheet.
* @private
*/
this.rules = [];

/**
* An associative array, keyed by the selector text containing the rule index number for
* the rule for that selector text.
* @private
*/
this.ruleIndex = [];

if (document.createStyleSheet)
{
this.sheet = document.createStyleSheet();
}
else
{
this.styleElement = document.createElement("style");
document.getElementsByTagName("head")[0].appendChild(this.styleElement);
this.sheet = this.styleElement.styleSheet ? this.styleElement.styleSheet : this.styleElement.sheet;
}
}

/**
Create a style rule in the stylesheet.
@param selectorText The CSS selector text.
@param ruleText The style specification with or without braces.
*/
CSSStyleSheet.prototype.addRule = function(selectorText, ruleText)
{
var result;

// Opera, and other browsers with no DOM stylesheet support
if (!this.sheet)
{
// Remove braces.
ruleText = ruleText.replace(/^\{?([^\}])/, "$1");

// If it exists, modify it.
if (!this.ruleIndex[selectorText])
this.ruleIndex[selectorText] = this.rules.length;
this.rules[this.ruleIndex[selectorText]] = ruleText;

// Build the innerHTML of the style element from our rules.
var cssText = "";
for (var sel in this.ruleIndex)
cssText = sel + " {" + this.rules[this.ruleIndex[sel]] + "}";
this.styleElement.innerHTML = cssText;
}

// DOM standard. Result object contains looks like {cssText:selectorText + " " + ruleText}
// cssText property is readonly. deleteRule(ruleIndex} must be used to remove.
else if (this.sheet.insertRule)
{
// insertRule() requires braces
if (!/^\{[^\}]*\}$/.test(ruleText))
ruleText = "{" + ruleText + "}";

var r = this.sheet.cssRules.length;
this.sheet.insertRule(selectorText + " " + ruleText, r);
result = this.sheet.cssRules[r];
this.ruleIndex[selectorText] = r;

if (this.rules.length == 0)
this.rules = this.sheet.cssRules;
}

// IE.
// Each rule object has a style property which contains the style attributes.
else if (this.sheet.addRule)
{
// addRule() requires no braces
ruleText = ruleText.replace(/^\{?([^\}])/, "$1");
var r = this.sheet.rules.length;
if (ruleText.length == 0)
ruleText = " "
this.sheet.addRule(selectorText, ruleText);
result = this.sheet.rules[r];
this.ruleIndex[selectorText] = r;

if (this.rules.length == 0)
this.rules = this.sheet.rules;
}
else
{
alert("Cannot create rule");
}
return result;
};

/**
* Change a style property in a rule.
* @param selectorText The identifier of the rule to change
* @param property The name of the style property to change
* @param value The new value of the style property.
*/
CSSStyleSheet.prototype.changeRule = function(selectorText, property, value)
{
var index = this.ruleIndex[selectorText];

// If the rule is not present, create it.
if (typeof index == "undefined")
{
this.addRule(selectorText, property + ":" + value);
}

// Opera, and other browsers with no DOM stylesheet support
if (!this.sheet)
{
var cssText = this.rules[index];
if (cssText)
{
var propSearch = new RegExp("^(.*" + property + "\\s*\:\\s*)([^;]*)(.*)$");
var ruleText = propSearch.exec(cssText);
// If the value was in the old rule...
if (ruleText)
{
// And it was different...
if (ruleText[4] != value)
{
this.rules[index] = ruleText[1] + value + ruleText[3];
}
}
else
{
this.rules[index] = cssText + "; " + property + ": " + value + ";";
}

// Rebuild the innerHTML of the style element from our rules.
cssText = "";
for (var sel in this.ruleIndex)
cssText = sel + " {" + this.rules[this.ruleIndex[sel]] + "}";
this.styleElement.innerHTML = cssText;
}

var cssText = "";
var cssText = "";
for (var sel in this.ruleIndex)
cssText = sel + " {" + this.rules[this.ruleIndex[sel]] + "}";
}

// IE. Easy
else if (this.sheet.addRule)
{
var style = this.rules[index].style;
property = property.replace(/-([a-z])/gi, function(m0, m1) {return m1.toUpperCase();});
style[property] = value;
}

// DOM standard. We must parse the rule, delete, and create a new one.
else if (this.sheet.insertRule)
{
var oldRule = this.rules[index];
if (oldRule)
{
var cssText = oldRule.cssText;
var propSearch = new RegExp("^[^\\{]*(\\{.*" + property + "\\s*\\:\\s*)([^};]*)([^}]*})");
var ruleText = propSearch.exec(cssText);

// If the value was in the old rule...
if (ruleText)
{
// And it was different...
if (ruleText[4] != value)
{
cssText = ruleText[1] + value + ruleText[3];
this.sheet.deleteRule(index);
this.sheet.insertRule(selectorText + " " + cssText, index);
}
}
else
{
var propSearch = new RegExp("\\{([^}]*)}");
ruleText = propSearch.exec(cssText);
cssText = "{ " + ruleText[1] + "; " + property + ": " + value + " }";
this.sheet.deleteRule(index);
this.sheet.insertRule(selectorText + " " + cssText, index);
}
}
}
};

CSSStyleSheet.prototype.getRuleProperty = function(selectorText, property)
{
var index = this.ruleIndex[selectorText];

// If the rule is not present, create it.
if (typeof index == "undefined")
{
return;
}

// Opera, and other browsers with no DOM stylesheet support
if (!this.sheet)
{
var cssText = this.rules[index];
if (cssText)
{
var propSearch = new RegExp("^.*" + property + "\s*\:\s*([^;]*)");
var ruleText = propSearch.exec(cssText);

// If the value was in the old rule...
if (ruleText)
{
return ruleText[1];
}
}
}

// IE. Easy
else if (this.sheet.addRule)
{
var style = this.rules[index].style;
property = property.replace(/-([a-z])/gi, function(m0, m1) {return m1.toUpperCase();});
return style[property];
}

// DOM: We must parse the rule cssText.
else if (this.sheet.insertRule)
{
var oldRule = this.rules[index];
if (oldRule)
{
cssText = oldRule.cssText;
var propSearch = new RegExp("^.*" + property + "\\s*\\:\\s*([^};]*)");
var ruleText = propSearch.exec(cssText);

// If the value was in the old rule...
if (ruleText)
{
return ruleText[1];
}
}
}
};

[jack.slocum]

Can you do me a favor Animal and give me another link where you are using the CSSStylesheet class and I will surf there in Safari and give it a look. If it works it would be a great addition.

[Animal]

Go to http://80.177.128.44:8080/aspicio/form/Lister.jsp?type=CountrySubEntity

log in as nigelw, password p

Then go to http://80.177.128.44:8080/aspicio/TestLayout.html

The Search button is in the Layout's titlebar - a little binocular icon.

To get more ListManagers, just click on the page title div, and you can create as many ListManagers with Grids in as you want.

[Animal]

I'm not sure if this is new, but the ListManager in the full screen...

if you pull the bottom edge of the browser upwards to shrink the window, the Layout doesn't resize correctly, and you get scrollbars.

I'm sure that was working... :?:

[jack.slocum]

I can't a blank page with "The Title!" at the top in Safari. :shock: