Highlight the Selected LinkButton Inside List View - c#

In asp.net C# webform Have a list view with one button after binding it convert to many buttons dynamically want to highlight selected button
<asp:ListView ID="ListViewCompanyServicesList" runat="server" ItemPlaceholderID="itemPlaceHolder" OnItemCommand="ListViewCompanyServicesList_ItemCommand">
<LayoutTemplate>
<div id="itemPlaceHolder" runat="server" style="margin-bottom: 0px;">
</div>
</LayoutTemplate>
<ItemTemplate>
<asp:LinkButton ID="btnTags" runat="server" Text='<%# Eval("Service") %>' CommandName="SelectService" CommandArgument='<%# Eval("ServiceId") %>' CssClass="label label-default" Style="display: inline-block" OnClick="btnTags_Click" />
</ItemTemplate>
<EmptyDataTemplate>
<div class="promote_contentBox2">
<p class="well" style="font-size: 80%;">No record Found</p>
</div>
</EmptyDataTemplate>
</asp:ListView>

You can change the css of the button that has been clicked.
btnTags.CssClass="your custom class";

Related

Listview not displaying 2 items in a row even though GroupItemCount is used

I am still new in asp.net c# and want to display a listview with 2 items in a row. However, the listview is not displayed with 2 items in a row even though I use GroupItemCount. Can anyone tell me how to solve it?
Thank you in advance.
<asp:ListView ID="lvClientFacility" runat="server" DataSourceID="SqlDataSource1" DataKeyName="facility_id" GroupItemCount="2" GroupPlaceholderID="groupPlaceholder1" ItemPlaceholderID="itemPlaceholder1">
<LayoutTemplate>
<div>
<asp:PlaceHolder ID="groupPlaceholder1" runat="server" />
</div>
</LayoutTemplate>
<GroupTemplate>
<div>
<asp:PlaceHolder ID="itemPlaceholder1" runat="server" />
</div>
</GroupTemplate>
<ItemTemplate>
<a class="facility" href="clientReservation.aspx?Id=<%# Eval("facility_id")%>">
<asp:Image ID="Image1" runat="server" Height="200px" Width="250px" ImageUrl='<%#"data:img/jpg;base64," + Convert.ToBase64String((byte[])Eval("facility_image"))%>' />
<div class="facilityName"><%# Eval("facility_name")%></div>
<asp:LinkButton ID="LinkButton1" PostBackUrl= '<%# "clientReservation.aspx?facility_id=" + Eval("facility_id") %>' runat="server" Text="Book Now"/>
<div class="ClientFacilityDescription"><%# Eval("facility_description")%></div>
</a>
</ItemTemplate>
</asp:ListView>

Open a ModalPopupExtender from checked radiobutton in a datalist

I have a Datalist with binddata from code behind and I'm trying to add an ajax modalpopupextender to each item. This modalpopup needs to open the right panel with the problem that the target control id it's always the same button in the end of the page.
I am getting the radiobutton selected but i can't open the modalpopup that is equivalent to it. It always opens the first panel.
Can anyone help me? Is this even possible?
C#
protected void btnValidateGift_Click(object sender, EventArgs e)
{
if (Request.Form["gift"] != null)
{
}
}
aspx
<asp:DataList ID="datalistReward" runat="server" RepeatDirection="Vertical" RepeatColumns="3" CssClass="datalistGift">
<ItemTemplate>
<div class="giftDiv">
<div class="giftTitle">
<%# DataBinder.Eval(Container.DataItem, "name") %>
</div>
<div>
<img width="60%" src="img/brindes/<%# DataBinder.Eval(Container.DataItem, "img") %>.png" />
</div>
<div id="divRadioBtnGift" runat="server" style="width: 10%; margin: auto;">
<input type='radio' id='radioBtnGift_<%# DataBinder.Eval(Container.DataItem, "value") %>'
name='gift' value='<%# DataBinder.Eval(Container.DataItem, "id") %>' />
</div>
</div>
<asp:ModalPopupExtender ID="ModalPopUpReward" BehaviorID="modalBehaviorPopupReward" runat="server" PopupControlID="panelSelectReward"
CancelControlID="btnCloseReward" BackgroundCssClass="modalBackground" TargetControlID="btnValidateGift" />
<asp:Panel ID="panelSelectReward" runat="server" CssClass="modalPopup" align="center" Style="display: none">
<div style="background-color: aqua; border: 1px solid red;">
<img width="60%" src="img/brindes/<%# DataBinder.Eval(Container.DataItem, "img") %>.png" />
<asp:ImageButton ID="btnCloseReward" runat="server" Text="Close" OnClientClick="CloseModalPopUp()" />
</div>
</asp:Panel>
</ItemTemplate>
</asp:DataList>
<asp:Button ID="btnValidateGift" Text="Validar >" runat="server" CssClass="divButton" OnClick="btnValidateGift_Click" />
Edit1: I've tried to add the a custom string to the panel id like this <%# DataBinder.Eval(Container.DataItem, "id") %> . But this doesn't even compile. Any chance of making this work?
You use server-side OnClick event to show the popup. It just shows the first (or last) data evaluated during page render.
To change ModalPopup's content you need to use OnClientClick event + asynchronous call to fill the popup with the data you need.
Here is the example of using client events with ModalPopup.

