The ListBox Control offers a graphical interface for presenting a collection of items, allowing users to choose one or more items. It enables the display of multiple columns, which can include various elements such as images and controls.
ListBox Control Creation in C#
To generate the ListBox, we will employ two methods within Windows Form. The ListBox control can be crafted by either utilizing the Forms Designer during the design phase or by employing the ListBox class to generate the control dynamically during runtime.
ListBox Creation at the time of the designing
In our initial method, we will generate the ListBox control during the design phase using Windows Forms.
To generate the ListBox control, we can easily drag the ListBox component from the toolbox and drop it onto the Form. Once the Listbox is successfully added, the Form's appearance will resemble the illustration below. Subsequently, we can adjust the size of the ListBox by dragging its edges with the mouse and proceed to configure its properties and events accordingly.
The <style> element consists of a stylish diagram with a background created using a linear gradient starting from #374151 to #1f2937. The diagram is enclosed in a container with a border radius of 12px, padding of 40px, and a margin of 20px on the top and bottom. The contents are centered within this container.
Within the diagram, there is an icon represented by the class placeholder-icon, which has a font size of 3rem and a margin of 10px at the bottom.
The text within the diagram is styled using the class placeholder-text, colored in #9ca3af, and has a font size of 1rem.
Dynamically approach to create the ListBox
The ListBox class displays the ListBox control within a Windows form. To dynamically generate a ListBox during runtime, the initial step involves instantiating the ListBox class, configuring its properties, and subsequently adding the ListBox object to the Form Control.
To start the process of generating a Dynamic ListBox, we will initiate an object of the ListBox class.
To instantiate a ListBox object, the following code snippet should be implemented:
ListBox List1 = new ListBox();
In the succeeding stage, we are going to configure the attributes of the ListBox control. To achieve this, we will write the subsequent code. Within the property, we will specify the Location, width, height, background color, foreground color, name, and font properties of the ListBox, demonstrated as follows:
ListBox box = new ListBox();
box.Location = new Point(300, 110);
box.Size = new Size(160, 103);
box.ForeColor = Color.Purple;
box.Items.Add(765);
box.Items.Add(875);
box.Items.Add(345);
In the third step, after configuring the properties of the ListBox control, we proceed by including the ListBox in the Form. This involves employing the Form.Controls.Add method, through which the ListBox control is appended to the Form's collection of controls and will be visible on the Form based on its specified position and dimensions.
// Now we will add ListBox control
// to the form
this.Controls.Add(box);
Now, we are going to create a script to insert an item into the ListBox control and display it within the list.
Example:
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;
namespace WindowsFormsApp2
{
public partial class Form1: Form
{
public Form1()
{
InitializeComponent();
}
private void Form1_Load(object sender, EventArgs e)
{
ListBox box = new ListBox();
box.Location = new Point(300, 110);
box.Size = new Size(160, 103);
box.ForeColor = Color.Purple;
box.Items.Add(765);
box.Items.Add(875);
box.Items.Add(345);
// Now we will add ListBox control
// to the form
this.Controls.Add(box);
}
}
}
Output:
The <style> element defines a CSS class for a diagram with specific styling properties. This class includes a background with a gradient color, rounded corners, padding, margin, and center-aligned text. Additionally, it contains a smaller icon with a margin below it and text with a specific color and font size. This class can be applied to elements to create visually appealing diagrams within a webpage.
Now let's consider another instance of generating a ListBox item dynamically.
For this task, you will proceed with following identical steps as outlined in the previous code.
Create an instance of the ListBox class by implementing the following code snippet:
ListBox ListItem = new ListBox();
In the following step, we are going to specify the attributes of the ListBox control. This involves defining the code for its position, dimensions, and other relevant characteristics.
ListItem.Location = new System.Drawing.Point(15, 15);
ListItem.Name = "ListItem";
ListItem.Size = new System.Drawing.Size(350, 400);
ListItem.BackColor = System.Drawing.Color.Orange;
ListItem.ForeColor = System.Drawing.Color.Black;
Step 3. Next, we are going to insert the item into the ListBox dynamically by implementing the following code snippet.
ListItem.Items.Add("Vaishali Tyagi");
ListItem.Items.Add("Samlesh Tyagi");
ListItem.Items.Add("Preeti Tyagi");
ListItem.Items.Add("Yshakannka Tyagi");
In the following stage, we will incorporate the ListBox into the Form. To achieve this, we will utilize the Forms.Controls.Add method. This method facilitates the addition of ListBox controls to the Forms control, enabling them to be displayed on the Form according to the control's dimensions and position.
this.Controls.Add(ListItem);
Now, we are going to develop a code in C# to generate the ListBox control within a Windows Form.
Example 2.
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;
namespace WindowsFormsApp2
{
public partial class Form1: Form
{
public Form1()
{
InitializeComponent();
}
ListBox ListItem = new ListBox();
private void Form1_Load(object sender, EventArgs e)
{
ListItem.Location = new System.Drawing.Point(15, 15);
ListItem.Name = "ListItem";
ListItem.Size = new System.Drawing.Size(350, 400);
ListItem.BackColor = System.Drawing.Color.Orange;
ListItem.ForeColor = System.Drawing.Color.Black;
ListItem.Items.Add("Vaishali Tyagi");
ListItem.Items.Add("Samlesh Tyagi");
ListItem.Items.Add("Preeti Tyagi");
ListItem.Items.Add("Yshakannka Tyagi");
this.Controls.Add(ListItem);
}
}
}
OutPut:
The <style> section displays a CSS code snippet for styling a placeholder diagram. This code includes a linear gradient background, border radius, padding, margin, and text alignment properties. Within the diagram, there is a placeholder icon with specific styling for font size and margin, as well as placeholder text with defined color and font size. </style>
Explanation of the Above Code
Properties of ListBox in C#
ListBox Name Property
The name attribute signifies the distinct identifier for the ListBox controls. This identifier is essential for interacting with the controls within the codebase. The following code snippet demonstrates how to assign and retrieve the name associated with the text of the ListBox control.
ListItem.Name = "ListItem";
Location, Height, Width and Size property of ListBox
The Location attribute holds a coordinate point indicating the initial position of the ListBox within the Form. Additionally, the Left and Top attributes can be employed to specify the control's position relative to the top-left corner of the Form.
The dimensions: The size attribute indicates the dimensions of the control. Instead of size, we can opt for the width and height attributes. To achieve this, the code below will be implemented to define the position, height, and width attributes of the ListBox control.
ListItem.Location = new System.Drawing.Point(15, 15);
ListItem.Size = new System.Drawing.Size(350, 400);
Font of ListBox
The font property displays the font of the text within the ListBox control. Upon clicking on the font property within the properties window, we are presented with details such as the Font name, Size, and other font-related options. To dynamically set the Font property during runtime, the following code snippet can be utilized.
ListItem.Font = new Font("Georgia", 16);
Background Color and Foreground Color of the ListBox
To define the background and text color of the ListBox, we make use of the BackColor and Forecolor attributes. When these attributes are selected within the property panel, a color-dialog box will be displayed.
For this, we will write the following code:
ListItem.BackColor = System.Drawing.Color.Orange;
ListItem.ForeColor = System.Drawing.Color.Black;
Creating an Application in C# using the ListBox
Here we will insert the item into the ListBox, delete the item, and then display them in the GridView.
For developing the application, we will create a User Interface that includes two listboxes (listbox1 and listbox2), a set of five buttons with various functions such as transferring data from the first Listbox to the second Listbox, removing data, adding all items, removing all items, finalizing the selection, and a GridView to display the finalized data.
To create the Graphical User Interface, we will proceed with the subsequent steps:
In the initial step, we will initiate a fresh project to start the development process; we will proceed with the following steps:
Select New->Project option, as illustrated in the screenshot provided below.
The <style> element is displayed using the following CSS styles:
.placeholder-diagram { The design includes a linear gradient background with a border radius of 12px, a padding of 40px, a margin of 20px from the top and bottom, and text alignment at the center. }
.placeholder-diagram .placeholder-icon { The icon is formatted with a font size of 3rem and a margin of 10px below it. }
.placeholder-diagram .placeholder-text { The text is styled with a color of #9ca3af and a font size of 1rem. }
Following that, a new window will appear, prompting us to choose Visual C# -> Windows Form Application -> Project Name (AddRemoveCreation). Proceed by clicking on the "OK" button, as depicted in the screenshot below.
The CSS code snippet below depicts the styling for a placeholder diagram:
.placeholder-diagram { background: linear-gradient(135deg, #374151 0%, #1f2937 100%); border-radius: 12px; padding: 40px; margin: 20px 0; text-align: center; }
.placeholder-diagram .placeholder-icon { font-size: 3rem; margin-bottom: 10px; }
.placeholder-diagram .placeholder-text { color: #9ca3af; font-size: 1rem; }
Following that, a form will be generated, as illustrated in the screenshot below:
The CSS code snippet below demonstrates the styling of a placeholder diagram:
.placeholder-diagram { background: linear-gradient(135deg, #374151 0%, #1f2937 100%); border-radius: 12px; padding: 40px; margin: 20px 0; text-align: center; }
.placeholder-diagram .placeholder-icon { font-size: 3rem; margin-bottom: 10px; }
.placeholder-diagram .placeholder-text { color: #9ca3af; font-size: 1rem; }
In the subsequent stage, we will proceed by dragging and dropping the ListBox control from the toolbox. Our objective is to add two ListBoxes named ListBox1 and ListBox2, along with five buttons: Add, Remove, Add All, Remove All, and Finalize.
The <style> element is styled with a linear gradient background, a border-radius of 12px, 40px padding, and centered text alignment within a diagram placeholder. The icon inside the placeholder is set to a font size of 3rem with a 10px bottom margin, while the text color is #9ca3af and the font size is 1rem.
In the following stage, we will modify the text and label of the button by right-clicking on the button, selecting properties, and updating the text name as indicated in the screenshot below:
The CSS code snippet below illustrates a placeholder diagram with a background gradient, border radius, padding, margin, and centered alignment. The placeholder includes an icon with a font size of 3rem and a slight margin bottom. Additionally, the placeholder text is styled with a color of #9ca3af and a font size of 1rem.
Upon selecting properties, the property window will appear, allowing us to modify both the button's name and the text displayed on the button, as illustrated in the screenshot below:
The CSS code snippet below defines the styling for a placeholder diagram. The diagram has a background with a gradient color, rounded corners, padding, margin, and text alignment properties. The placeholder icon within the diagram is styled with a specific font size and margin, while the text is styled with a color and font size.
Upon completion of the previous step, the information will be displayed upon selecting the finalize button within the GridView. To accomplish this, we will proceed by selecting Data followed by GridView.
The CSS code snippet below illustrates the styling for a placeholder diagram. The diagram includes a background gradient, border radius, padding, margin, and text alignment properties. Additionally, it features an icon with a specific font size and margin, as well as text with a defined color and font size.
Following this step, the webpage will appear as demonstrated below:
The CSS code snippet below illustrates the styling for a placeholder diagram:
.placeholder-diagram { background: linear-gradient(135deg, #374151 0%, #1f2937 100%); border-radius: 12px; padding: 40px; margin: 20px 0; text-align: center; }
.placeholder-diagram .placeholder-icon { font-size: 3rem; margin-bottom: 10px; }
.placeholder-diagram .placeholder-text { color: #9ca3af; font-size: 1rem; }
Now we will show how to add the data in the listbox1 and import the data in ListBox2.
For this, we will do the below code:
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;
namespace AddRemoveCreation
{
public partial class Form1: Form
{
//create an object dtCourse of the DataTable.
private DataTable dtCourse = new DataTable();
//create an object dtSelectedCourse of the DataTable.
private DataTable dtSelectedCourse = new DataTable();
public Form1()
{
//InitializeComponent() is used to initialize the form.
InitializeComponent();
}
private void Form1_Load(object sender, EventArgs e)
{
//call the function at the form loading
FillCouseTable();
SelectedCourseTable();
//Add the value in the DataSource of the ListBox1
listBox1.DataSource = dtCourse;
//listbox1.DisplayMember is used to decide which column we want to show in the final output
listBox1.DisplayMember = "CourseName";
//dtSelectedCourse datatable add the value in the listbox2 datasource
listBox2.DataSource = dtSelectedCourse;
listBox2.DisplayMember = "CourseName";
}
//FillCourseTable() function is declare to add the data in the datatable with the help of the data object
private void FillCouseTable()
{
//adding the column name
dtCourse.Columns.Add("CourseID", typeof(int));
dtCourse.Columns.Add("CourseName");
dtCourse.Columns.Add("CourseDuration");
//add the data in the dtCourse table
dtCourse.Rows.Add(1, "Advance OOPS", "4 Months");
dtCourse.Rows.Add(2, "Data Structure", "5 Months");
dtCourse.Rows.Add(3, "Java", "6 Months");
dtCourse.Rows.Add(4, "C++", "3 Months");
dtCourse.Rows.Add(5, "C", "2 Months");
}
//SelectedCourseTable() function is declare which contain the column name of the data table.
private void SelectedCourseTable()
{
dtSelectedCourse.Columns.Add("CourseID", typeof(int));
dtSelectedCourse.Columns.Add("CourseName");
dtSelectedCourse.Columns.Add("CourseDuration");
}
//After clicking on the add button function Addbtn_Click() is create which contain the functionality of Add button
private void Addbtn_Click(object sender, EventArgs e)
{
//if the condition applies if the listbox1 contain the item greater than zero then this will import the data in the listbox2 and delete the data from the listbox1
if(listBox1.Items.Count>0)
{
//Here we are improting the data to the dtSelectedCourse datatable from the dtcourse datatable
dtSelectedCourse.ImportRow(dtCourse.Rows[listBox1.SelectedIndex]);
dtCourse.Rows[listBox1.SelectedIndex].Delete();
}
}
Here we will demonstrate that listbox1 holds the data.
The CSS code snippet below demonstrates the styling for a placeholder diagram. The diagram includes a background with a linear gradient, border radius, padding, margin, and text alignment. Additionally, there are specifications for the icon and text within the diagram.
Once the Add button is clicked, information will be appended to listbox2 and removed from listbox1.
The <style> CSS class defines a placeholder diagram with a linear gradient background, rounded corners, padding, and centered alignment. It includes a placeholder icon with a size of 3rem and placeholder text styled in a color of #9ca3af and a font size of 1rem. </style>
Remove the data from the ListBox
Here we will demonstrate the process of deleting data from listbox2.
For this, we will write the below code:
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;
namespace AddRemoveCreation
{
public partial class Form1: Form
{
//create an object dtCourse of the DataTable.
private DataTable dtCourse = new DataTable();
//create an object dtSelectedCourse of the DataTable.
private DataTable dtSelectedCourse = new DataTable();
public Form1()
{
//InitializeComponent() is used to initialize the form.
InitializeComponent();
}
private void Form1_Load(object sender, EventArgs e)
{
//call the function at the form loading
FillCouseTable();
SelectedCourseTable();
//Add the value in the DataSource of the ListBox1
listBox1.DataSource = dtCourse;
//listbox1.DisplayMember is used to decide which column we want to show in the final output
listBox1.DisplayMember = "CourseName";
//dtSelectedCourse datatable add the value in the listbox2 datasource
listBox2.DataSource = dtSelectedCourse;
listBox2.DisplayMember = "CourseName";
}
//FillCourseTable() function is declare to add the data in the datatable with the help of the data object
private void FillCouseTable()
{
//adding the column name
dtCourse.Columns.Add("CourseID", typeof(int));
dtCourse.Columns.Add("CourseName");
dtCourse.Columns.Add("CourseDuration");
//add the data in the dtCourse table
dtCourse.Rows.Add(1, "Advance OOPS", "4 Months");
dtCourse.Rows.Add(2, "Data Structure", "5 Months");
dtCourse.Rows.Add(3, "Java", "6 Months");
dtCourse.Rows.Add(4, "C++", "3 Months");
dtCourse.Rows.Add(5, "C", "2 Months");
}
//SelectedCourseTable() function is declare which contain the column name of the data table.
private void SelectedCourseTable()
{
dtSelectedCourse.Columns.Add("CourseID", typeof(int));
dtSelectedCourse.Columns.Add("CourseName");
dtSelectedCourse.Columns.Add("CourseDuration");
}
//After clicking on the Remove button Removebtn_Click() function is created where we remove the element from the listbox2 and import the data in the data table.
private void Removebtn_Click(object sender, EventArgs e)
{
//for removing the element we apply condition if listbox contain the element greater than zero
if (listBox2.Items.Count > 0)
{
//here the data will be import to the datatable dtcourse from the dtSelected Database.
dtCourse.ImportRow(dtSelectedCourse.Rows[listBox2.SelectedIndex]);
//All data will be deleted from the datatable dtSelectedCourse
dtSelectedCourse.Rows[listBox2.SelectedIndex].Delete();
}
}
}
}
Before deleting the data, all the information is stored in listbox2 while listbox1 is empty. The resulting display will appear as indicated below:
The placeholder visual representation is styled with a background gradient and rounded corners. It includes an icon and descriptive text to provide a clear visual cue.
After selecting the remove option, information will be removed from listbox 2 and transferred to listbox1, as depicted in the image below:
The CSS code snippet below illustrates the styling for a placeholder diagram:
.placeholder-diagram { background: linear-gradient(135deg, #374151 0%, #1f2937 100%); border-radius: 12px; padding: 40px; margin: 20px 0; text-align: center; }
.placeholder-diagram .placeholder-icon { font-size: 3rem; margin-bottom: 10px; }
.placeholder-diagram .placeholder-text { color: #9ca3af; font-size: 1rem; }
Adding the whole data in one go in the ListBox
To transfer all the data from listbox1 to listbox2, the code snippet below can be used:
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;
namespace AddRemoveCreation
{
public partial class Form1: Form
{
//create an object dtCourse of the DataTable.
private DataTable dtCourse = new DataTable();
//create an object dtSelectedCourse of the DataTable.
private DataTable dtSelectedCourse = new DataTable();
public Form1()
{
//InitializeComponent() is used to initialize the form.
InitializeComponent();
}
private void Form1_Load(object sender, EventArgs e)
{
//call the function at the form loading
FillCouseTable();
SelectedCourseTable();
//Add the value in the DataSource of the ListBox1
listBox1.DataSource = dtCourse;
//listbox1.DisplayMember is used to decide which column we want to show in the final output
listBox1.DisplayMember = "CourseName";
//dtSelectedCourse datatable add the value in the listbox2 datasource
listBox2.DataSource = dtSelectedCourse;
listBox2.DisplayMember = "CourseName";
}
//FillCourseTable() function is declare to add the data in the datatable with the help of the data object
private void FillCouseTable()
{
//adding the column name
dtCourse.Columns.Add("CourseID", typeof(int));
dtCourse.Columns.Add("CourseName");
dtCourse.Columns.Add("CourseDuration");
//add the data in the dtCourse table
dtCourse.Rows.Add(1, "Advance OOPS", "4 Months");
dtCourse.Rows.Add(2, "Data Structure", "5 Months");
dtCourse.Rows.Add(3, "Java", "6 Months");
dtCourse.Rows.Add(4, "C++", "3 Months");
dtCourse.Rows.Add(5, "C", "2 Months");
}
//SelectedCourseTable() function is declare which contain the column name of the data table.
private void SelectedCourseTable()
{
dtSelectedCourse.Columns.Add("CourseID", typeof(int));
dtSelectedCourse.Columns.Add("CourseName");
dtSelectedCourse.Columns.Add("CourseDuration");
}
//After clicking on the AddAll button AddAllbtn_Click() function is create.
private void AddAllbtn_Click(object sender, EventArgs e)
{
//if condition is apply this will check if the listbox contain the element greater than zero.
if(listBox1.Items.Count>0)
{
//dtCourse.Rows.Count will count the element and assign the value in the count variable.
int count = dtCourse.Rows.Count;
//for condition is apply this will going upto the count
for(int i=count-1;i>=0;i--)
{
//dtCourse.Rows[listbox1.SelectedIndex] with the help of this data will be import to the dtSelected datatable.
dtSelectedCourse.ImportRow(dtCourse.Rows[listBox1.SelectedIndex]);
//with this code data eill be delete from the dtCourse datatable.
dtCourse.Rows[listBox1.SelectedIndex].Delete();
}
}
}
}
}
Data in the listbox1 is shown as below:
The styling for the placeholder diagram includes a background with a linear gradient, border radius, padding, margin, and center alignment. Within this diagram, there is an icon with a specific font size and margin, as well as text with a distinct color and font size.
After composing this code, the AddAll button will function correctly, as illustrated:
The <style> element is styled with a linear gradient background and a border-radius of 12px. It also includes padding of 40px, a margin of 20px vertically, and is centered within the container. Inside, there is an icon with a font size of 3rem and a text with a font size of 1rem, both styled with colors to match the design.
Remove all the data from the ListBox
Here we are going to clear out all the information from listbox2 and transfer all the data into listbox1.
To clear all the data from the Listbox, the code snippet below can be used:
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System. Data;
using System. Drawing;
using System. Linq;
using System. Text;
using System.Threading.Tasks;
using System.Windows.Forms;
namespace AddRemoveCreation
{
public partial class Form1: Form
{
//create an object dtCourse of the DataTable.
private DataTable dtCourse = new DataTable();
//create an object dtSelectedCourse of the DataTable.
private DataTable dtSelectedCourse = new DataTable();
public Form1()
{
//InitializeComponent() is used to initialize the form.
InitializeComponent();
}
private void Form1_Load(object sender, EventArgs e)
{
//call the function at the form loading
FillCouseTable();
SelectedCourseTable();
//Add the value in the DataSource of the ListBox1
listBox1.DataSource = dtCourse;
//listbox1.DisplayMember is used to decide which column we want to show in the final output
listBox1.DisplayMember = "CourseName";
//dtSelectedCourse datatable add the value in the listbox2 datasource
listBox2.DataSource = dtSelectedCourse;
listBox2.DisplayMember = "CourseName";
}
//FillCourseTable() function is declare to add the data in the datatable with the help of the data object
private void FillCouseTable()
{
//adding the column name
dtCourse.Columns.Add("CourseID", typeof(int));
dtCourse.Columns.Add("CourseName");
dtCourse.Columns.Add("CourseDuration");
//add the data in the dtCourse table
dtCourse.Rows.Add(1, "Advance OOPS", "4 Months");
dtCourse.Rows.Add(2, "Data Structure", "5 Months");
dtCourse.Rows.Add(3, "Java", "6 Months");
dtCourse.Rows.Add(4, "C++", "3 Months");
dtCourse.Rows.Add(5, "C", "2 Months");
}
//SelectedCourseTable() function is declare which contain the column name of the data table.
private void SelectedCourseTable()
{
dtSelectedCourse.Columns.Add("CourseID", typeof(int));
dtSelectedCourse.Columns.Add("CourseName");
dtSelectedCourse.Columns.Add("CourseDuration");
}
//After clicking on the Remove button RemoveAllbtn_Click() function is create.
private void RemoveAllbtn_Click(object sender, EventArgs e)
{
//if the condition is applied, this will count the listbox2 containing the value.
if (listBox2.Items.Count > 0)
{
int count = dtSelectedCourse.Rows.Count;
//for loop is apply which will go upto the greater than zero
for (int i = count - 1; i >= 0; i--)
{
//dtCourse datatable import the data from the dtSelectedCourse datatable.
dtCourse.ImportRow(dtSelectedCourse.Rows[listBox2.SelectedIndex]);
//data will be deleted from the dtSelectedCourse datatable.
dtSelectedCourse.Rows[listBox2.SelectedIndex].Delete();
}
}
}
}
}
The <style> CSS class defines a diagram placeholder with a stylish background gradient, rounded corners, padding, margin, and centered alignment. Inside the diagram, there is an icon with a size of 3rem and text with a color of #9ca3af and a font size of 1rem. This class provides a visually appealing way to structure placeholders in web development projects.
Showing the data of the ListBox in the GridView
Here we will utilize GridView to display all the information from ListBox2 once the finalize button is clicked.
To display the data within the GridView, the following code snippet will be implemented:
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System. Data;
using System. Drawing;
using System. Linq;
using System. Text;
using System.Threading.Tasks;
using System.Windows.Forms;
namespace AddRemoveCreation
{
public partial class Form1: Form
{
//create an object dtCourse of the DataTable.
private DataTable dtCourse = new DataTable();
//create an object dtSelectedCourse of the DataTable.
private DataTable dtSelectedCourse = new DataTable();
public Form1()
{
//InitializeComponent() is used to initialize the form.
InitializeComponent();
}
private void Form1_Load(object sender, EventArgs e)
{
//call the function at the form loading
FillCouseTable();
SelectedCourseTable();
//Add the value in the DataSource of the ListBox1
listBox1.DataSource = dtCourse;
//listbox1.DisplayMember is used to decide which column we want to show in the final output
listBox1.DisplayMember = "CourseName";
//dtSelectedCourse datatable add the value in the listbox2 datasource
listBox2.DataSource = dtSelectedCourse;
listBox2.DisplayMember = "CourseName";
}
//FillCourseTable() function is declare to add the data in the datatable with the help of the data object
private void FillCouseTable()
{
//adding the column name
dtCourse.Columns.Add("CourseID", typeof(int));
dtCourse.Columns.Add("CourseName");
dtCourse.Columns.Add("CourseDuration");
//add the data in the dtCourse table
dtCourse.Rows.Add(1, "Advance OOPS", "4 Months");
dtCourse.Rows.Add(2, "Data Structure", "5 Months");
dtCourse.Rows.Add(3, "Java", "6 Months");
dtCourse.Rows.Add(4, "C++", "3 Months");
dtCourse.Rows.Add(5, "C", "2 Months");
}
//SelectedCourseTable() function is declare which contain the column name of the data table.
private void SelectedCourseTable()
{
dtSelectedCourse.Columns.Add("CourseID", typeof(int));
dtSelectedCourse.Columns.Add("CourseName");
dtSelectedCourse.Columns.Add("CourseDuration");
}
//Clicking on the Finalize button Finalizebtn_Click() function is create
private void Finalizebtn_Click(object sender, EventArgs e)
{
// create an object of the DialoResult where we will show the message with the help of the MessageBox.Show() function.
DialogResult dialog=MessageBox.Show("Are you sure you want to finalize the selected course", "Confirmation Message", MessageBoxButtons.YesNo, MessageBoxIcon.Question);
//Condition is apply if the result is yes.
if(dialog==DialogResult.Yes)
{
//Shows the result of the dtSelectedCourse datatable to GridView.
dataGridView1.DataSource = dtSelectedCourse;
//to stop the editing we enable the datagridview to false.
dataGridView1.Enabled = false;
//With this code we apply the visiblity of the column index 0 to false.
dataGridView1.Columns[0].Visible = false;
//hide the header value of the row
dataGridView1.RowHeadersVisible = false;
}
else
{
//If the result no, then shows the message with the help of the MessageBox.Show().
MessageBox.Show("Please Select Atleast one course","Information Message", MessageBoxButtons.YesNo, MessageBoxIcon.Information);
}
}
}
}
Upon selecting the Finalize button, a confirmation message will be shown.
The CSS code snippet below shows a placeholder diagram styled with a linear gradient background, border radius, padding, margin, and centered text alignment. The placeholder icon has a font size of 3rem and a margin bottom, while the placeholder text is styled in a color of #9ca3af with a font size of 1rem.
Upon selecting "yes," the combined data will be presented in the GridView, as illustrated in the screenshot below: