Remove tick/check box from ASP.NET Checkbox control - asp.net

I have this CheckBoxList control and to each ListItem of it, have set the Text property to the img HTML tag so it displays an image.
I am trying to remove the tick/check box from the checkboxes of a ASP.NET CheckBoxList control when i click on each item.
My code does this. Every time i click on some check box, the SelectedIndexChanged event fires up and it does some saving of some data in my database. And when the saving is done and the page is refreshed i want to check/tick box of the checkbox item that was clicked not to be there anymore and the checkbox to be disabled cause i don't want the user to able able to click it again. I have tried to tried to set the Enable and Selected properties to False, and also add an attribute to the CheckboxList control, but without success. Here is my code.
<asp:CheckBoxList ID="Services" runat="server" RepeatColumns="5" CellPadding="10"
CellSpacing="15" RepeatLayout="Table"
Font-Size="Large" RepeatDirection="Vertical" TextAlign="Right"
AutoPostBack="true" EnableViewState="true">
<asp:ListItem Value="Facebook" Text="<img src='/ServiceIcons/facebook.png'
title='Facebook' />" />
<asp:ListItem Value="Googleplus" Text="<img src='/ServiceIcons/googleplus.png'
title='Google+' />" />
<asp:ListItem Value="LinkedIn" Text="<img src='/ServiceIcons/linkedin.png'
title='LinkedIn' />" />
<asp:ListItem Value="RSS" Text="<img src='/ServiceIcons/rss.png' title='RSS' />" />
<asp:ListItem Value="Skype" Text="<img src='/ServiceIcons/skype.png' title='Skype' />"
/>
</asp:CheckBoxList>
And in the code behind i do this:
Private Sub Services_SelectedIndexChanged(ByVal sender As Object, ByVal e As
System.EventArgs) Handles Services.SelectedIndexChanged
-----Storing to database code here------
Services.Items(Services.SelectedIndex).Enabled = False
Services.Items(Services.SelectedIndex).Attributes.Add("class",
"displayCheckBox")
Services.Items(Services.SelectedIndex).Selected = False
End Sub
And the css class here:
.displayCheckBox input{display:none;}
After the the event does the storing in the database and the page is refreshed, the checkbox that was selected is disabled but it shows the tick/check box, and i don't want it to show it if is selected.
Any one has an idea. I have searched a lot, but it seems that the CheckBoxList control doesn't provide much costumizing options.
Thank you in advance !

If you want to remove the checkbox from the checkboxlist, on SelectedIndexChanged event, try this:
Private Sub Services_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles Services.SelectedIndexChanged
'-----Storing to database code here------
Services.Items.RemoveAt(Services.SelectedIndex)
End Sub

Related

Losing update panel trigger from databound gridview in tab container

