CODEWITHSUNDEEP
c#asp.netcssgridviewdynamic-data
devan
devan

Reputation: 1653

ASP Grid View, predifine the row height size

I have a Asp Gridview with two dynamic columns. One column will display set of characters (description) and other column is for displaying Image. I just want to limit this description Grid row height. 

<div>
    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSource1" EnableModelValidation="True"
                  AllowPaging="True" GridLines="None" onselectedindexchanged="GridView1_SelectedIndexChanged">
        <Columns>
            <asp:TemplateField>
                <ItemTemplate>
                    <asp:Label ID="Label_dynamicDes" runat="server" Text='<%#Bind("description") %>'></asp:Label> <br/>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:ImageField DataImageUrlField="picpath" ControlStyle-Width='200px'>
                <ControlStyle Width="200px"></ControlStyle>
            </asp:ImageField>
        </Columns>
    </asp:GridView>

    <asp:SqlDataSource ID="SqlDataSource_dynamic" runat="server">
    </asp:SqlDataSource>

</div>

How can I control the Height of GridView row size? I can not do it in Code behind. Please help me with some css function to predefine the size of dynamic row?

Upvotes: 0

Views: 7239

Answers (3)

Anwar370
Anwar370

Reputation: 1

<asp:GridView ID="GridView1" CssClass="table table-striped table-bordered table-hover" runat="server" AutoGenerateColumns="False" OnRowDeleting="GridView1_RowDeleting" OnRowDataBound="GridView1_RowDataBound" ShowHeaderWhenEmpty="true" Height="40px">

Upvotes: 0

codingbiz
codingbiz

Reputation: 26386

I assume you don't want the height of the row to be greater than the height of the image (assuming 90px). You could put a div with fixed height in the TemplateField and set the height

   <asp:TemplateField>
    <ItemTemplate>

       <div style="height:90px; overflow:auto">
        <asp:Label ID="Label_dynamicDes" runat="server" Text='<%#Bind("description") %>'></asp:Label>
       </div>

    </ItemTemplate>
   </asp:TemplateField>

When the description is more than the height, the div will have a scrollbar because of overflow:auto. You can also have overflow:scroll

Upvotes: 1

nick_w
nick_w

Reputation: 14938

You can set RowStyle and AlternatingRowStyle from either code behind or in the markup. See MSDN for more details.

Edit:

You can either set the RowStyle-CssClass in the markup like this:

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
DataSourceID="SqlDataSource1" EnableModelValidation="True"
AllowPaging="True" GridLines="None" onselectedindexchanged="GridView1_SelectedIndexChanged"
RowStyle-CssClass="my-table-row-style">

Set it in the code behind like this:

GridView1.RowStyle.CssClass = "my-table-row-style";

Or just do it purely with CSS like this:

#GridView1 td
{
    height: 90px;
}

Upvotes: 3

Related Questions