Menu

Change ListBox multiple selected item color

Hello Friend,

Here we have provide simple demo for change ListBox multiple selected item color. following below step.

Download Source code:=>ChangeListBoxMultipleSelectedItemColor.rar

Step 1.

Add the javascript function in Aspx page.


<script type="text/javascript">

function Validate(id, event, hdnId)
{
var selectedValue = document.getElementById(hdnId).value;
if (event.ctrlKey)
{
selectedValue = selectedValue + "," + document.getElementById(id).selectedIndex;
}
else
{
selectedValue = document.getElementById(id).selectedIndex;
}
for(var loop = 0; loop < document.getElementById(id).options.length; loop++)
{
document.getElementById(id).options[loop].style.backgroundColor = "#AAAAA0";
}
var selected = selectedValue.toString().split(',');
for (j = 0; j < selected.length; j++)
{
document.getElementById(id).options[selected[j]].style.backgroundColor = "#D9D9D2";
}
document.getElementById(id).selectedIndex = -1;
document.getElementById(hdnId).value = selectedValue;
}
function selectedItem(id, strValue)
{
for (var loop = 0; loop < document.getElementById(id).options.length; loop++)
{
document.getElementById(id).options[loop].style.backgroundColor = "#AAAAA0";
}
if (strValue != "")
{
var selected = strValue.toString().split(',');
for (j = 0; j < selected.length; j++)
{
document.getElementById(id).options[selected[j]].style.backgroundCol or = "#D9D9D2";
}
}
}
</script>

Step 2. Add Asp Control in your page

<asp:HiddenField ID="hdnSelectedFigureId" runat="server" />
<asp:ListBox ID="ddlSearchFigure" runat="server" SelectionMode="Multiple"/>

Step 3. Add javascript function in ListBox on server side.

ddlSearchFigure.Attributes.Add("onclick", "javascript:return Validate('" + ddlSearchFigure.ClientID + "',event,'" + hdnSelectedFigureId.ClientID + "');");

Step 4. Get Selected Item value on server side.

string strFigure = getSelectedItemValue(hdnSelectedFigureId, ddlSearchFigure);

// Pass your hidden field and ListBox in below function
public string getSelectedItemValue(HiddenField hdnSelect, ListBox lst)
{
string strId = "";
if (!string.IsNullOrEmpty(hdnSelect.Value))
{
string[] list = hdnSelect.Value.Split(',');
for (int i = 0; i < list.Length; i++)
{
string selectedItemValue = Convert.ToString(lst.Items[Convert.To Int32(list[i])].Value);
if (!string.IsNullOrEmpty(selectedItemValue) &amp;amp;amp;&amp;amp;amp; selectedItemValue != "0")
{
if (strId != "")
{
strId += "," + selectedItemValue;
}
else
{
strId = selectedItemValue;
}
}
}
}
return strId;
}

Step 5. Set Selected Item value on server side.


setSelectedListBoxBackColor("10,12", ddlSearchFigure, hdnSelectedFigureId);
/// <summary>
/// this function user for set change listbox selected item color using JavaScript function : Develop By Sandeep Bhadauriya on 4th Jan 2013
/// </summary>
/// <param name="selectedId">Selecte Item id from database</param>
/// <param name="lstBox">ListBox id</param>
/// <param name="hdnSelctedItem">hdn Filed Id</param>
public void setSelectedListBoxBackColor(string selectedId, ListBox lstBox, HiddenField hdnSelctedItem)
{
string[] strList = selectedId.Split(',');
string selectedIndx = "";
foreach (string lstId in strList)
{
if (lstBox.Items.FindByValue(Convert.ToString(lstId)) != null)
{
int intIndex = lstBox.Items.IndexOf(lstBox.Items.FindByValue (Convert.ToString(lstId)));
if (!string.IsNullOrEmpty(selectedIndx))
{
selectedIndx = selectedIndx + "," + intIndex.ToString();
}
else
{
selectedIndx = intIndex.ToString();
}
}
}
if (!string.IsNullOrEmpty(selectedIndx))
{
hdnSelctedItem.Value = selectedIndx;
ScriptManager.RegisterStartupScript(Page, Page.GetType(), "str", "selectedItem('" + lstBox.ClientID + "','" + hdnSelctedItem.Value + "')", true);
}
}

Step 6. When page is post back that time Re-Set List Box selected Item.

$(document).ready(function()
{
//For ddlSearchFigure ListBox Start
var hdnid = document.getElementById("<%= hdnSelectedFigureId.ClientID%>").value;
var list = '<%= ddlSearchFigure.ClientID%>';
selectedItem(list, hdnid);
//For ddlSearchFigure ListBox End
}

No comments

Leave a Reply


5 − = 2

Categories