I have an ASP.Net GridView with properties like so:
<asp:GridView ID="grdOrderEntry" runat="server" AutoGenerateColumns="false" ShowFooter="True"
DataKeyNames="oid" Height="100%">
When I view the control in the browser, there is a lot of white space after the control. When viewing the HTML, the div that is produced by the GridView is much larger than the control, causing the whitespace. Is there a property I can set on the GridView to make the div as small as possible?
If you set the CssClass property you will be able to create some css to address the problem. I would recommend using a live css editor so you can mess around with it until you get the desired effect.
I suspect this is being caused by your Height="100%" attribute, remove that, and it should just stretch around the table it contains (unless there is some css other style added to it as well).
Related
I have inherited an .ascx control that consists of an asp:repeater construct containing a HeaderTemplate, an ItemTemplate and an empty FooterTemplate.
Both the header and the item templates are linked to a data source.
My question is simply this, I want to have a vertical slider applied to the ItemTemplate such that I can scroll up and down the items contained within whilst the HeaderTemplate remains static.
I have tried using an asp:Panel within the ItemTemplate but this doesn't render the row within the template.
I've resorted to encapsulating the whole of the asp:Repeater within an asp:Panel that specifies a vertical scrollbar. This works but scrolls the header out of view if the number of rows in the ItemTemplate is large.
If anyone can help and suggest a way forward I would be most grateful.
It can be done in a simple manner with some CSS tricks e.g.
Repeater Item Template Markup
<HeaderTemplate>
<div class="template">
</HeaderTemplate>
<ItemTemplate>
Your Stuff
</ItemTemplate>
<FooterTemplate>
</div>
</FooterTemplate>
CSS Defined for "template"
.template {
height: 200px;
overflow-y: scroll;
}
Hope this will help !!
I have a validator that has the associated error text set as below.
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" ValidationGroup="1" ControlToValidate="EmailTB"
Text="<div class='error-left'></div><div class='error-inner'>required</div>"
Display="Static" Width="100%" runat="server" SetFocusOnError="true" />
I put this validator on the third td of a tr. Th first two td are the name of the field and a textbox. The problem is that even if the error text is not shown, it seams to dstort the whole table layout by having width and height. I understand that ASP>NET uses javascript to make the text inside visible when the error text should be shown, but I don't like the fact that the layout is distorted by the height of a label which should not be activated. Look in the photo bellow:
Observations:
- This is the only validator in the form, this is why the tr for the email is so high (as the error-left class has this height)
Change the Display property to Dynamic - which will have the style set to "display: none;" until it's triggered.
Instead of including code even when there is no error, make it include code only if there is an error.
Is the only way to change the background color of a row based on data on the Telerik grid by doing it in the ItemDataBound event? I have a grid that a huge amount of data and it is taking a really long time. I have a property in the data row that tells me what color the row needs to be. I would like to be able to dynamically set the css class at runtime.
Thanks,
Rhonda
You should be able to change the row color using ItemStyle and AlternatingItemStyle:
<MasterTableView AutoGenerateColumns="false" ShowFooter="true">
<ItemStyle BackColor="PeachPuff" />
If you are looking to specifically change the style of the row during the OnItemDataBound event I recommend that you look at this documentation article from the Telerik online documentation. It covers how you can set inline styles from the code-behind, or use predefined CSS styles and apply them to the rows.
This is a simple one but it is defeating me.
Ok, I have a gridview, lovely stuff. I have attempted to set the height of the headers so that the height is maintained regaardless of the content of the gridview.
However, if a data row requires a bit more height itself (to include the data), the height of the heading also increases.
How do I go about ensuring the height of the header is maintained but not at the expense of the data rows themselves?
GridView provides interesting styling features using asp.net tags in grid view, If you want to style height of a header, you can do something like this:
<asp:GridView id='grd' runat='server'>
<HeaderStyle Height="30px"/>
</asp:GridView>
or in headerStyle you can also use CssClass where you can assign the css style class specified.
Hope this helps
I found the reason behind my mysterious expanding rows!!
Bascially, I had set the height of my gridview. When the gridview was full with data and resulted in paging, the heading remained as it should. However, the rows expanded when this gridview was below it's quota of data - essentially .net was being clever and trying to fill the space I had created by setting the height by expanding what it could.
All I did was to remove the height of my gridview and it worked a treat.
Thanks for all the pointers though : )
You can use styles to set almost all presentation attributes. Try out using a css or add style attributes.
I am using Vb.net for coding. I have a grid view control in which i want to introduce a vertical scroll bar if the value from the sql query overflows. How do I go about it?
You could place the gridview in a div with the following style:
overflow: auto; height: 80px;.
The following markup should do this. You'll need to change the height as required.
<div style="overflow-y:auto; height:200px">
<asp:GridView ID="GridView1" runat="server" >
</asp:GridView>
</div>