Fixed the Text wrap Bug in the Infragistics. WebUI. UltraWebGrid column header.

UltraWebGrid is a powerful grid component. It is mainly used by the project because it can easily merge column headers and fix columns. In addition, it provides a wide range of Client Script APIs, however, it is also a component with many bugs. The most obvious problem is "slowness", slow page rendering, slow script operation mesh speed, and slow backend C # data traversal, however, for our teams with limited development capabilities, these problems are not necessarily better than they do. Although they can be tolerated, there are still intolerable bugs on the Interface display, when its fixed column headers are merged with multiple column headers, when the column header text has a line feed, there will be a lack of height, which will greatly affect the appearance of the interface, such things are taken out, almost no one is willing to use it. This article provides a JS Code to fix the problem of multiple lines of text wrapping in the merged column header;

Bug. after merging the column headers, multiple lines of text column headers:

Locate the cause of the error and locate the specific operation location;

Open the IE Developer Toolbar and use the Select Element By Click function to locate the title area of the grid;

 

 

Now it is to analyze its structure. The simplest way is to look at the Height attribute;

 

Delete the definition of its height. After the height of the column header in the grid is forcibly removed, everything is normal.

After knowing the DHTML definition and Correction Method of the grid, you can use a script to automatically execute it.

Note that the script execution sequence is: UltraWebGrid is initialized by JS on the page, so our script must be run after it; it is easy to run after it, put the script tag to the backend of the page.

Script correction
1 <script type = "text/javascript" defer = "defer">
2 function fixUltraWebGridHeader (gridId ){
3 if (! GridId) return;
4 var el = document. getElementById (gridId + "_ hdiv"); // locate the DIV in the grid title Area
5 if (el ){
6 var thList = el. getElementsByTagName ("TH"); // obtain its internal TH mark
7 if (thList & thList. length> 0)
8 thList [0]. style. height = ''; // After debugging by IE Developer Toolbar, you only need to modify the Height of TH0.
9}
10}
11 setTimeout ("fixUltraWebGridHeader ('<% = Grid. ClientID %>');", 0); // delayed execution. If Ajax UpdatePanel exists, IE cannot be suspended.
12 </script>

With such a scriptGrid titleThat's perfect.

 

The rest is that there is no style problem in the title of IE 6/7/8 under the IE Tester test; so, you can.

2009/9/4

Suifei