Dec 09, 2013, 5:44 AM
[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?
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
Last edited by Daniil; Dec 10, 2013 at 6:34 AM.
Reason: [CLOSED]