How to format the RadComboBox properly - c#

I am trying to make an arrow show to the left of the text, but I cant figure out how to format it to make it work.
And my mark up for the rad box is as follows:
<telerik:RadComboBox ID="optionsp" runat="server" HighlightTemplatedItem="true">
<ItemTemplate>
<img src="../../../Themes/Images/icons/myimage.gif" />
<div style="text-align: left; padding-left: 5px">
<asp:Label runat="server" ID="Label1" Text='<%# Eval("Name") %>' >
</asp:Label>
</div>
</ItemTemplate>
</telerik:RadComboBox>

Try with this (added float: left for img and div.
<telerik:RadComboBox ID="optionsp" runat="server" HighlightTemplatedItem="true">
<ItemTemplate>
<img src="../../../Themes/Images/icons/arrow2.gif" style="float: left" />
<div style="text-align: left; padding-left: 5px; float: left">
<asp:Label runat="server" ID="Label1" Text='<%# Eval("Name") %>' >
</asp:Label>
</div>
</ItemTemplate>
</telerik:RadComboBox>
As a side note, avoid inline style definitions as much as possible, you should move them to a css file.

Related

Update panel refreshing the entire page instead of just partial

I did what i normally do whenever i want a partial refresh of a page, but in this case it doesnt work out. There maybe an excessive usage of update panels but it should still work.... Can anyone tell me why?
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div style="width: 15%; float: left;">
<asp:Image ID="Image1" runat="server" ImageUrl="~/Img/Untitled1.png" CssClass="imagez" />
</div>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<div style="width: 85%; float: left; height: 100%; padding-top: 2%;">
<asp:Label ID="Label2" runat="server" Text="CPU" CssClass="auto-style7" Font-Names="sans-serif"></asp:Label>
<br />
<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" CssClass="bla" Font-Names="sans-serif" AppendDataBoundItems="true" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
<asp:ListItem Selected="True">Pick a CPU</asp:ListItem>
<asp:ListItem Text="a" Value="a"></asp:ListItem>
</asp:DropDownList>
<strong>
<asp:Label ID="Label3" runat="server" Text="$" CssClass="auto-style8" Font-Names="sans-serif"></asp:Label>
<asp:Label ID="Label4" runat="server" Text="0.00" CssClass="auto-style8" Font-Names="sans-serif"></asp:Label>
</strong>
</div>
</ContentTemplate>
</asp:UpdatePanel>

Bind repeater contents vertically on UI

I have asp.net repeater(data control) and currently it looks on UI like this
The id of the repeaters are row wise , I want to bind it vertically with same look , My current code for repeater is follows
<table><tr><td>
<asp:Repeater ID="rptOptions" runat="server" OnItemDataBound="rptOptions_ItemDataBound">
<ItemTemplate>
<asp:TextBox ID="txtLetter" runat="server" MaxLength="40" BorderColor="Black" BorderStyle="Solid" onkeydown="navigate(event);" BorderWidth="1px" Height="25px" Style="margin-left: 110px; display: inline; margin-top: 16px;" Visible="true" Width="200px" Enabled="false" oncopy="return(false);" oncut="return(false);" onpaste="return(false);" autocomplete="off" AutoCompleteType="None" >
</asp:TextBox>
</ItemTemplate>
</asp:Repeater>
</td></tr></table>
<asp:Repeater ID="rptOptions" runat="server">
<HeaderTemplate>
<table style="width: 50%">
<tr>
<td>
</HeaderTemplate>
<ItemTemplate>
<asp:TextBox ID="txtLetter" runat="server" MaxLength="40" BorderColor="Black" BorderStyle="Solid"
onkeydown="navigate(event);" BorderWidth="1px" Height="25px" Style="margin-left: 110px;
display: inline; margin-top: 16px;" Visible="true" Width="200px" Enabled="false"
oncopy="return(false);" oncut="return(false);" onpaste="return(false);" autocomplete="off"
AutoCompleteType="None">
</asp:TextBox>
</ItemTemplate>
<FooterTemplate>
</td> </tr> </table>
</FooterTemplate>
</asp:Repeater>

HoverMenuExtender only works after postback in gridview

HoverMenuExtender only works after postback in gridview. Weird behavior.
<asp:TemplateField>
<HeaderStyle CssClass="CenterAligner" />
<ItemTemplate>
<asp:Image ID="imgNotes" runat="server" ImageUrl="Images/information.png" Style="position: relative" />
<asp:Panel ID="pnlNotes" runat="server" BackColor="GhostWhite" BorderColor="Black" BorderStyle="Solid" BorderWidth="1" Width="500px" Visible="true">
<div style="position: relative">
<div style="padding: 10px; margin: 10px; text-align: justify">
<asp:Label ID="lblCreditInfo" runat="server" Font-Size="9pt" ForeColor="Black"></asp:Label>
<asp:Label ID="lblCreditWebSite" runat="server" Font-Size="9pt" Text='<%# Bind("CreditWebSite") %>' Visible="false"></asp:Label>
<asp:Label ID="lblCreditUserName" runat="server" Font-Size="9pt" Text='<%# Bind("CreditUserName") %>' Visible="false"></asp:Label>
<asp:Label ID="lblCreditPassword" runat="server" Font-Size="9pt" Text='<%# Bind("CreditPassword") %>' Visible="false"></asp:Label>
</div>
<br />
</div>
</asp:Panel>
<ajaxToolkit:HoverMenuExtender ID="hmeNotes" runat="server" PopupControlID="pnlNotes" PopupPosition="left" TargetControlID="imgNotes">
</ajaxToolkit:HoverMenuExtender>
</ItemTemplate>
<ItemStyle HorizontalAlign="center" />
<HeaderStyle HorizontalAlign="Left" />
</asp:TemplateField>
Before Postback After Postback
I was missing the panel for the balloon extender that was also on the page.

Update Panel Posting back with Listview

I have an update panel inside of an accordian control, two things should cause an async postback:
1) When I click the Image button
2) I click the paging.
Both things work fine, but always cause a full postback.
<asp:UpdatePanel ID="updListView" runat="server" ChildrenAsTriggers="True">
<ContentTemplate>
<asp:ListView ID="dlNewLeads" runat="server" DataSourceID="sdsLeads" OnItemCommand="dlNewLeads_OnItemCommand">
<ItemTemplate>
<table style="width: 642px;">
<tr>
<td style="width: 421px;">
<asp:Label ID="lblTitle" runat="server" Text="Name" class="repeater-title"></asp:Label><br/>
</td>
<td style="width: 421px;">
<asp:Label ID="Label3" runat="server" Text="Phone" class="repeater-title"></asp:Label><br/>
</td>
<td style="width: 421px;">
<asp:Label ID="Label1" runat="server" Text="Time of Lead" class="repeater-title"></asp:Label><br/>
</td>
</tr>
<tr>
<td style="width: 421px;">
<asp:linkbutton ClientIDMode="AutoID" ID="btnRem" CommandName="SetAsContacted" runat="server" causesvalidation="false" commandargument='<%# Eval("Id") %>'>
<asp:image id="Image2" runat="server" imageurl="~/Images/x.jpg"/>
</asp:linkbutton> <asp:HyperLink Text='<%# Eval("FullName") %>' NavigateUrl='<%# GetLink(Eval("ID").ToString()) %>' runat="server"></asp:HyperLink>
</td>
<td style="width: 421px;">
<asp:Label ID="Label4" runat="server" Text='<%# Eval("Phone") %>' class="repeater-text"></asp:Label>
</td>
<td style="width: 421px;"><asp:Label ID="Label2" runat="server" Text='<%# Eval("TimeOfLead") %>' class="repeater-text"></asp:Label>
<td style="max-width: 76px; min-width: 76px;">
</td><br/>
</td>
</tr>
</table>
<div style="background-color: #dae5e7; height: 1px; width: 590px;"></div>
<br/>
</ItemTemplate>
</asp:ListView>
<asp:DataPager ID="DataPager1" runat="server" PagedControlID="dlNewLeads" PageSize="5">
<Fields>
<asp:NextPreviousPagerField ButtonType="Button" ShowFirstPageButton="True" ShowLastPageButton="True"/>
</Fields>
</asp:DataPager>
</ContentTemplate>
</asp:UpdatePanel>
I'm binding the ListView with a SqlDataSource
<asp:SqlDataSource ID="sdsLeads" runat="server" ConnectionString="<%$ ConnectionStrings:SjkConnectionString %>" SelectCommand="SELECT [Id], [FullName], [TimeOfLead], [Phone] FROM [RequestContacts] WHERE (([IsAnswered] = #IsAnswered) AND ([Id] = #Id))">
<SelectParameters>
<asp:Parameter DefaultValue="False" Name="IsAnswered" Type="Boolean" />
<asp:Parameter DefaultValue="0" Name="Id" Type="Int32" />
</SelectParameters>
</asp:SqlDataSource>
Then on Form Page Load
If(!IsPostBack)
sdsLeads.SelectParameters["Id"].DefaultValue = locationId.ToString();
Come to find out, something in my web.config file causing it. I don't know which line exactly so I can't offer a solution to anyone.
I replaced my web.config file which I changed last night with my backup and it worked right away.

