Componente MultiSelect — sgcHTML | eSeGeCe

MultiSelect

TsgcHTMLComponent_MultiSelect — renderize um dropdown de seleção múltipla pesquisável com chips, opções agrupadas e vinculação a dataset, em Delphi, C++ Builder e .NET.

Visão geral

TsgcHTMLComponent_MultiSelect

Um controle dropdown que mantém as seleções como chips. Adicione opções (ou vincule um dataset), opcionalmente as agrupe e limite as seleções, então leia a propriedade HTML.

Classe do componente

TsgcHTMLComponent_MultiSelect

Renderiza

Dropdown Bootstrap + chips (widget autocontido)

Família

Formulários & Entradas

Linguagens

Delphi, C++ Builder, .NET

QuickStart

Adicione opções, renderize

Defina Placeholder, FieldName e Size, adicione opções com AddOption (ou vincule com LoadFromDataSet), então leia HTML.

uses
  sgcHTML_Component_MultiSelect;

var
  oMulti: TsgcHTMLComponent_MultiSelect;
begin
  oMulti := TsgcHTMLComponent_MultiSelect.Create(nil);
  try
    oMulti.FieldName := 'tags';
    oMulti.Placeholder := 'Select tags';
    oMulti.MaxSelections := 3;
    oMulti.Size := mssLarge;

    oMulti.AddOption('js', 'JavaScript', True);
    oMulti.AddOption('py', 'Python');
    oMulti.AddOption('pas', 'Pascal');

    WebModule.Response := oMulti.HTML;   // dropdown + chips + hidden inputs
  finally
    oMulti.Free;
  end;
end;

// Or fill it straight from a dataset:
oMulti.LoadFromDataSet(qryTags, 'Code', 'Name', 'IsSelected');

// includes: sgcHTML_Component_MultiSelect.hpp

TsgcHTMLComponent_MultiSelect *oMulti = new TsgcHTMLComponent_MultiSelect(NULL);
try
{
  oMulti->FieldName = "tags";
  oMulti->Placeholder = "Select tags";
  oMulti->MaxSelections = 3;
  oMulti->Size = mssLarge;

  oMulti->AddOption("js", "JavaScript", true);
  oMulti->AddOption("py", "Python");
  oMulti->AddOption("pas", "Pascal");

  String html = oMulti->HTML;   // dropdown + chips + hidden inputs
}
__finally
{
  delete oMulti;
}

using esegece.sgcWebSockets;

var multi = new TsgcHTMLComponent_MultiSelect();
multi.FieldName = "tags";
multi.Placeholder = "Select tags";
multi.MaxSelections = 3;
multi.Size = TsgcHTMLMultiSelectSize.mssLarge;

multi.AddOption("js", "JavaScript", true);
multi.AddOption("py", "Python");
multi.AddOption("pas", "Pascal");

string html = multi.HTML;   // dropdown + chips + hidden inputs

Referência

Principais propriedades & métodos

Os membros que você usa com mais frequência.

Opções

Options é uma coleção de TsgcHTMLMultiSelectOption (cada uma com Value, Text, Selected, Disabled e Group).

Adicionando opções

AddOption(aValue, aText, aSelected) adiciona uma única entrada; entradas agrupadas compartilham o mesmo valor de Group e são renderizadas sob um cabeçalho do dropdown.

Vinculação a dataset

LoadFromDataSet(aDataSet, aValueField, aTextField, aSelectedField) limpa e preenche novamente Options a partir de uma query.

Busca

ShowSearch (padrão True) adiciona uma caixa de filtro dentro do dropdown; SearchPlaceholder e NoResultsText sobrescrevem os textos e usam o idioma ativo como padrão.

Limites & dimensionamento

MaxSelections limita quantos chips podem ser selecionados de uma vez (0 significa ilimitado); Size (mssDefault, mssSmall, mssLarge) corresponde ao dimensionamento form-select do Bootstrap.

Enviando o valor

FieldName renderiza um <input> oculto para cada opção selecionada, para que o formulário envie todos os valores; MultiSelectID define o id do elemento.

Recursos

Continue explorando

	Ajuda onlineReferência completa da API e guia de uso para este componente.	Abrir
	Todos os Componentes sgcHTMLExplore a matriz completa de recursos com mais de 80 componentes.	Abrir
	Baixar Versão de Avaliação GratuitaA avaliação de 30 dias inclui os projetos de demonstração 60.HTML.	Abrir
	PreçosLicenças Single, Team e Site com código-fonte completo.	Abrir