PDA

View Full Version : [CLOSED] Column layout to build a table dynamically



trePjt
Dec 09, 2013, 6:44 AM
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

7346

Daniil
Dec 09, 2013, 3:02 PM
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?

trePjt
Dec 10, 2013, 1:06 AM
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.

Daniil
Dec 10, 2013, 4:13 AM
No problem. So, do you mind we close the thread or need any assistance more?

trePjt
Dec 10, 2013, 7:15 AM
You can mark it as closed. Thank you.