Skip to content

Documentation(856838): Fixed documentation and sample issues in the Blazor ListBox UG #9913

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
kathiravan4982 wants to merge 1 commit into
base: development
Choose a base branch
from
Open

Documentation(856838): Fixed documentation and sample issues in the Blazor ListBox UG #9913

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions blazor-toc.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3215,11 +3215,11 @@
<li> <a href="/blazor/listbox/how-to/add-items">Add/Remove Items</a></li>
<li> <a href="/blazor/listbox/how-to/bind-change-event">Bind Change Events</a></li>
<li> <a href="/blazor/listbox/how-to/enable-scroll">Enable Scroller</a></li>
<li> <a href="/blazor/listbox/how-to/enable-or-disable-items">Enable/Disable ListBox</a>
<li> <a href="/blazor/listbox/how-to/enable-or-disable-items">Enable or Disable ListBox Items</a>
</li>
<li> <a href="/blazor/listbox/how-to/select-items">Select Items</a></li>
<li> <a href="/blazor/listbox/how-to/get-items">Get Items</a></li>
<li> <a href="/blazor/listbox/how-to/filter-listbox">Filter ListBox Data Using TextBox Component</a></li>
<li> <a href="/blazor/listbox/how-to/filter-listbox">Filter ListBox Data Using HTML Input Element</a></li>
</ul>
</li>
<li>
Expand Down
8 changes: 4 additions & 4 deletions blazor/listbox/how-to/add-items.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ Use the [AddItemsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.
new VehicleData { Text = "SSC Ultimate Aero", Id = "Vehicle-04" },
new VehicleData { Text = "Koenigsegg CCR", Id = "Vehicle-05" },
new VehicleData { Text = "McLaren F1", Id = "Vehicle-06" },
new VehicleData { Text = "Aston Martin One- 77", Id = "Vehicle-07" },
new VehicleData { Text = "Aston Martin One-77", Id = "Vehicle-07" },
new VehicleData { Text = "Jaguar XJ220", Id = "Vehicle-08" }
};

Expand Down Expand Up @@ -73,15 +73,15 @@ Use the [RemoveItemAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazo
new VehicleData { Text = "SSC Ultimate Aero", Id = "Vehicle-04" },
new VehicleData { Text = "Koenigsegg CCR", Id = "Vehicle-05" },
new VehicleData { Text = "McLaren F1", Id = "Vehicle-06" },
new VehicleData { Text = "Aston Martin One- 77", Id = "Vehicle-07" },
new VehicleData { Text = "Aston Martin One-77", Id = "Vehicle-07" },
new VehicleData { Text = "Jaguar XJ220", Id = "Vehicle-08" },
new VehicleData{ Text = "Ferrari LaFerrari", Id = "Vehicle-09"},
new VehicleData{ Text = "McLaren P1", Id = "Vehicle-10"}
};

public class VehicleData {
public string Text { get; set; }
public string Id { get; set; }
public string Text { get; set; }
public string Id { get; set; }
}

