[CLOSED] Column layout to build a table dynamically

  1. #1

    [CLOSED] Column layout to build a table dynamically

    I tried to build a table dynamically as following code example.

    However if there is a column have very long text. The text will not grow inside its own column, but overlap to following column.
    How can I fix this?

    <%@ Page Language="C#" %>
       
    <script runat="server">
            
        protected void Page_Load(object sender, EventArgs e)
        {
            Container conRow = new Container { Layout = "ColumnLayout" };
    
            Container conStyle = new Container { ColumnWidth = 0.08, StyleSpec = "text-align: center;" };
            Ext.Net.Label lblStyle = new Ext.Net.Label { Cls = "detail-text" };
            lblStyle.Text = "fff";
            if (lblStyle.Text.Trim().CompareTo("") == 0)
            {
                lblStyle.Text = "1";
                lblStyle.Hidden = true;
                lblStyle.HideMode = HideMode.Visibility;
            }
            conStyle.Items.Add(lblStyle);
            conRow.Items.Add(conStyle);
    
            Container conColor = new Container { ColumnWidth = 0.08, StyleSpec = "text-align: center;" };
            Ext.Net.Label lblColor = new Ext.Net.Label { Cls = "detail-text" };
            lblColor.Text = "Red";
            if (lblColor.Text.Trim().CompareTo("") == 0)
            {
                lblColor.Text = "1";
                lblColor.Hidden = true;
                lblColor.HideMode = HideMode.Visibility;
            }
            conColor.Items.Add(lblColor);
            conRow.Items.Add(conColor);
    
            Container conWidth = new Container { ColumnWidth = 0.08, StyleSpec = "text-align: center;" };
            Ext.Net.Label lblWidth = new Ext.Net.Label { Cls = "detail-text" };
            lblWidth.Text = "12";
            if (lblWidth.Text.Trim().CompareTo("") == 0)
            {
                lblWidth.Text = "1";
                lblWidth.Hidden = true;
                lblWidth.HideMode = HideMode.Visibility;
            }
            conWidth.Items.Add(lblWidth);
            conRow.Items.Add(conWidth);
    
            Container conDesc = new Container { ColumnWidth = 0.21, StyleSpec = "text-align: center;" };
            Ext.Net.Label lblDesc = new Ext.Net.Label { Cls = "detail-text" };
            lblDesc.Text = "veryy long textdddddddddddddddddddddddddddddddddddddddddd";
            if (lblDesc.Text.Trim().CompareTo("") == 0)
            {
                lblDesc.Text = "1";
                lblDesc.Hidden = true;
                lblDesc.HideMode = HideMode.Visibility;
            }
            conDesc.Items.Add(lblDesc);
            conRow.Items.Add(conDesc);
    
            Container conPrc = new Container { ColumnWidth = 0.08, StyleSpec = "text-align: center;" };
            Ext.Net.Label lblPrc = new Ext.Net.Label { Cls = "detail-text" };
            lblPrc.Text = "100";
            if (lblPrc.Text.Trim().CompareTo("") == 0)
            {
                lblPrc.Text = "1";
                lblPrc.Hidden = true;
                lblPrc.HideMode = HideMode.Visibility;
            }
            conPrc.Items.Add(lblPrc);
            conRow.Items.Add(conPrc);
    
            Container conUnit = new Container { ColumnWidth = 0.08, StyleSpec = "text-align: center;" };
            Ext.Net.Label lblUnit = new Ext.Net.Label { Cls = "detail-text" };
            lblUnit.Text = "KG";
            if (lblUnit.Text.Trim().CompareTo("") == 0)
            {
                lblUnit.Text = "1";
                lblUnit.Hidden = true;
                lblUnit.HideMode = HideMode.Visibility;
            }
            conUnit.Items.Add(lblUnit);
            conRow.Items.Add(conUnit);
    
            Container conPutup = new Container { ColumnWidth = 0.08, StyleSpec = "text-align: center;" };
            Ext.Net.Label lblPutup = new Ext.Net.Label { Cls = "detail-text" };
            lblPutup.Text = "Y";
            if (lblPutup.Text.Trim().CompareTo("") == 0)
            {
                lblPutup.Text = "1";
                lblPutup.Hidden = true;
                lblPutup.HideMode = HideMode.Visibility;
            }
            conPutup.Items.Add(lblPutup);
            conRow.Items.Add(conPutup);
    
            Container conMOQ = new Container { ColumnWidth = 0.08, StyleSpec = "text-align: center;" };
            Ext.Net.Label lblMOQ = new Ext.Net.Label { Cls = "detail-text" };
            lblMOQ.Text = "123";
            if (lblMOQ.Text.Trim().CompareTo("") == 0)
            {
                lblMOQ.Text = "1";
                lblMOQ.Hidden = true;
                lblMOQ.HideMode = HideMode.Visibility;
            }
            conMOQ.Items.Add(lblMOQ);
            conRow.Items.Add(conMOQ);
    
            Container conRmk = new Container { ColumnWidth = 0.21, StyleSpec = "text-align: center;" };
            Ext.Net.Label lblRmk = new Ext.Net.Label { Cls = "detail-text" };
            lblRmk.Text = "remark";
            if (lblRmk.Text.Trim().CompareTo("") == 0)
            {
                lblRmk.Text = "1";
                lblRmk.Hidden = true;
                lblRmk.HideMode = HideMode.Visibility;
            }
            conRmk.Items.Add(lblRmk);
            conRow.Items.Add(conRmk);
    
            conDeatail.Items.Add(conRow);
        }
            
    </script>
       
    <!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 id="Head1" runat="server">
        <title>Ext.NET Example</title>
      
        <style type="text/css">
           
            .normal-text-left { font-size: 16px;
                                padding-left: 15px;}
            .detail-text { font-size: 16px;
                           }
    
                                
        </style>
      
       
    </head>
    <body>
        <ext:ResourceManager runat="server" />
                            <ext:Container ID="conDeatail" runat="server" Border="false" Cls="normal-text-left">
                            </ext:Container>
    </body>
    </html>
    This a another result I got in chrome

    Click image for larger version. 

Name:	overlay.png 
Views:	10 
Size:	4.7 KB 
ID:	7346
    Last edited by Daniil; Dec 10, 2013 at 7:34 AM. Reason: [CLOSED]
  2. #2
    Hi @trePjt,

    The text is not wrapped if there is no white spaces. As far as I can know there is no such functionality either in Ext.NET or CSS to split the text without spaces by lines.

    Do you know if there is any solution anywhere?
  3. #3
    I understand what my problem is. Actually this field will not contains a long text with no withe space.
    My testing example not correct. Sorry to border you.
  4. #4
    No problem. So, do you mind we close the thread or need any assistance more?
  5. #5
    You can mark it as closed. Thank you.

Similar Threads

  1. [CLOSED] MVC 4 Razor Table Layout.Table
    By ashleysbuss in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Jun 18, 2013, 11:39 PM
  2. [CLOSED] How to set table layout in MVC panel
    By MTSI in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Mar 05, 2013, 11:18 PM
  3. Create Html Table Dynamically
    By DanielU in forum 1.x Help
    Replies: 2
    Last Post: Dec 15, 2012, 5:15 PM
  4. Table cannot be handled by layout
    By Bubu in forum 2.x Help
    Replies: 9
    Last Post: Nov 27, 2012, 5:33 AM
  5. [CLOSED] Table Layout, 100% width Table
    By sisa in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: May 20, 2011, 7:40 AM

Posting Permissions