How to dynamically set the column width of a table in a datalist?

[ChPravin]

Hello All,

I just wanted to know if there is any way to dynamically set the width of a column inside a table within a datalist based on the length of the text fetched from the database.I am inserting my code.In the code below I want the width of collapsible panel to be dynamically set based on the length of the address and interest fields.Please give some suggestions.

<asp:Datalist ID="Datalist_PersonnelData" runat="server" Width="60%" >
    <HeaderTemplate>
    <table border="0" cellpadding="0" cellspacing="0" width="1600">
<tr>
<td width="400">Full Name</td>
<td width="400">Phone</td>
<td width="400">Email</td>

</tr>
</table>
   
    </HeaderTemplate>
    
    <ItemTemplate>
    
    <table border="0" cellpadding="0" cellspacing="0" width="1600">
<tr>
 <td width="400">
  <asp:Panel ID="Panel2" runat="server">
    <asp:Image ID="Image1" runat="server" ImageUrl="~/images/plus.jpg" ></asp:Image>
       
    <%#Eval("Full Name").ToString()%>
    </asp:Panel> 
  
   
 </td>
 <td width="400">
    <%#Eval("Phone").ToString()%> 
    </td>
 <td width="400">
    <%#Eval("Email").ToString()%>
    </td>
        </tr>
       
        
        <tr>
//I want to set this width dynamically based on the length of text fetched from the //database
        <td width="400">
        <asp:CollapsiblePanelExtender ID="CollapsibleControl_Name" ExpandControlID="Panel2" runat="server" ImageControlID="Image1" ExpandedImage="~/images/minus.jpg" CollapsedImage="~/images/plus.jpg" ExpandDirection="Vertical" CollapseControlID="Panel2" Collapsed="true" EnableViewState="false" TargetControlID="Panel1"></asp:CollapsiblePanelExtender>
         
       <asp:Panel ID="Panel1" runat="server" BorderStyle="Inset">
         <strong>Address:</strong>
          <asp:Label ID="Label_Address" runat="server"  Text='<%#Eval("Address").ToString()%>'></asp:Label>
     <br />
     <br />
     <strong>Interests:</strong>
     <asp:Label ID="Label_Interests" runat="server"  Text='<%#Eval("Interests").ToString()%>'></asp:Label>
     <br />
     <br />
     <asp:HyperLink ID="HyperLink_FullDetails" runat="server" Text="Full Details" NavigateUrl="http://www.pqr.com/"></asp:HyperLink>
    </asp:Panel>
       </td>
       
    
   </tr>

    </table>
    
    </ItemTemplate>
    
    </asp:Datalist>

[Lusiphur]

I'm not at all sure if it works or not because I've never needed just one variable width colum in a table...

But from looking around I'm seeing the possibility of using:

<td style="width: auto">

Alternately, if you know the pixel value for the width of a standard character in the size you are using...

<td id="tdVariable" runat="server">

With the following code-behind.

int charWidth = 20;
    int addrWidth = Label_Address.Text.Length;
    int intWidth = Label_Interests.Text.Length;
    if (addrWidth > intWidth)
    {
        tdVariable.Width = charWidth*addrWidth;
    }
    else
    {
        tdVariable.Width = charWidth*intWidth;
    }

This should produce a table column of the appropriate width to support the contents depending which of the above returned variables is longer.

I don't know if this is what you're looking for but I hope it helps :) Mark as solved if it clears up your problem.

[gaurang4]

Hi,

Actually I am php developer so can't provide you the code in dot net but general idea is to use the percentage in width field.

Try to use the percentage in width attribute as below :

<table width ="100%">

<tr><td width="25%>...</td></tr>
<tr><td width="25%>...</td></tr>
<tr><td width="25%>...</td></tr>
<tr><td width="25%>...</td></tr>

</table>

I hope this would help.. :)

[Lusiphur]

Hi,

Actually I am php developer so can't provide you the code in dot net but general idea is to use the percentage in width field.

Try to use the percentage in width attribute as below :

<table width ="100%">

<tr><td width="25%>...</td></tr>
<tr><td width="25%>...</td></tr>
<tr><td width="25%>...</td></tr>
<tr><td width="25%>...</td></tr>

</table>

I hope this would help.. :)

While I generally use percentage widths in my content I am curious however... how does this work towards the requirement of one column needing to be variable in width to accomodate changing lengths of input compared to the other columns being relatively static in width?

Not trying to shoot down your answer but just curious because if your solution works with less effort than mine then he should definitely go that way :)

[tz2010]

Thanks for the information, I appreciate it.