How to change the table layout when using datalist. Below is the aspx i am using to populate the data, but i get the result like shown in Example 1. There is not continuation of showing the data due to the table layout ? How can achieve to show the result as shown in example 2 ?
I am in need of using the datalist since I am using repeatcolumn which is not available in repeater.
Aspx :
<asp:DataList ID="dl_Groups" RepeatColumns="2" runat="server"
OnItemDataBound="dl_Groups_ItemDataBound" RepeatDirection="vertical"
ShowFooter="False" ShowHeader="False">
<ItemTemplate>
<asp:CheckBox runat="server" ID="chk_Group" Text='<%# Eval("category_type") %>'
Value='<%# Eval("service_type_category_id") %>' onclick="OnGroupClick" />
<asp:CheckBoxList runat="server" ID="chkServiceType" Style="padding-left: 20px"
DataValueField="ServiceTypeID" DataTextField="Name" EnableViewState="true">
</asp:CheckBoxList>
<br />
</ItemTemplate>
</asp:DataList>
have you gone through these properties of the CheckBoxList
RepeatColumns="2"
RepeatDirection="Vertical"
RepeatLayout="Table"
These may be helpful to you.
You may also take benefit of css
As follows
#chkServiceType tr{
display:inline-block;
margin-right:20px;
}
#chkServiceType tr label{
margin-left:5px;
}
Related
I have problem adding spaces between CheckBoxes and text next to them. I want to have them intended a little bit, not next to each other without some space.
▓car▓wash▓next and have it like ▓ car ▓ wash ▓ next
CheckBoxes aren't fixed at size, they are gathered from database.
I have CheckBoxList like:
<asp:CheckBoxList ID="chBoxListManufacturer" runat="server" BackColor="LightBlue" BorderColor="Red" CellPadding="5" CssClas="mycheckbox"
TextAlign="Right" RepeatDirection="Horizontal" RepeatLayout="Flow" OnSelectedIndexChanged="BoxListManufacturer_OnSelectedIndexChanged" AutoPostBack="True" />
Css:.mycheckbox {margin-right: 15px;}
I was reading docs, but nothing works.
you can try with css class:
your checkboxlist here.
<asp:CheckBoxList ID="CheckBoxList1" runat="server" CssClass="test">
<asp:ListItem Text="Yes" Value="Yes" Selected="True"></asp:ListItem>
<asp:ListItem Text="No" Value="No"></asp:ListItem>
</asp:CheckBoxList>
css here.
.test td
{
border:1px solid red;
margin-right:10px;
padding-right:20px;
}
output.
Maybe a trivial answer: put a after each checkbox, this will allow you some space between the control and the following label
I have a vertical radiobuttonList sitting in a table.
How do I decrease the spacings between each of the listitems so that the total height of radiobuttonList is smaller?
I have tried using padding and margin but none seems to work.
Use CellPadding property of RadioButtonList, you can set 0 for minimum height
<asp:RadioButtonList ID="rdlst" runat="server" CellPadding="15" CellSpacing="0" ><asp:ListItem Value="1" Text="1"></asp:ListItem> <asp:ListItem Value="2" Text="2"></asp:ListItem></asp:RadioButtonList>
you can just add this inside the radiobuttonlist tag:
<asp:RadioButtonList ID="RadioButtonList1" runat="server" Width="300px">
radiobuttonList in a table so try cellspacing="0" cellpadding="0" and padding:0; for td also
Provided this w3schools demo demonstrates accurate markup, it looks like they're built in a table. Try this:
.someClassName td {
padding: 0;
margin: 0;
}
Replacing .someClassName with the CssClass of the RadioButtonList or some other wrapper object.
I changed the radiobuttonlist to use RepeatLayout="Flow" instead of RepeatLayout="Table"
eg:
<asp:RadioButtonList ID="radOrderBy" runat="server" AutoPostBack="True" RepeatLayout="Flow" >
<asp:ListItem Value="NAME" Text="Name" Selected="True" />
<asp:ListItem Value="NUMBER" Text="Number" />
</asp:RadioButtonList>
I have a Gridview contain many TemplateField.
I want make every <td> in my html source equal the color saved in my database
I try code Located below but not working it's give me a <span> tag inside <td> with my color but But do not appear on the browser
<asp:TemplateField HeaderText="BackGround Color">
<ItemTemplate>
<asp:Label ID="lblBackColor" runat="server"
BackColor='<%# ConvertFromHexToColor( Eval("BackColor").ToString()) %>'>
</asp:Label>
<itemstyle width="20%" horizontalalign="Center" />
</ItemTemplate>
</asp:TemplateField>
C# code working
public Color ConvertFromHexToColor(string hex)
{
string colorcode = hex;
int argb = Int32.Parse(colorcode.Replace("#", ""), NumberStyles.HexNumber);
Color clr = Color.FromArgb(argb);
return clr;
}
And this is the source html and css code in my browser
<td>
<span id="BodyZone__ThemesGrid_lblForeColor_0" style="background-color: #FFFFFF;"></span>
<itemstyle width="20%" horizontalalign="Center">
</itemstyle>
</td>
CSS
table.activity_datatable td {
padding: 8px 15px;
color: #6c6c6c;
vertical-align: middle;
-webkit-transition: all 0.2s;
}
If you want to check with a boolean value if it is true then Green colour else Red colour will effect. Then displaying text with the respective colour according to the Eval function. Here GetStatus is a method you need to create it in code behind with its we are binding the text to UI, or else you can bind with Eval or Bind function as usual.
ForeColor='<%# (bool)Eval("UserType")==true?System.Drawing.Color.Green:System.Drawing.Color.Red %>'
Text='<%# GetStatus((bool)Eval("UserType")) %>'>
You need to place text inside of your Label (which renders to a span)
<asp:TemplateField HeaderText="BackGround Color">
<ItemTemplate>
<asp:Label ID="lblBackColor" runat="server" BackColor='<%# ConvertFromHexToColor( Eval("BackColor").ToString()) %>'>PUT_TEXT_HERE</asp:Label>
<itemstyle width="20%" horizontalalign="Center" />
</ItemTemplate>
</asp:TemplateField>
You may also prefer using a Panel (which renders to a div) rather than a Label. Don't forget to put stuff inside of the div or span.
ForeColor='<%# Convert.ToString(Eval("ESM")) == "Elective" ? System.Drawing.Color.Green:
Convert.ToString(Eval("ESM")) == "Emergency" ? System.Drawing.Color.Red: System.Drawing.Color.Purple%>'
Try this code..........
I can't get my paging buttons: "<< < > >>" to align right.
Here is my GridView:
<asp:GridView ID="GridView1" ShowHeader="false" AllowPaging="true" PageSize="2"
AutoGenerateColumns="false" Width="100%" runat="server">
<Columns>
<asp:TemplateField>
<ItemTemplate>
foo
</ItemTemplate>
<ItemStyle CssClass="blah" />
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
bar
</ItemTemplate>
<ItemStyle CssClass="pluh" />
</asp:TemplateField>
</Columns>
<PagerStyle CssClass="gridpager" HorizontalAlign="Right" />
<PagerSettings Mode="NextPreviousFirstLast" FirstPageText="<<" PreviousPageText="<"
NextPageText=">" LastPageText=" >>" Position="Bottom" />
</asp:GridView>
And the CSS style:
.gridpager, .gridpager td
{
padding-left: 5px;
text-align: right;
}
If I remove the PageStyle CssClass and use HorizontalAlign="Right" on PagerSettings it works, but then I don't get the padding I need. And specifying both a CssClass and HorizontalAlign like my sample doesn't work.
What do I need to do?
Thank you!
It looks because of the horrible markup Web Forms outputs. The pager is created as a table within a td. I can get it working with this CSS:
.gridpager table {
float: right;
}
Edit: glad you got it figured out. I didn't know if you wanted to do it with pure CSS. I also don't like the float method much.
Edit 2: Looks like the rendered grid uses the align attribute in the td used for the pager when you use <PagerStyle HorizontalAlign="Right" />
Well, I feel kind of silly, but turns out I just needed to remove "text-align: right" from my style. Thanks for reading!
You can do simply a css trick:
.gridpager td table{
margin-right:20px;
}
This should solve the issue.
I have a Repeater control used to display uploaded images.
How can I show the images in the repeater horizontally? How can i give the caption to the bottom of picture in this?
assuming you have some code like this:
<asp:repeater ...>
</asp:repeater>
just inject "<itemtemplate>" with some html code with the look and feel you want to. nothing special about showing horizontal or vertical it just depends on what html tags you use inside item templates.
If you don't especially need a Repeater to do this, you can use a DataList instead and set the RepeatDirection="Horizontal"
how to display horizontal line after each row
<asp:DataList ID="dlstmovie" runat="server" onitemcommand="dlstmovie_ItemCommand" RepeatColumns="5" ItemStyle-CssClass="item1" RepeatDirection="Horizontal" onitemdatabound="dlstmovie_ItemDataBound" >
<ItemTemplate>
<asp:LinkButton ID="lnkimg" runat="server" CommandName="m1" CommandArgument='<%# DataBinder.Eval(Container.DataItem,"cinemaid")%>'>
<img src='<%=cinemaposter %><%#Eval("picturenm")%>' class="img" />
</asp:LinkButton>
<br />
<asp:LinkButton ID="lnkmovie" runat="server" CommandName="m1" CommandArgument='<%# DataBinder.Eval(Container.DataItem,"cinemaid")%>' Text='<%#(Eval("cinemanm").ToString().Length>10)?(Eval("cinemanm").ToString().Substring(0,10))+"":Eval("cinemanm").ToString()%>' CssClass="blacktext"></asp:LinkButton>
<asp:LinkButton ID="LinkButton1" runat="server" CommandName="m1" CommandArgument ='<%#DataBinder.Eval(Container.DataItem,"cinemaid")%>' Font-Underline="false" CssClass="blacktext">...</asp:LinkButton>
</ItemTemplate>
<FooterTemplate>
<asp:Label ID="lblEmptyData" Text="No Data To Display" runat="server" Visible="false" CssClass="blacktext">
</asp:Label>
</FooterTemplate>
</asp:DataList>
You can build your ItemTemplate like:
<ItemTemplate>
<div class="floating">
<img src='<%# /* Code to Eval your image src from datasource */ %>' alt='' />
<span><%# /* Code to Eval your image caption from datasource */ %></span>
</div>
</ItemTemplate>
where the .floating class of the div is:
.floating { float:left; overflow:hidden; }
.floating img { display: block; }
I usually put a div for clear after a sequence of floating element, to reset the state of box model.
<div style="clear:both;"></div>
Depends on what you are using to display, i.e. if your pictures are in a div put float:left; on it, or use the DataList.
Like #numenor said in this other answer, it's just a matter of what html you use. Here, an example of how to acomplish what you need using html tables.
<table width="<%= this.TotalWidth %>">
<tr>
<asp:Repeater runat="server" ID="rptABC" OnItemDataBound="rptABC_ItemDataBound">
<ItemTemplate>
<td class="itemWidth">
Your item goes here and will be
displayed horizontally as a column.
</td>
</ItemTemplate>
</asp:Repeater>
</tr>
</table>
Note that the width is handled with a server side property TotalWidth that calculates the total width needed based on, of course, the count of items repeater will display. Creating a CSS class to define the width of each item is also recomended to ensure proper layout.
protected string TotalWidth
{
get
{
//In this example this.Madibu.Materiales is the datasource for the Repeater,
//so this.Madibu.Materiales.Count is the column count for your table.
//75 must be equal to the width defined in CSS class 'itemWidth'
return (this.Madibu.Materiales.Count * 75).ToString() + "px";
}
}