Multiple selection in ListBox c#
Multiple Selection
10 Aug 201710 minutes to read
Allow multiple selection
ListBox widget allows you to select multiple values from the list Items using AllowMultiSelection property. You can select multiple list items along with Control key and Shift key press. To select multiple values we need to set AllowMultiSelection value to true.
Configuring multiple selection
The following steps explain you the configuration of the AllowMultiSelection for a ListBox.
Add the below code in your view page to render the ListBox
Select a skill
@{List indexList = new List[];
indexList.Add[0];
indexList.Add[3];
} @Html.EJ[].ListBox["listBoxSample"].Width["240"].Datasource[[IEnumerable]ViewBag.datasource].ListBoxFields[df => df.Text["text"]].SelectedItemList[indexList].AllowMultiSelection[true]
Output for ListBox control that provides multiple selection is as follows.
Multiple selection through index
You can select the list of items from the ListBox using selectedItemList property. Its data type is array. To achieve this, you need to set true to AllowMultiSelection property in ListBox.
The following steps explains you the configuration of SelectedItemList property in ListBox
Add the below code in your view page to render the ListBox with allow multiple selection enabled.
// Add the following code in View page to configure ListBox widget
Select a skill
@{List indexList = new List[];
indexList.Add[1];
indexList.Add[4];
}
@Html.EJ[].ListBox["listBoxSample"].Width["240"].Datasource[[IEnumerable]ViewBag.datasource].ListBoxFields[df
=> df.Text["text"]].SelectedIndices[indexList].AllowMultiSelection[true]
// Add the following code to add list items in the controller page
public class SkillSet
{
public string text { get; set; }
}
public ActionResult Index[]
{
List skill = new List[];
skill.Add[new SkillSet { text = "ASP.NET" }];
skill.Add[new SkillSet { text = "ActionScript" }];
skill.Add[new SkillSet { text = "Basic" }];
skill.Add[new SkillSet { text = "C++" }];
skill.Add[new SkillSet { text = "C#" }];
skill.Add[new SkillSet { text = "dBase" }];
skill.Add[new SkillSet { text = "Delphi" }];
skill.Add[new SkillSet { text = "ESPOL" }];
skill.Add[new SkillSet { text = "F#" }];
skill.Add[new SkillSet { text = "FoxPro" }];
skill.Add[new SkillSet { text = "Java" }];
skill.Add[new SkillSet { text = "J#" }];
skill.Add[new SkillSet { text = "Lisp" }];
skill.Add[new SkillSet { text = "Logo" }];
skill.Add[new SkillSet { text = "PHP" }];
ViewBag.datasource = skill;
return View[];
}
Output of the above steps.
Checkbox Support
Show Checkbox
You can enable the checkbox in the ListBox with this property. The data type of ShowCheckbox value is Boolean type. It maintains multiple selection and gets the checked items on its ListBox client side events.
Defining the Checkbox support
The following steps explains you the configuration of checkbox options in ListBox.
Add the below code in your view page to render the ListBox with checkbox
// Add the following code in View page to configure ListBox widget
Select a skill
@Html.EJ[].ListBox["listBoxSample"].Width["240"].Datasource[[IEnumerable]ViewBag.datasource].ListBoxFields[df => df.Text["text"]].ShowCheckbox[true]
// Add the following code to add list items in the controller page
public class SkillSet
{
public string text { get; set; }
}
public ActionResult Index[]
{
List skill = new List[];
skill.Add[new SkillSet { text = "ASP.NET" }];
skill.Add[new SkillSet { text = "ActionScript" }];
skill.Add[new SkillSet { text = "Basic" }];
skill.Add[new SkillSet { text = "C++" }];
skill.Add[new SkillSet { text = "C#" }];
skill.Add[new SkillSet { text = "dBase" }];
skill.Add[new SkillSet { text = "Delphi" }];
skill.Add[new SkillSet { text = "ESPOL" }];
skill.Add[new SkillSet { text = "F#" }];
skill.Add[new SkillSet { text = "FoxPro" }];
skill.Add[new SkillSet { text = "Java" }];
skill.Add[new SkillSet { text = "J#" }];
skill.Add[new SkillSet { text = "Lisp" }];
skill.Add[new SkillSet { text = "Logo" }];
skill.Add[new SkillSet { text = "PHP" }];
ViewBag.datasource = skill;
return View[];
}
Output of the above steps.
Check All
You can check all the check box in the list by using this property. The data type of CheckAll is Boolean type. To achieve this, set ShowCheckbox property as true.
The following steps explains you the configuration of checkbox options in ListBox.
Add the below code in your view page to render the ListBox with all items checked initially.
// Add the following code in View page to configure ListBox widget
Select a skill
@Html.EJ[].ListBox["listBoxSample"].Width["240"].Datasource[[IEnumerable]ViewBag.datasource].ListBoxFields[df =>
df.Text["text"]] .ShowCheckbox[true].CheckAll[true]
// Add the following code to add list items in the controller page
public class SkillSet
{
public string text { get; set; }
}
public ActionResult Index[]
{
List skill = new List[];
skill.Add[new SkillSet { text = "ASP.NET" }];
skill.Add[new SkillSet { text = "ActionScript" }];
skill.Add[new SkillSet { text = "Basic" }];
skill.Add[new SkillSet { text = "C++" }];
skill.Add[new SkillSet { text = "C#" }];
skill.Add[new SkillSet { text = "dBase" }];
skill.Add[new SkillSet { text = "Delphi" }];
skill.Add[new SkillSet { text = "ESPOL" }];
skill.Add[new SkillSet { text = "F#" }];
skill.Add[new SkillSet { text = "FoxPro" }];
skill.Add[new SkillSet { text = "Java" }];
skill.Add[new SkillSet { text = "J#" }];
skill.Add[new SkillSet { text = "Lisp" }];
skill.Add[new SkillSet { text = "Logo" }];
skill.Add[new SkillSet { text = "PHP" }];
ViewBag.datasource = skill;
return View[];
}
Output of the above steps.
Uncheck All
You can uncheck all the check box in the list by using this property. The data type of UncheckAll is Boolean type. To achieve this, set ShowCheckbox property as true.
Video liên quan