I'm having some trouble getting a command link in a gridview to maintain it's ability to change tabs after the initial postback. So below you will see the structure of my content (heavily simplified):
<ajaxToolkit:TabContainer runat="server" ID="tabBody">
<ajaxToolkit:TabPanel runat="server" ID="tabPanel1">
<ContentTemplate>
<asp:UpdatePanel runat="server" ID="updPanel1">
<ContentTemplate>
<asp:Gridview runat="server" ID="grd1" OnRowCommand="grd1_RowCommand" OnRowDataBound="grd1_RowDataBound">
<asp:TemplateField>
<ItemTemplate>
<asp:LinkButton ID="lnkChangePanels" runat="server" CommandArgument='<%#Eval("id") %>' CommandName="gotopanel2" Text='<%#Eval("FirstName") & " " & Eval("LastName")%>' />
</ItemTemplate>
</asp:TemplateField>
</asp:Gridview>
</ContentTemplate>
</asp:UpdatePanel>
</ContentTemplate>
</ajaxToolkit:TabPanel>
<ajaxToolkit:TabPanel runat="server" ID="tabPanel2">
<ContentTemplate>
<asp:UpdatePanel runat="server" ID="updPanel2">
<ContentTemplate>
<asp:Gridview runat="server" ID="grd2">
</asp:Gridview>
</ContentTemplate>
</asp:UpdatePanel>
</ContentTemplate>
</ajaxToolkit:TabPanel>
</ajaxToolkit:TabContainer>
In order to fill the gridview on panel 1, there is a search box which the user types into and I call a function to bind a linq query to it.
Now I add the rowcommand as a postback trigger on rowdatabound:
Protected Sub grd1_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs)
If e.Row.RowType = DataControlRowType.DataRow Then
Dim lb As LinkButton = CType(e.Row.FindControl("lnkChangePanels"), LinkButton)
If Not lb Is Nothing Then
ToolkitScriptManager1.RegisterPostBackControl(lb)
End If
End If
End Sub
Then here is the code I have to trigger the tab panel to change (and do some other stuff):
Protected Sub grd1_RowCommand(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewCommandEventArgs) Handles grd1.RowCommand
Dim id = e.CommandArgument.ToString()
Select Case e.CommandName
Case "gotopanel2"
eventDetails(id, "C")
tabBody.ActiveTab = tabPanel2
End Select
End Sub
This causes a proper postback and changes the tab, everything works as intended. But if I go back to the first tab and try clicking another row in gridview 1, nothing happens.
Is there a way to structure this so the that either the tab can change without losing the postback trigger or am I going about this all wrong?
Thanks.
Postback trigger is not lost. Problem is caused by individual UpdatePanels in each tab.
Put entire TabContainer within UpdatePanel and you can remove UpdatePanels from tabs (but you don't have to). Make sure that UpdateMode of that new panel is set to "Always".
I think the reason why it does not change in your example is that UpdatePanel only refreshes it's own content and attribute that decides if tab is visible or not is set for div (tabPanel) outside that UpdatePanel. When you go back to tab with grid you do it client-side by clicking on it and that's when it goes wrong.
To get to the bottom of the problem and figure out why it does work during the first postback you would probably have to debug ajax toolkit javascript for TabContainer control.

Placing ASP.Net DetailsView into Edit mode and Update mode

We are working with an ASP.Net DetailsView with a VB.Net code-behind file. We are trying to allow the user to edit and save changes in the DetailsView by allowing the user to click the Edit button and then click the Update button.
Nothing happens when the user clicks the Edit button so we added an OnClick handler for the Edit button. The DetailsView will go into edit mode but only if the user clicks the Edit button twice. (Maybe an ASP.Net bug?)
Once the DetailsView is in Edit mode the Update and Cancel buttons are displayed as expected but nothing happens when the user clicks either of those buttons. We placed an OnClick on the Update button in an attempt to force the DetailsView to Update but the only choices for .ChangeMode(DetailsViewMode. are Edit, Insert, ReadOnly.
I also thought DetailsViews did not need additional OnClicks unless we needed to perform special handling.
Here is the markup for the DetailsView:
<asp:DetailsView
ID="DetailsView"
runat="server"
Height="50px"
Width="218px" AutoGenerateRows="False">
<Fields>
<asp:TemplateField ShowHeader="False">
<EditItemTemplate>
<asp:Button ID="ButtonUpdate" runat="server" CausesValidation="True"
CommandName="Update" Text="Update" OnClick="ButtonUpdate_Click" />
<asp:Button ID="ButtonCancelUpdate" runat="server" CausesValidation="False"
CommandName="Cancel" Text="Cancel" />
</EditItemTemplate>
<ItemTemplate>
<asp:Button ID="ButtonEdit" runat="server" CausesValidation="False"
CommandName="Edit" Text="Edit" OnClick="ButtonEdit_Click"/>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="Forename" HeaderText="First Name:" />
</Fields>
</asp:DetailsView>
Here is the coding in the code-behind file:
Public Class StudentDetailsMaintenance
Inherits System.Web.UI.Page
Dim theTableAdapter As New DataSetSingleStudentTableAdapters.StudentsMaintenanceTableAdapter
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
' Load the data from the database into the DetailsView.
'------------------------------------------------------
DetailsView.DataSource = theTableAdapter.GetDataByStudentID(StudentMaintenance.IntStudentID)
DetailsView.DataBind()
End Sub
Protected Sub ButtonEdit_Click(sender As Object, e As EventArgs)
' Place the DetailsView into Edit mode.
'--------------------------------------
DetailsView.ChangeMode(DetailsViewMode.Edit)
End Sub
Protected Sub ButtonUpdate_Click(sender As Object, e As EventArgs)
' Place the DetailsView into Update mode.
'----------------------------------------
DetailsView.ChangeMode(DetailsViewMode.)
End Sub
End Class
The ButtonUpdate_Click routine is incomplete because we don't know how to get the DetailsView to do the update.
Addional Note:
This is the first time we are trying to do a DetailsView by not setting up a DataSource in the markup. Instead of doing that we are using the data from a DataSet TableAdapter created in the DataSet designer.
If we did the DetailsView along with the DataSource all in the markup then the Edit and Update buttons work without any problem. We were also doing this in an attempt to eliminate extra coding if possible.
If you want the DetailsView's automatic behaviour for Edit, you need to use a CommandField to show the Edit button:
<asp:DetailsView id="dvDetailsView" runat="server" DataSourceId="sqlDS" DataKeyNames="primaryKey">
<Fields>
<asp:CommandField ButtonType="Button" ShowEditButton="true" />
</Fields>
</asp:DetailsView>
As noted above you need to include the DataKeyNames property to specify the primary key for the datasource so that ASP.NET knows which record in the data source to update. Also as mentioned above, you need to make sure that the Bind("columnName") statements use the same field names as used in your data store.
Also, make sure that you provide an UpdateCommand in your SqlDataProvider (or equivalent for your data store) so that the update can take place.
Now when you place the DetailsView into Edit mode, the Update and Cancel buttons will automatically be displayed where the is. If you need to do some work with the data before the data is updated in the data store, then handle the DetailView's ItemUpdating event in the code behind.
Well, looking real briefly, try wrapping your Page_Load databind in an If Not Page.IsPostback.
Postback wreaks havoc on databound controls.

Button ClickEvent is not triggered

Afternoon All,
I have two buttons on my web page that is used to lock and unlock a web page so that a user can lock the page and edit this without other users being able to access the record and then unlock this record so other users can edit this.
The problem i have is that the buttons doesnt work and im not to sure why. I am using image buttons but it looks like the event is not being triggered, i cant see the problem and its driving me crazy. Can some one please take a look at my code...
<asp:ImageButton ID="btnLock" runat="Server"
AlternateText="Click to lock record" ImageUrl="~/images/lock.png" />
<asp:ImageButton ID="btnUnlock" runat="Server"
AlternateText="Click to unlock record" ImageUrl="~/images/unlock.png" />
<asp:Label ID="lblUserName" runat="server" Font-Bold="True" Font-Size="Medium"
ForeColor="#CC3300"></asp:Label>
<asp:HiddenField ID="hdnIsLockedBy" runat="server" />
'VB Code for lock button...
Protected Sub btnLock_Click(sender As Object, e As System.EventArgs) Handles btnLock.Click
Dim lock As New WeeklyClass
'Check that the Loggedby field is set to null so the user can then lock the record
If String.IsNullOrEmpty(lock.LockedBy) Then
'lock and add the username
lock.LockedBy = User.Identity.Name
'global variable islockedby
hdnIsLockedBy.Value = User.Identity.Name
'AgendaID required as part of the stored procedure
lock.AgendaID = Integer.Parse(lblAgendaNumber.Text)
End If
'Save to the database using the Class DAL and the Stored Procedure
WeeklyClassDAL.LockWeeklyAgenda(lock)
'Display buttons as expected result
btnLock.Visible = False
btnUnlock.Visible = True
' Refreshes fields on the page
Response.Redirect("~/WeeklyAgenda.aspx?Edit=" & lblAgendaNumber.Text)
End Sub
'VB Code for unlock button...
Protected Sub btnUnlock_Click(sender As Object, e As System.EventArgs) Handles btnUnlock.Click
Dim unlock As New WeeklyClass
' Check to see if the system has a username
If hdnIsLockedBy.Value = User.Identity.Name Then
'set the lockedby field to null
unlock.LockedBy = hdnIsLockedBy.Value
'pass the relevent agendaid
unlock.AgendaID = Integer.Parse(lblAgendaNumber.Text)
End If
' save to the database using the Class DAL
WeeklyClassDAL.unLockWeeklyAgenda(unlock)
'Display buttons as expected result
btnLock.Visible = True
btnUnlock.Visible = False
' Refreshes fields on the page
Response.Redirect("~/WeeklyAgenda.aspx?Edit=" & lblAgendaNumber.Text)
End Sub
Any help is much appriechiated. I have been looking at this for ages and cant seem to find the issue.
Regards
Betty
You have not subscribed to the click event. Your control does not know that it has to call those functions when a user clicks them.
Subscribe to those events as follows:
<asp:ImageButton ID="btnLock" runat="Server"
AlternateText="Click to lock record" ImageUrl="~/images/lock.png"
OnClick="btnLock_Click" />
<asp:ImageButton ID="btnUnlock" runat="Server"
AlternateText="Click to unlock record" ImageUrl="~/images/unlock.png"
OnClick="btnUnloc_Click />
You need to specify the Click event in your buttons.
OnClick="Button1_Click"
So your buttons should be:
<asp:ImageButton
ID="btnLock"
runat="Server"
AlternateText="Click to lock record"
ImageUrl="~/images/lock.png"
OnClick="btnLock_Click" />
<asp:ImageButton
ID="btnUnlock"
runat="Server"
AlternateText="Click to unlock record"
ImageUrl="~/images/unlock.png"
OnClick="btnUnloc_Click />
You need to add autopostback="true" to the buttons:
<asp:ImageButton ID="btnLock" runat="Server" autopostback="true"
AlternateText="Click to lock record" ImageUrl="~/images/lock.png" />
Otherwise the code behind will not be triggered.

Dropdown autopost inside updatepanel never enters code behind SelectedIndexChanged event

This is a difficult scenerio to explain, so I coded up a simple example.
<asp:UpdatePanel runat="server" ID="upTest" ChildrenAsTriggers="true"
UpdateMode="Conditional">
<ContentTemplate>
<asp:DropDownList ID="ddlTest" runat="server" AutoPostBack="true"></asp:DropDownList>
<br /><br />
In page: <asp:TextBox runat="server" ID="txtTest" Columns="50" Text="OnLoad</asp:TextBox>
<br />
<br />
<asp:Button runat="server" ID="btnTest" Text="Click it" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ddlTest" />
</Triggers>
</UpdatePanel>
Code-Behind
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Page.IsPostBack Then
BindDropDown(Request.Form(ddlTest.UniqueID))
Else
BindDropDown(0)
End If
End Sub
Public Sub BindDropDown(val As Integer)
ddlTest.Items.Add(New ListItem("", 0))
ddlTest.Items.Add(New ListItem("One", 1))
ddlTest.Items.Add(New ListItem("Two", 2))
ddlTest.Items.Add(New ListItem("Three", 3))
ddlTest.Items.Add(New ListItem("Four", 4))
ddlTest.SelectedValue = val
End Sub
Private Sub ddlTest_SelectedIndexChanged(sender As Object, e As System.EventArgs) Handles ddlTest.SelectedIndexChanged
txtTest.Text = "Dropdown changed"
End Sub
Private Sub btnTest_Click(sender As Object, e As System.EventArgs) Handles btnTest.Click
txtTest.Text = "Button clicked"
End Sub
Also to note, I have EnableViewState="false" and ClientIdMode="Static" for the page.
When I click the button the partial postback occurs and the textbox has the expected value of 'Button Clicked'
When I change the dropdown the partial postback occurs, however the textbox does not have the expected value of 'Dropdown changed' because the code in ddlTest_SelectedIndexChanged is never hit (breakpoint placement on that line of code also never hits)
In the larger scope of my project this is the crux of the problem and I can't determine why this event is never hit (the core problem is when I load a dynamic user control, the data in the control is bound correctly, but then is overridden with the pre-post data after the user control is loaded - the override is occurring somewhere in the post back events). It appears to me it has something to do with the binding of the dropdown and where it happens in the page cycle, but I haven't been able to nail anything down, nor come up with google solutions.
One odd thing I did notice when looking at the post in Firebug - the EVENTTARGET value for the dropdown was the UniqueId of the dropdown, but the EVENTTARGET value is empty for the button click. My brain is thinking there is some connection here.
FYI - I have come up with a work around that seems to do the trick. I set autopostback on dropdown to false, and using jQuery I assign the change event on the dropdown to fire the button click - which causes the postback and fires btn_click event in code.
I solved the initial issue here by moving the dropdown fill to the init event and then letting .NET load the selected value from view state
However in doing this, now the selectedindex event fires on EVERY postback.

Repeater won't let me access controls like buttons, dropdown, etc

I'm using a repeater ListOfArticles and have controls inside it like ddlSizes and btnSelectArticle. Normally you can just double click the control and in the aspx.vb page you can specify an action. I have heard something about Findcontrol, but can't figure out or find much information that I understand. I don't want to sound like an ass, but I would really prefer help for the aspx.vb page and not in C# or Javascript.
An example of what I'm trying to do is, once you've clicked btnSelectArticle the label lblSelection receives the following values Amount: txtAmount - Size: ddlSizes.SelectedValue.
<asp:Repeater ID="rptListOfArticles" runat="server" DataSourceID="objdsArticleList">
<asp:DropDownList ID="ddlSizes" runat="server" AutoPostBack="True" DataSourceID="objdsSizes" DataTextField="SizeName" DataValueField="SizeID" OnSelectedIndexChanged="ddlSizes_SelectedIndexChanged" />
<asp:Button ID="btnSelect" runat="server" Text="Select" OnClick="btnSelect_OnClick" />
<asp:Label ID="lblSelection" runat="server" Text=""></asp:Label>
In the aspx.vb page I can only select this and my controls like ddlSizes and btnSelect aren't recognized.
Protected Sub rptListOfArticles_ItemCommand(ByVal source As Object, ByVal e As System.Web.UI.WebControls.RepeaterCommandEventArgs) Handles rptListOfArticles.ItemCommand
End Sub
Any help towards a solution would be great!
What you need to do is use the FindControl method to find the specific control in the selected repeater Item.
so an example would be (within the ItemCommand method)
Dim lblSelection as Label = CType(e.Item.FindControl("lblSelection"), Label)
lblSelection.Text = "Your Text"
Edit **
To Answer your questions in the comments:
Yes to access the SelectedValue of the ddlSize DropDown you will need to create this:
Dim ddlSize As DropDownList = Ctype(e.Item.FindControl("ddlSize"), DropDownList)
The Repeater will know when to call this method when any Buttons are Clicked within the Repeater. Add a CommandName to your buttons so that you can then control what happens in the ItemCommand method.
e.g.
<asp:Button id="btnDoSomething" runat="server" text="Run ItemCommand" CommandName="Command1" />
In the ItemCommand use the code:
If e.CommandName = "Command1" Then
' run your code
End If
You can handle the event of dropdownlist in ItemCommand Event. Event bubbling concept comes here actually the child control bubble the evenet up to its parent i.e repeater control so you can handle it in parent control event eventually
for more details HERE you will have indepth insight of all events of repeater

Resources