public List<VehicleData> Item = new List<VehicleData>{
Expand Down
6 changes: 3 additions & 3 deletions blazor/listbox/how-to/bind-change-event.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,13 +29,13 @@ Bind the change event in the listbox [ValueChange](https://help.syncfusion.com/c
new VehicleData { Text = "SSC Ultimate Aero", Id = "Vehicle-04" },
new VehicleData { Text = "Koenigsegg CCR", Id = "Vehicle-05" },
new VehicleData { Text = "McLaren F1", Id = "Vehicle-06" },
new VehicleData { Text = "Aston Martin One- 77", Id = "Vehicle-07" },
new VehicleData { Text = "Aston Martin One-77", Id = "Vehicle-07" },
new VehicleData { Text = "Jaguar XJ220", Id = "Vehicle-08" }
};

public class VehicleData {
public string Text { get; set; }
public string Id { get; set; }
public string Text { get; set; }
public string Id { get; set; }
}

private void change(ListBoxChangeEventArgs<string[], VehicleData> args)
Expand Down
16 changes: 11 additions & 5 deletions blazor/listbox/how-to/enable-or-disable-items.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,9 @@ control: List Box
documentation: ug
---

# Enable/Disable ListBox in Blazor ListBox Component
# Enable or Disable Items in Blazor ListBox Component

Enable or disable items in the listbox, [EnableItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfListBox-2.html#Syncfusion_Blazor_DropDowns_SfListBox_2_EnableItems_System_Object_System_Boolean_) method can be used. In the following example, the `Bugatti Veyron Super Sport` and `SSC Ultimate Aero` items are disabled by default and by clicking `Enable Items` buttons, the disabled items will be enabled.
Enable or disable items in the listbox, [EnableItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfListBox-2.html#Syncfusion_Blazor_DropDowns_SfListBox_2_EnableItems__1___0_System_Boolean_) method can be used. In the following example, the `Bugatti Veyron Super Sport` and `SSC Ultimate Aero` items are disabled by default and by clicking `Enable Items` button, the disabled items will be enabled.

```cshtml
@using Syncfusion.Blazor.DropDowns
Expand All @@ -20,6 +20,7 @@ Enable or disable items in the listbox, [EnableItems](https://help.syncfusion.co
<ListBoxEvents TValue="string[]" Created="created" TItem="VehicleData"></ListBoxEvents>
</SfListBox>
<SfButton @onclick="enableData" Content="Enable Items"></SfButton>
<SfButton @onclick="disableData" Content="Disable Items"></SfButton>

@code {
SfListBox<string[],VehicleData> ListBoxObj;
Expand All @@ -30,13 +31,13 @@ Enable or disable items in the listbox, [EnableItems](https://help.syncfusion.co
new VehicleData { Text = "SSC Ultimate Aero", Id = "Vehicle-04" },
new VehicleData { Text = "Koenigsegg CCR", Id = "Vehicle-05" },
new VehicleData { Text = "McLaren F1", Id = "Vehicle-06" },
new VehicleData { Text = "Aston Martin One- 77", Id = "Vehicle-07" },
new VehicleData { Text = "Aston Martin One-77", Id = "Vehicle-07" },
new VehicleData { Text = "Jaguar XJ220", Id = "Vehicle-08" }
};

public class VehicleData {
public string Text { get; set; }
public string Id { get; set; }
public string Text { get; set; }
public string Id { get; set; }
}
public string[] Value = new string[] { "Bugatti Veyron Super Sport", "SSC Ultimate Aero" };
private void created(object args)
Expand All @@ -48,6 +49,11 @@ Enable or disable items in the listbox, [EnableItems](https://help.syncfusion.co
{
ListBoxObj.EnableItems(this.Value, true);
}

private void disableData()
{
ListBoxObj.EnableItems(this.Value, false);
}
}

```
Expand Down
6 changes: 3 additions & 3 deletions blazor/listbox/how-to/enable-scroll.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,13 +28,13 @@ In the following sample, the Height of the ListBox is set to 250px to enable scr
new VehicleData { Text = "SSC Ultimate Aero", Id = "Vehicle-04" },
new VehicleData { Text = "Koenigsegg CCR", Id = "Vehicle-05" },
new VehicleData { Text = "McLaren F1", Id = "Vehicle-06" },
new VehicleData { Text = "Aston Martin One- 77", Id = "Vehicle-07" },
new VehicleData { Text = "Aston Martin One-77", Id = "Vehicle-07" },
new VehicleData { Text = "Jaguar XJ220", Id = "Vehicle-08" }
};

public class VehicleData {
public string Text { get; set; }
public string Id { get; set; }
public string Text { get; set; }
public string Id { get; set; }
}
}

Expand Down
6 changes: 3 additions & 3 deletions blazor/listbox/how-to/filter-listbox.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,17 +7,17 @@ control: List Box
documentation: ug
---

# How to Filter Blazor ListBox Data Using TextBox Component
# How to Filter Blazor ListBox Data Using HTML Input Element

This example shows how to filter ListBox data based on input from a TextBox. Bind an input event listener to the TextBox to capture user input and filter the items in the ListBox. Within the event handler, use the [`FilterAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfListBox-2.html#Syncfusion_Blazor_DropDowns_SfListBox_2_FilterAsync_System_Collections_Generic_IEnumerable__1__Syncfusion_Blazor_Data_Query_Syncfusion_Blazor_DropDowns_FieldSettingsModel_) method to update the ListBox items, ensuring that only those matching the input text are included.
This example shows how to filter ListBox data based on input from an HTML input element. Bind an input event listener to the input element to capture user input and filter the items in the ListBox. Within the event handler, use the [`FilterAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfListBox-2.html#Syncfusion_Blazor_DropDowns_SfListBox_2_FilterAsync_System_Collections_Generic_IEnumerable__1__Syncfusion_Blazor_Data_Query_Syncfusion_Blazor_DropDowns_FieldSettingsModel_) method to update the ListBox items, ensuring that only those matching the input text are included. The [`Query`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.Query.html) class is used to define the filtering criteria for the ListBox data.

```cshtml
@using Syncfusion.Blazor
@using Syncfusion.Blazor.DropDowns
@using Syncfusion.Blazor.Data
<label for="filter">Enter Text: </label>
<input type="text" id="filterTextBox" id="filter" @oninput="FilterList" placeholder="Enter text to filter"/>
<input type="text" id="filter" @oninput="FilterList" placeholder="Enter text to filter"/>
<SfListBox @ref="ListBoxRef" TValue="string[]" DataSource="@Vehicles" TItem="VehicleData">
<ListBoxFieldSettings Text="Text" Value="Id" />
</SfListBox>
Expand Down
2 changes: 1 addition & 1 deletion blazor/listbox/how-to/get-items.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ The following example demonstrates the `GetDataByValue` method. In this sample,
new VehicleData { Text = "SSC Ultimate Aero", Id = "Vehicle-04" },
new VehicleData { Text = "Koenigsegg CCR", Id = "Vehicle-05" },
new VehicleData { Text = "McLaren F1", Id = "Vehicle-06" },
new VehicleData { Text = "Aston Martin One- 77", Id = "Vehicle-07" },
new VehicleData { Text = "Aston Martin One-77", Id = "Vehicle-07" },
new VehicleData { Text = "Jaguar XJ220", Id = "Vehicle-08" }
};

Expand Down
8 changes: 4 additions & 4 deletions blazor/listbox/how-to/select-items.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ documentation: ug

# Select Items in Blazor ListBox Component

This example shows how to programmatically select items using the [SelectItemsAsync method](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfListBox-2.html#Syncfusion_Blazor_DropDowns_SfListBox_2_SelectItemsAsync__1___0_System_Boolean_). The first parameter accepts the value or values to select, and the second parameter specifies the selection mode: set it to true to select by the mapped Value field (Text in this example), or false to select by index. Selection is triggered in the Created event to ensure the component is initialized. The `TValue` is `string[]`, which enables multiple selection. Values that do not match any items are ignored.
This example shows how to programmatically select items using the [SelectItemsAsync method](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfListBox-2.html#Syncfusion_Blazor_DropDowns_SfListBox_2_SelectItemsAsync__1___0_System_Boolean_). The first parameter accepts the value or values to select, and the second parameter specifies the selection state: set it to true to select the specified items, or false to deselect them. Selection is triggered in the Created event to ensure the component is initialized. The `TValue` is `string[]`, which enables multiple selection. Values that do not match any items are ignored.

```cshtml
@using Syncfusion.Blazor.DropDowns
Expand All @@ -28,13 +28,13 @@ This example shows how to programmatically select items using the [SelectItemsAs
new VehicleData { Text = "SSC Ultimate Aero", Id = "Vehicle-04" },
new VehicleData { Text = "Koenigsegg CCR", Id = "Vehicle-05" },
new VehicleData { Text = "McLaren F1", Id = "Vehicle-06" },
new VehicleData { Text = "Aston Martin One- 77", Id = "Vehicle-07" },
new VehicleData { Text = "Aston Martin One-77", Id = "Vehicle-07" },
new VehicleData { Text = "Jaguar XJ220", Id = "Vehicle-08" }
};

public class VehicleData {
public string Text { get; set; }
public string Id { get; set; }
public string Text { get; set; }
public string Id { get; set; }
}
public string[] Value = new string[] { "Bugatti Chiron" };
private async Task created(object args)
Expand Down