Styling Asp:Dropdownlist and Asp:ListItem using Bootstrap? - c#

just a quick question, How do you style an Asp:Dropdownlist and its ListItem using bootstrap?
Does it have to do with CssClass?
From what the system says CssClass is not a valid attribute in the element ListItem.
Can you add Span Class inside the text?
Here's a sample code:
<asp:DropDownList runat="server" id="dropdownrole" data-style="btn-primary" CssClass="dropdown-menu">
<asp:ListItem CssClass="btn-primary" Text="-- Select a user to proceed --"></asp:ListItem>
<asp:ListItem Text="Admin"></asp:ListItem>
<asp:ListItem Text="Student" ></asp:ListItem>
<asp:ListItem Text="Teacher"></asp:ListItem>
</asp:DropDownList>

Did you try this?
For me it was enough to add CssClass="form-control"
<asp:DropDownList CssClass="dropdown-menu form-control" runat="server" id="dropdownrole" data-style="btn-primary">

I think you are looking for that:
<asp:DropDownList runat="server" CssClass="form-control" id="dropdownrole" >
<asp:ListItem Text="-- Select a user to proceed --"></asp:ListItem>
<asp:ListItem Text="Admin"></asp:ListItem>
<asp:ListItem Text="Student" ></asp:ListItem>
<asp:ListItem Text="Teacher"></asp:ListItem>
</asp:DropDownList>
I think you can't change the selects style with bootstrap, please read the selects section here. (scroll down)
Regards.

<asp:ListItem>Allahabad</asp:ListItem>
<asp:ListItem>Kanpur</asp:ListItem>
<asp:ListItem>Rewa</asp:ListItem>
<asp:ListItem>Bhopal</asp:ListItem>
<asp:ListItem>Indore</asp:ListItem>
<asp:ListItem>Jabalpur</asp:ListItem>
Refer this:
http://www.mindstick.com/Blog/639/Dropdownlist%20using%20BootStrap%20in%20ASP%20Net#.VgUYlVanJ7Y

Related

How to Avoid default Selected from dropdown list

In my current code we have a drop down lists similar like below which is a mandatory field earlier so we need to select the value before submitting the form but now there is no need mandatory so removed the Mandatory check condition and current code as below.
<asp:dropdownlist id="ddlTest" Runat="server" TabIndex="01">
<asp:ListItem Selected="True" ">Select</asp:ListItem>
<asp:ListItem Value="N" >No</asp:ListItem>
<asp:ListItem Value="Y">Yes</asp:ListItem>
</asp:dropdownlist>
prmddlTest.Value = Format_SQL(ddlTest.SelectedItem.Value)
cmdSaveData.Parameters.Add(prmddlTest)
Function Format_SQL(ByVal sInput) As Object
If sInput = "" Or sInput = "-1" Then
Return DBNull.Value
Else
Return sInput
End If
End Function
I am getting error during submit the form because of default "Select" If I select No or Yes value going fine. How to avoid "Select" in code during submission.
Thanks in Advance
Try this one:
<asp:dropdownlist id="ddlTest" Runat="server" TabIndex="01">
<asp:ListItem Text="" Selected="True"></asp:ListItem>
<asp:ListItem Value="N" >No</asp:ListItem>
<asp:ListItem Value="Y">Yes</asp:ListItem>
</asp:dropdownlist>

How to make an asp dropdown list item unselectable

I have written following code to display drop down list :
<asp:DropDownList AutoPostBack="True" ID="ddlCities" runat="server" class="form-control input-sm" placeholder="" TabIndex="5">
<asp:ListItem>Select City</asp:ListItem>
<asp:ListItem value="3">Ahmedabad (All) ---------------</asp:ListItem>
<asp:ListItem value="3_3004"> Ahmedabad East</asp:ListItem>
<asp:ListItem value="3_3005"> Ahmedabad West</asp:ListItem>
<asp:ListItem value="3_3006"> Ahmedabad-Bopal and Surroundings</asp:ListItem>
<asp:ListItem value="3_3007"> Ahmedabad-Gandhinagar</asp:ListItem>
<asp:ListItem value="3_3008"> Ahmedabad-Sabarmati and Surroundings</asp:ListItem>
<asp:ListItem value="3_3009"> Ahmedabad-SG Highway and Surroundings</asp:ListItem>
</asp:DropDownList>
I want to make following item inside dropdown unselectable :
<asp:ListItem value="3">Ahmedabad (All) ---------------</asp:ListItem>
Note : I CAN'T USE OPTGROUP!!!!
and i don't want to hide it. it will be shown in dropdown, but user can't select this item.
I have tried adding 'disabled' attribute, but it hides that item.
i have also tried :
ddlCities.Items[1].Attributes.Add("Style", "cursor:not-allowed");
It doesn't allow cursor, but still user can select this item, is there any other way to make this particular item unselectable??
Even though you said that disabled attribute hides the element, you are wrong.
Disabled attribute is exactly what you should use for this:
<asp:DropDownList ID="DropDownList1" runat="server">
<asp:ListItem Value="1">First</asp:ListItem>
<asp:ListItem Value="2" disabled="disabled">Second</asp:ListItem>
<asp:ListItem Value="3">First</asp:ListItem>
</asp:DropDownList>
Result:
I think you're looking for something like this. Please see if it can help you.
[Update]
just looked back to your post and understand you cannot use OPTGROUP. May i know the reason? as your requirement needs this option.

Adding image to a radio button list in ASP.Net

I am trying to add an image to a radio button list control but its not working..
I tried this..
RadioButtonList2.Items.Add(new ListItem(String.Format("src='../Colors/Dallas_#625527_1.1.png'>")));
but the whole image tag appears as text
I tried I design time as well
<asp:RadioButtonList ID="rbListImages" runat="server">
<asp:ListItem Text="One" Value="1"><img src="../Colors/Dallas_#625527_1.1.png" alt="" /></asp:ListItem>
</asp:RadioButtonList>
but it says img tag cant be nested with the listitem tag.. Please help me out..
You need to specify the control control, you are trying to set the src tag but there is no image control. Try this:-
RadioButtonList2.Items.Add(new ListItem("<img src='"+"../Colors/Dallas_#625527_1.1.png"+"'/>"));
You can also add this at design time, like this:-
<asp:RadioButtonList ID="imagetest" runat="server">
<asp:ListItem Text='<img src="Image1.jpg" alt="img1" />' Value="1" Selected="True" />
<asp:ListItem Text='<img src="Image2.jpg" alt="img2" />' Value="2"></asp:ListItem>
</asp:RadioButtonList>
<asp:RadioButtonList ID="RadioButtonList1" runat="server" >
<asp:ListItem Text="<img src="Images/AddIcon.gif"/> Option1" Value="1"> </asp:ListItem>
<asp:ListItem Text="<img src="Images/1.gif"/> Option2" Value="2"></asp:ListItem>
<asp:ListItem Text="<img src="Images/2.gif"/> Option3" Value="3"></asp:ListItem>
<asp:ListItem Text="<img src="Images/3.gif"/> Option4" Value="4"></asp:ListItem>
(OR)
ANother way :
From Code Behind : Display Images in RadioButtonList Control

ListBox1.SelectedItem.Text gives other Text

I have a listbox :
<asp:ListBox ID="ListBox1" runat="server" AutoPostBack="True"OnSelectedIndexChanged="ListBox1_SelectedIndexChanged">
<asp:ListItem Value="genyn">MAS Meeting</asp:ListItem>
<asp:ListItem Value="smartyn">Smart Meeting</asp:ListItem>
<asp:ListItem Value="genyn">Project Meeting</asp:ListItem>
</asp:ListBox>
In the code behind:
protected void ListBox1_SelectedIndexChanged(object sender, EventArgs e)
{
label1.Text= ListBox1.SelectedItem.Text;
}
when I select Project Meeting in the ListBox, label1 has the text "MAS Meeting". But i want it hav Project Meeting. Is it because I have same value for first and third listitem?
Can anyone help me?
Thanks in advance
You could not do it such a way.
The value attribute should be unique, otherwise you will get the first matched item from the select, mean asp.net List
<asp:ListItem Value="diffValue">Project Meeting</asp:ListItem>
You have the same values for MAS Meeting and Project Meeting - that can cause your problem. Try setting different values for different list items to avoid confusion:
<asp:ListBox ID="ListBox1" runat="server" AutoPostBack="True"OnSelectedIndexChanged="ListBox1_SelectedIndexChanged">
<asp:ListItem Value="genyn">MAS Meeting</asp:ListItem>
<asp:ListItem Value="smartyn">Smart Meeting</asp:ListItem>
<asp:ListItem Value="another_genyn">Project Meeting</asp:ListItem>
</asp:ListBox>

Bug error: trying to set asp.net radiobuttonlist selected item from codebehind return an error

When using the following code, this error is returned:
'rblPermisSejourA' has a SelectedValue which is invalid because it does not exist in the list of items.
<asp:RadioButtonList ID="rblPermisSejour" runat="server"
DataSourceID="EntityDataSourcePermisSejour" DataTextField="Libelle"
DataValueField="Id" AppendDataBoundItems="True" RepeatDirection="Horizontal">
<asp:ListItem Selected="True" Text="" Value="-1">Aucun</asp:ListItem>
</asp:RadioButtonList>
<asp:RadioButtonList ID="rblPermisSejourA" runat="server"
DataSourceID="EntityDataSourcePermisSejour" DataTextField="Libelle"
DataValueField="Id" AppendDataBoundItems="True" RepeatDirection="Horizontal">
<asp:ListItem Selected="True" Text="" Value="-1">Aucun</asp:ListItem>
</asp:RadioButtonList>
protected void ws2_OnDeactivate(object sender, EventArgs e)
{
rblPermisSejourA.SelectedValue = rblPermisSejour.SelectedValue;
}
Note that "rblPermisSejour" is in a wizard step and "rblPermisSejourA" in another wizard step that is not yet activated (no id and no title for the step in witch there is the "rblPermisSejourA"). When this step is activated, all is working well.
But with the same code and same operation with another RadioButtonList it's working very well and this within the same context (wizard step not activated).
From your comment
<asp:ListItem Selected="True" Value="1">A</asp:ListItem>
<asp:ListItem Selected="True" Value="2">C</asp:ListItem>
you have BOTH items selected="true" so calling .SelectedValue may be a problem as it won't know which value you mean. Are these the list items form rblPermisSejourA or rblPermisSejour? If you edit your question to add both lists we can see what this line
rblPermisSejourA.SelectedValue = rblPermisSejour.SelectedValue;
is trying to do and figure out your error.
EDIT
Have you tried something like
rblPermisSejourA.Items.FindByValue(rblPermisSejour.SelectedValue).Selected = true;
Have you tried
rblPermisSejourA.SelectedValue = rblPermisSejour.SelectedItem.Value;
This is THE solution:
if (rblPermisSejourA.Items.Count <= 1)
rblPermisSejourA.DataBind(); //added to correct the bug
rblPermisSejourA.SelectedValue = rblPermisSejour.SelectedValue;

Categories