I have a RadGrid with attribute RenderMode set to Mobile.
It works just fine and you can scroll vertically fine if I add "rough" data into the ItemTemplate e.g.
<ItemTemplate>
<%# Eval("SomeData") %>
</ItemTemplate>
However, if I add some extra tags around the data e.g.
<ItemTemplate>
<div class="text-center">
<%# Eval("SomeData") %>
</div>
</ItemTemplate>
I can't scroll the data any longer as it behaves like I am dragging the whole control.
It also works fine if you use GridBoundColumn instead meaning, only when you add containers into the template column it stops scrolling on mobile devices. On desktops still works perfectly fine. Thank you
NOTE: I've checked and this question is not already answered. Thx
To further iterate on my comment, this is how I've dealt with templatecolumns and it's been very successful.
<telerik:GridTemplateColumn HeaderText="ID" AllowFiltering="True" runat="server" HeaderStyle-Width="2%"
HeaderButtonType="TextButton" CurrentFilterFunction="EqualTo" AutoPostBackOnFilter="True" ShowFilterIcon="False"
FilterControlWidth="100%" UniqueName="IDX_Actual" DataField="IDX_Actual" SortExpression="IDX_Actual"
GroupByExpression="IDX ID Group By ID">
<ItemTemplate>
<telerik:RadLabel ID="RlblIDX" runat="server" Text='<%# Bind("IDX_Actual") %>' UniqueName="RlblIDX" />
</ItemTemplate>
<ItemStyle HorizontalAlign="Center" />
<HeaderStyle HorizontalAlign="Center" />
</telerik:GridTemplateColumn>
The label will then use the ItemStyle to align the text to the center of it's assigned width.
It's also inside a telerik-control, which by itself gives you further functionality that might (or might not) be nice to have later on.
Furthermore you would be able to set any specific styling-choices with the radlabel's CSSclass
Happy coding! :)
Related
I use spaces to align labels but it didnt work properly.
I also put all labels into panels to align it horizontally.
my code look like this
<asp:Panel ID="Panel4" runat="server">
<asp:Label ID="Label4" runat="server" Text="Last Name"></asp:Label>
<asp:Label ID="Label6" runat="server" Text="First Name"></asp:Label>
<asp:Label ID="Label5" runat="server" Text="Middle Name"></asp:Label>
<asp:Label ID="Label14" runat="server" Text="Tuition"></asp:Label>
<asp:Label ID="lblTuition" runat="server" BorderWidth="1px" Width="75px"></asp:Label>
</asp:Panel>
Bro take a look and have a deeper understandin at this one because what others said it is hard to align in ASP.Net so I added a tag HTML in your code.
Here it is
Align controls properly
You can set the width on your control using the Width property (e.g. Width="150" for a 150-pixel-wide control), which in turn will create the corresponding inline CSS. This is the quick fix version.
If you want a more long-term approach, consider learning HTML5 and CSS. Here's a site that will give you the basics.
http://howtocodeinhtml.com/
I am new to asp.net. I have a problem with the asp:datagrid.
The grid comes with the Paging Footer PagerStyle always at the bottom of the grid. I would like the PagerStyle to be fixed at the footer of the asp:datagrid.
My Current code
<asp:datagrid id="grdPageTemplate">
<!-- Code to make the columns of my grid-->
<PagerStyle HorizontalAlign="Right" Mode="NumericPages" Position="Bottom" CssClass="footer"></PagerStyle>
I have tried to make a CSS class to do so but it does not work that way. Please help me out.
The CSS class I am using
footer{background-color:#C0C0C0;position:fixed;height:100px;width: 100%;top:100%;margin-top: -100px;}
#vaibhav.pnd kindly post your full asp:datagrid code.
Mean while, For only pager, use the below attributes along with your code.
<asp:datagrid ID="grdPageTemplate" runat="server" Width="100%" ShowFooter="False" AllowPaging="True" PageSize="10">
<!-- Code to make the columns of my grid-->
<PagerSettings Position="Bottom" Mode="NumericFirstLast" />
</asp:datagrid>
above is the attached image of checkbox rendering in internet explorer 8.
the code used is <asp:CheckBox runat="server" ID="selectCheckBox" />
while it renders perfectly in Firefox and in chrome the checkbox cannot be checked, any help would be better solving this rendering problem in different browsers.
thanks.
You did not define Text of checkbox.
<asp:CheckBox ID="selectCheckBox" runat="server" Text="Label" Checked="False" OnCheckedChanged="selectCheckBoxChanged" />
<asp:DataList ID="ItemsList" RepeatDirection="Vertical" runat="server">
<ItemTemplate>
<asp:LinkButton
ID="SecondLevelItem" runat="server" CommandName="second"
OnCommand="SecondLevelItem_Onclick" CommandArgument="<%# Container.DataItem %>"
Text="<%# Container.DataItem %>" >
</asp:LinkButton>
</ItemTemplate>
</asp:DataList>
everything works fine. except that I do not have any control over the styling on the items. I mean I have the styling on the datalist externally but I want to add some spacing (vertically) between each item. How do I do tht? Thanks
In general, to control style, you can apply the <ItemStyle> tag inside the <asp:DataList>.
You can optionally inject CSS properties into the asp:LinkButton tag, either with the class attribute or directly with style, controlling the height or other CSS properties.
If it's applicable, you can still add a on the bottom of the template (but this will add a vertical space to the last item too, and I don't know if you want it).
Hope to have been of help.
In the code behind databound method for the list, you may be able to add a css class via the attributes collection.
In fact you may be able to that declartively too, just checking now...
eg asp:DataList id="blah" runat="server" ItemStyle-CssClass="someClass"
I have a GridView control (which renders to table, tr, td) with some BoundFields and TemplateFields. Essentially, I am displaying two columns, Application Name and Notes (as a TextBox), and I want 35%, 65% relative widths. Here is my asp.net markup:
<asp:GridView ID="gridRequestedApps" DataSourceID="llbRequestedApplications" runat="server"
AutoGenerateColumns="False"
DataKeyNames="ComputerID, RequestID"
EnableViewState="False"
cssclass="xGridview">
<Columns>
<asp:BoundField DataField="ComputerID" HeaderText="ID" SortExpression="ComputerID" Visible="False" />
<asp:BoundField DataField="RequestID" HeaderText="ID" SortExpression="RequestID" Visible="False" />
<asp:TemplateField HeaderText="Application Name" ItemStyle-Width="35%" ItemStyle-Wrap="false">
<ItemTemplate><asp:TextBox ID="ApplicationName" runat="server" Text='<%# Bind("ApplicationName") %>' CssClass="input_text"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Notes" ItemStyle-Width="65%">
<ItemTemplate>
<div style="width:100%; overflow:hidden">
<asp:TextBox ID="UserNotes" runat="server" Text='<%# Bind("UserNotes") %>' CssClass="input_text" style="overflow:hidden"></asp:TextBox>
</div>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
Now at one point (with slightly different html than shown above), I did have the 35/65 relative widths working. However, I then noticed that if I put long text into the textbox, it was growing horizontally stretching its containing table past 100% width. (This is in IE7....in Firefox, the overflow:hidden seemed to be working).
So, I started messing with the CSS to try to fix the bug in IE, but now, not only does it still overflow, but my column widths are no longer respecting the 36/65 settings.
Before jQuery, try this first. I found it by googling "ie overflow:hidden table cell".
How to prevent HTML tables from becoming too wide
Using Javascript for styles usually isn't a good idea, especially if later on in the product's life another developer comes along and wants to, say, add a column. Agreed, sometimes hacking a solution together feels nicer in the short term, but it can only lead to headaches in the future.
just solved myself this problem, and I fell just...
Change document type definition to
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
but care that other parts of the page don't start jumping around.