DataList does not bind image

I am using Datalist and bind some information on it, but my Datalist is not showing my image.
Here is My Aspx Code:
<asp:DataList ID="datalistnewsrelease" runat="server" RepeatColumns="4" BorderColor="WhiteSmoke"
RepeatDirection="Vertical" RepeatLayout="Flow" Width="100%" OnItemCommand="datalistnews_ItemCommand">
<ItemTemplate>
<div class="newsbox m5">
<p class="black">
<asp:Label ID="lbldate" runat="server" class="b red" Text='<%#Eval("NewsReleaseDate") %>'></asp:Label>
<asp:Label ID="lblmonth" runat="server" class="b red" Text='<%#Eval("NesReleaseMonth") %>'></asp:Label>
<asp:Label ID="lblyear" runat="server" class="b red" Text='<%#Eval("NewsReleaseYear") %>'></asp:Label>
<br>
<asp:Label ID="lbltitle" runat="server" class="b blue" Text='<%#Eval("NewsReleaseTittle") %>'></asp:Label>
<a href="<%#Eval("NewsReleaseImage")%>" rel="gallery">
<img src="<%#Eval("NewsReleaseImage")%>" width="88" height="62" class="fr ml8" alt="">
</a>
<asp:ImageButton ID="NewsRelease" runat="server" Style="float: right;" img src="images/read.png"
CommandArgument='<%#Eval("NewReleaseId")%>' CommandName="View" />
</p>
<div class="cb pb5">
</div>
</div>
</ItemTemplate>
</asp:DataList>`
My code is similar to a Gridview I am binding the DataList to, but only that the image is not showing up.
Could you please share the value coming to "NewsReleaseImage" .
Is it plain image file name or relative path ? If it's plain file name then append relative your paths in ItemBound, if its fixed then you can append directly like below
src="/Images/<%#Eval("NewsReleaseImage")%>"
I suggest you to view the generated HTML and see the generated src attribute.

Programmatically scroll/move to an item in a .net asp:listview control

I have a web page that has an asp:ListView and I am trying to figure out how to programmatically scroll to a certain item. Here is my aspx markup:
<asp:ListView ID="lvGlossary" runat="server" DataSourceID="SqlDataSource1" OnItemDataBound="lvGlossary_ItemDataBound">
<LayoutTemplate>
<div class="glossaryTitle">Glossary</div>
<div id="ItemPlaceholder" runat="server"></div>
<br />
</LayoutTemplate>
<ItemTemplate>
<div class="glossaryEntry">
<span class="glossaryWord">
<asp:Label ID="lbWord" runat="server" Text='<%# Bind("Word") %>' />:
</span>
<span class="glossaryDefinition">
<asp:Label ID="lbDefinition" runat="server" Text='<%# Bind("Definition") %>' />
</span>
<br />
</div>
</ItemTemplate>
<AlternatingItemTemplate>
<div class="glossaryEntryAlternating">
<span class="glossaryWord">
<asp:Label ID="lbWord" runat="server" Text='<%# Bind("Word") %>' />:
</span>
<span class="glossaryDefinition">
<asp:Label ID="lbDefinition" runat="server" Text='<%# Bind("Definition") %>' />
</span>
<br />
</div>
</AlternatingItemTemplate>
</asp:ListView>
In my c# code behind I am populating a text box with text and when the user selects a word I want to automatically scroll to the word in the listview so it is visible. It most likely needs to be done client side, so I think I need some javascript to do this. Can anyone point me to an example of how to do this?
Any help is appreciated!!
Thank you
You could use an element's scrollIntoView javascript method:
document.getElementById('id').scrollIntoView(true);

Dynamic Id property on items in ListView

I am developing a simple message board in ASP.NET Web forms and I list all posts in a ListView controller. My code looks something like this:
<ItemTemplate>
<article class="post">
<div class="postinfo">
<div class="postauthor">
Author: <strong><%# Eval("Author") %></strong>
</div>
<div class="postdate">
Date: <strong><%# Eval("PostDate", "{0:D}") %></strong>
</div>
<div class="postvotes">
<asp:Button class="postupvote" id='up<%# Eval("Id") %>' runat="server" />
<asp:Label ID="postvotescount_<%# Eval("Id") %>" class="postvotescount" runat="server" Text="<%# Eval("Votes") %> votes"></asp:Label>
<asp:Button class="postdownvote" id='down<%# Eval("Id") %>' runat="server" />
</div>
</div>
<div class="postcontent"><%# Eval("Text") %></div>
</article>
</ItemTemplate>
My problem is the voting functionality. I want to have css id properties, containing the unique database id of the post. That way I will know the Id of the post, it was voted for. So is this possible and if not, how can I achieve this?
Thanks!
You could use ClientIdMode and set it to predictable
http://msdn.microsoft.com/en-us/library/system.web.ui.clientidmode.aspx
<asp:ListView ID="ListView1"
ClientIDMode="Predictable"
ClientIDRowSuffix="ProductID"
DataSourceID="XmlDataSource1" runat="server" >
<ItemTemplate>
</ItemTemplate>
</asp:ListView>
This assumes you are using .Net 4.0 or above.

Categories