PDA

View Full Version : MultiCombo



plok77
Jul 07, 2021, 8:38 AM
Ext.NET v5 Web Forms had a MultiCombo control (https://examples5.ext.net/#/Form/ComboBox/MultiCombo) which operated like a combo box but with multi-select capabilities. What's the equivalent to this in Ext.NET v7.x?

Thanks

Paul

fabricio.murta
Jul 08, 2021, 5:29 AM
Hello, Paul!

It would be the Ext JS's Tag Field (https://docs.sencha.com/extjs/7.3.1/classic/Ext.form.field.Tag.html).

You can try the deprecated multiSelect="true", but that's going to be removed in a future release without further notice, so it doesn't sound safe to rely on it.

Page View


@page
@model ExtNet7WebPages_NuGet.Pages.Forums._6._3._0_2.t631 61_comboBoxMultiSelectModel
@{ Layout = null; }

<!DOCTYPE html>

<html>
<head>
<title>
63161 - ComboBox for multiple selection
</title>
</head>
<body>
<h1>
MultiSelect alternative to Ext.NET 7
</h1>

<p>
This is a simple and pure combo box
</p>
<ext-comboBox fieldLabel="Simple combo" displayField="text" valueField="id">
<store>
<ext-store data="@Model.ComboData" />
</store>
</ext-comboBox>

<p>
The <code>x-multiSelect</code> property forces passing <code>multiSelect: true</code>
to the rendered scripts thus using the deprecated setting. This may stop working
at any moment without previous notice and its current implementation is not
guaranteed to work 100%.
</p>
<ext-comboBox fieldLabel="Deprecated combo" displayField="text" valueField="id" x-multiSelect="true">
<store>
<ext-store data="@Model.ComboData" />
</store>
</ext-comboBox>

<p>
The <code>ext-tagField</code> component is an extension of the <code>ext-comboBox</code>
that properly implements multiple selection.
</p>
<ext-tagField fieldLabel="TagField combo" displayField="text" valueField="id">
<store>
<ext-store data="@Model.ComboData" />
</store>
</ext-tagField>
</body>
</html>


Model


using System.Collections.Generic;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace ExtNet7WebPages_NuGet.Pages.Forums._6._3._0_2
{
public class t63161_comboBoxMultiSelectModel : PageModel
{
public List<object> ComboData = new List<object>()
{
new { id = 1, text = "One"},
new { id = 2, text = "Two"},
new { id = 3, text = "Three"},
new { id = 4, text = "Four"},
new { id = 5, text = "Five"},
new { id = 6, text = "Six"},
new { id = 7, text = "Seven"},
new { id = 8, text = "Eight"},
new { id = 9, text = "Nine"},
new { id = 10, text = "Ten"},
new { id = 11, text = "Eleven"}
};

public void OnGet()
{
}
}
}


Hope this helps!

plok77
Jul 08, 2021, 9:58 AM
Thanks, we'll take a look at the Tag component and see if it meets our needs.