Columns fit in TreeGrid

  1. #1

    Columns fit in TreeGrid

    Hi guys,

    How can I make the columns fit in TreeGrid? Is there any setting for this?
    Also, a found an article that discribes solution of this problem but this article is written for ext.js and i don't understand how to use it.

    http://www.sencha.com/forum/showthre...id-columns-fit
  2. #2
    Hi @Piksel,

    Please see the page's <head>.

    Example
    <%@ Page Language="C#" %>
    
    <%@ 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">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Ext.NET Example</title>
    
        <ext:ResourcePlaceHolder runat="server" Mode="ScriptFiles" />
    
        <script type="text/javascript">
            Ext.ux.tree.TreeGrid.override({
                fitColumns: function () {
                    var nNewTotalWidth = this.getInnerWidth() - Ext.num(this.scrollOffset, Ext.getScrollBarWidth());
                    var nOldTotalWidth = this.getTotalColumnWidth();
                    var cs = this.getVisibleColumns();
                    var n, nUsed = 0;
            
                    for (n = 0; n < cs.length; n++) {
                        if (n == cs.length - 1) {
                            cs[n].width = nNewTotalWidth - nUsed - 1;
                            break;
                        }
                        cs[n].width = Math.floor((nNewTotalWidth / 100) * (cs[n].width * 100 / nOldTotalWidth)) - 1;
                        nUsed += cs[n].width;
                    }
            
                    this.updateColumnWidths();
                },
        
                onResize : function(w, h) {
                    Ext.ux.tree.TreeGrid.superclass.onResize.apply(this, arguments);
            
                    var bd = this.innerBody.dom;
                    var hd = this.innerHd.dom;
    
                    if (!bd) {
                        return;
                    }
    
                    if (Ext.isNumber(h)) {
                        bd.style.height = this.body.getHeight(true) - hd.offsetHeight + 'px';
                    }
    
                    if (Ext.isNumber(w)) {                        
                        var sw = Ext.num(this.scrollOffset, Ext.getScrollBarWidth());
                        if (this.reserveScrollOffset || ((bd.offsetWidth - bd.clientWidth) > 10)) {
                            this.setScrollOffset(sw);
                        } else {
                            var me = this;
                            setTimeout(function () {
                                me.setScrollOffset(bd.offsetWidth - bd.clientWidth > 10 ? sw : 0);
                            }, 10);
                        }
                    }
    
                    this.fitColumns();
                }
            });
    
            Ext.tree.ColumnResizer.prototype.onEnd = function (e) {
                var nw = this.proxy.getWidth(),
                    tree = this.tree,
                    disabled = this.dragHeadersDisabled;
            
                this.proxy.remove();
                delete this.dragHd;
            
                tree.columns[this.hdIndex].width = nw;
                tree.userResized = true;
                tree.updateColumnWidths();
            
                setTimeout(function(){
                    tree.headersDisabled = disabled;
                }, 100);
                tree.fitColumns();
            }
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <ext:TreeGrid runat="server" AutoHeight="true">
                <Columns>
                    <ext:TreeGridColumn Header="Text" DataIndex="text" Width="100" />
                    <ext:TreeGridColumn Header="Test1" DataIndex="test1" Width="100" />
                    <ext:TreeGridColumn Header="Test2" DataIndex="test2"  Width="100" />
                </Columns>
                <Root>
                    <ext:TreeNode>
                        <Nodes>
                            <ext:TreeNode Text="Node1">
                                <CustomAttributes>
                                    <ext:ConfigItem Name="test1" Value="node1_test1" Mode="Value" />
                                    <ext:ConfigItem Name="test2" Value="node1_test2" Mode="Value" />
                                </CustomAttributes>
                                <Nodes>
                                    <ext:TreeNode Text="Node1.1">
                                        <CustomAttributes>
                                            <ext:ConfigItem Name="test1" Value="node1.1_test1" Mode="Value" />
                                            <ext:ConfigItem Name="test2" Value="node1.1_test2" Mode="Value" />
                                        </CustomAttributes>
                                    </ext:TreeNode>
                                </Nodes>
                            </ext:TreeNode>
                        </Nodes>
                    </ext:TreeNode>
                </Root>
            </ext:TreeGrid>
        </form>
    </body>
    </html>
  3. #3
    Many thanks, Daniil!

Similar Threads

  1. [CLOSED] TreeGrid with editable columns
    By Daly_AF in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Jun 15, 2012, 12:00 PM
  2. add columns on a treegrid PROBLEM
    By hzhan11 in forum 1.x Help
    Replies: 0
    Last Post: Jun 13, 2012, 1:22 AM
  3. [CLOSED] Can You Have Movable Columns in a TreeGrid?
    By garrisrd in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Jul 26, 2011, 3:31 PM
  4. Replies: 0
    Last Post: Sep 27, 2010, 12:59 PM
  5. [CLOSED] TreeGrid columns indenting too much and not sorting
    By jmcantrell in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Jun 03, 2010, 3:15 PM

Tags for this Thread

Posting Permissions