Div positioning within a webpage

Edit:
Current layout:
Im trying to work out how within my ASP webpage design I can posistion a div (server side) under another div.
To my question further I'll use the following screenshots:
Currently this is my layout:
I want to position 2 more div one under another to give me a 'title' div and a 'description' div tat will later be populated by my database results, as shown:
This is my current source code. Can someone push me in the right direction of how i go about implementing these divs one of top of another like this?
<%# Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Show.aspx.cs" Inherits="ViewCDs.Show" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<div style=" float:left;">
<asp:Image ID="Image1" runat="server" Height="145px" ViewStateMode="Enabled"
Width="185px" />
</div>
<div style=" float:left; width: 395px; height: 140px;">
<asp:FormView ID="FormView1" runat="server">
<EditItemTemplate>
coffeeName:
<asp:TextBox ID="coffeeNameTextBox" runat="server"
Text='<%# Bind("coffeeName") %>' />
<br />
coffeeOrigin:
<asp:TextBox ID="coffeeOriginTextBox" runat="server"
Text='<%# Bind("coffeeOrigin") %>' />
<br />
coffeeStrength:
<asp:TextBox ID="coffeeStrengthTextBox" runat="server"
Text='<%# Bind("coffeeStrength") %>' />
<br />
coffeeGrind:
<asp:TextBox ID="coffeeGrindTextBox" runat="server"
Text='<%# Bind("coffeeGrind") %>' />
<br />
coffeePrice:
<asp:TextBox ID="coffeePriceTextBox" runat="server"
Text='<%# Bind("coffeePrice") %>' />
<br />
coffeeQty:
<asp:TextBox ID="coffeeQtyTextBox" runat="server"
Text='<%# Bind("coffeeQty") %>' />
<br />
coffeeRRP:
<asp:TextBox ID="coffeeRRPTextBox" runat="server"
Text='<%# Bind("coffeeRRP") %>' />
<br />
<asp:LinkButton ID="UpdateButton" runat="server" CausesValidation="True"
CommandName="Update" Text="Update" />
<asp:LinkButton ID="UpdateCancelButton" runat="server"
CausesValidation="False" CommandName="Cancel" Text="Cancel" />
</EditItemTemplate>
<InsertItemTemplate>
coffeeName:
<asp:TextBox ID="coffeeNameTextBox" runat="server"
Text='<%# Bind("coffeeName") %>' />
<br />
coffeeOrigin:
<asp:TextBox ID="coffeeOriginTextBox" runat="server"
Text='<%# Bind("coffeeOrigin") %>' />
<br />
coffeeStrength:
<asp:TextBox ID="coffeeStrengthTextBox" runat="server"
Text='<%# Bind("coffeeStrength") %>' />
<br />
coffeeGrind:
<asp:TextBox ID="coffeeGrindTextBox" runat="server"
Text='<%# Bind("coffeeGrind") %>' />
<br />
coffeePrice:
<asp:TextBox ID="coffeePriceTextBox" runat="server"
Text='<%# Bind("coffeePrice") %>' />
<br />
coffeeQty:
<asp:TextBox ID="coffeeQtyTextBox" runat="server"
Text='<%# Bind("coffeeQty") %>' />
<br />
coffeeRRP:
<asp:TextBox ID="coffeeRRPTextBox" runat="server"
Text='<%# Bind("coffeeRRP") %>' />
<br />
<asp:LinkButton ID="InsertButton" runat="server" CausesValidation="True"
CommandName="Insert" Text="Insert" />
<asp:LinkButton ID="InsertCancelButton" runat="server"
CausesValidation="False" CommandName="Cancel" Text="Cancel" />
</InsertItemTemplate>
<ItemTemplate>
<b>Origin:</b>
<asp:Label ID="coffeeOriginLabel" runat="server"
Text='<%# Bind("coffeeOrigin") %>' />
<br />
<br />
<b>Grind:</b>
<asp:Label ID="coffeeGrindLabel" runat="server"
Text='<%# Bind("coffeeGrind") %>' />
<br />
<br />
<b>Price: £</b>
<asp:Label ID="coffeePriceLabel" runat="server"
Text='<%# Bind("coffeePrice") %>' />
<br />
<br />
<b>Strength:</b>
<asp:Label ID="coffeeStrengthLabel" runat="server"
Text='<%# Bind("coffeeStrength") %>' />
<br />
<br />
<b>Stock Level:</b>
<asp:Label ID="coffeeQtyLabel" runat="server" Text='<%# Bind("coffeeQty") %>' />
<br />
</ItemTemplate>
</asp:FormView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:CoffeeConnectionString %>"
SelectCommand="SELECT [coffeeName], [coffeeOrigin], [coffeeStrength], [coffeeGrind], [coffeePrice], [coffeeQty], [coffeeRRP] FROM [Coffees]">
</asp:SqlDataSource>
<br />
</div>
<div style=" float:left; width: 339px; height: 140px;">
<br />
<div style=" float:left; width: 165px; height: 25px;">
<b><asp:Label ID="Label1" runat="server" Text="Select Coffee Grind:"></asp:Label> </b>
</div>
<div style=" float:right; width: 165px; height: 25px;">
<asp:DropDownList ID="DropDownList1" runat="server" Height="21px" Width="161px">
<asp:ListItem>Beans</asp:ListItem>
<asp:ListItem>Smooth</asp:ListItem>
<asp:ListItem>Course</asp:ListItem>
</asp:DropDownList>
</div>
<div style=" float:left; width: 165px; height: 40px;">
<br />
<b><asp:Label ID="Label2" runat="server" Text="Quantity:"></asp:Label></b>
</div>
<div style=" float:right; width: 165px; height: 40px;">
<br />
<asp:TextBox ID="TextBox1" runat="server" Width="40px">1</asp:TextBox>
</div>
<div style=" float:left; width: 165px; height: 40px;">
<br />
<asp:Button ID="Button1" runat="server" Text="Buy" />
</div>
</div>
You would simply need to add two more divs beneath that code.
<div id="title"> </div> <br/>
<div id="description"> </div> <br/>
However if you would like to control their attributes such as visibility then you would just need to make those asp.net panels.
<asp:Panel runat="server" ID="title"> </asp:Panel> <br/>
<asp:Panel runat="server" ID="description"> </asp:Panel> <br/>

Categories

Resources