Passo a passo: Devextreme Como definir o Grupo de Rádio Selected Opção

Devextreme by Devexpress é uma biblioteca cheia de componentes de interface do usuário prontos para uso para aplicativos da web. Funciona com angular, reagir, vue e até jQuery. Um de seus widgets populares é o radiograma , que permite que os usuários escolham uma opção de uma lista.

Nos formulários, configurações de páginas ou painéis, o Radiogroup ajuda a orientar os usuários a escolher apenas uma resposta. Por exemplo, você pode permitir que eles escolham entre "Plano Mensal" e "Plano Anual". Para fazer com que o aplicativo pareça suave, os desenvolvedores geralmente desejam definir uma escolha padrão ou pré -selecionar um valor. É aí que entra a propriedade Value em radiograma.

O que é um radiograma de Devextreme?

O widget de radiograma é um controle de entrada simples, mas poderoso. É preciso uma lista de dados (como uma lista de matriz ou JSON) e mostra botões de rádio para cada item. Os usuários podem clicar para selecionar um. Ao contrário de um grupo de seleção , onde vários itens podem ser escolhidos, o Radiogroup permite apenas uma única opção por vez.

Os desenvolvedores geralmente se preocupam com duas coisas: o que é o item selecionado e como defini -lo corretamente. O widget rastreia a opção atual através da propriedade Value . Quando você altera essa propriedade, o item selecionado é atualizado. Isso funciona em todas as estruturas - angular, reagem, vue e jQuery - já que o widget segue a mesma API.

Defina um valor selecionado padrão no radiograma

Definir um valor selecionado padrão é feito através da opção de valor ao inicializar o widget. Você passa o valor que corresponde a um dos itens na fonte de dados e esse item aparece como pré -selecionado.

Aqui está um exemplo simples usando JavaScript simples com uma JSON DataSource:

$ ("#RadiogroupContainer"). Dxradiogroup ({
Itens: ["básico", "padrão", "premium"],
Valor: “padrão” // Padrão selecionado
});

Neste exemplo, a opção "padrão" já será selecionada quando a página carregar. Isso é útil quando você deseja orientar os usuários para a escolha mais comum ou recomendada.

Você também pode se vincular a objetos em vez de cordas simples. Por exemplo:

Aqui, as propriedades ValueExpr e DisplayExpr garantem que o widget saiba qual campo usar para o valor e qual campo mostrar ao usuário.

Altere programaticamente o item selecionado

Às vezes, você não deseja que o radiograma mostre apenas um valor padrão. Pode ser necessário alterar a opção selecionada posteriormente, talvez depois que o usuário conclua outra etapa no seu formulário ou quando os dados voltarem de uma API.

Em Devextreme, isso é feito atualizando a propriedade Value do radiogrupo. Se você criou o widget com jQuery, pode ligar para a opção () para alterá -lo em tempo de execução.

Exemplo:

Quando a opção ("Valor",…) é executada, o radiograma destaca instantaneamente "Premium". Isso também funciona em angular, reagem e vue - nessas estruturas, você geralmente liga o valor ao estado ou uma variável. Quando esse estado muda, o item selecionado é atualizado automaticamente.

Essa abordagem é útil para formas em que a seleção depende de outras entradas. Por exemplo, se um usuário escolher "conta comercial", você poderá definir automaticamente o radiogrupo como "plano anual" em vez de "plano mensal".

Lidando com o evento Onvaluechanged

Definir um valor é um lado da história. Capturar a interação do usuário é a outra. O evento Onvaluechanged em Devextreme permite que você reaja sempre que o usuário altera a seleção deles.

Aqui está um exemplo simples:

Sempre que o usuário escolhe um plano diferente, o console imprime o novo valor. Este evento é fundamental quando você deseja atualizar outras partes da página ou enviar a seleção de volta para um banco de dados.

Nas estruturas, isso funciona da mesma maneira, mas segue seus modelos de eventos. No React, por exemplo, você pode usar o estado e passar uma função de manipulador que dispara quando o radiograma muda. No Angular ou Vue, você pode se ligar diretamente à ligação de dados bidirecional e usar a saída do evento para rastrear as alterações.

Pense em Onvaluechanged como seu "ouvinte". Ele conecta a ação do usuário à sua lógica de negócios - como mostrar um preço diferente, ativar um botão ou ajustar os campos relacionados. Sem ele, o radiograma exibiria apenas opções sem deixar o restante do seu aplicativo saber o que o usuário escolheu.

Exemplos específicos da estrutura

O Devextreme funciona em muitas estruturas e a definição do valor do radiogrupo selecionado é quase o mesmo em todos os lugares, mas a sintaxe muda um pouco.

1. Exemplo angular:

No angular, você geralmente liga o valor a uma propriedade componente.

<DX-Radio-Group
[itens] = ”['Basic', 'Standard', 'Premium']"
[(valor)] = "SelectedPlan">
</dx-radio-group>

Aqui, selectedPlan em seu arquivo tipscript controla qual item está selecionado. Se você alterar selectedPlan , o Radiogroup atualiza imediatamente.

2. Exemplo de reação:

O React usa componentes controlados, para que você lida com a seleção com o estado.

Quando o usuário escolhe um plano diferente, setPlan atualiza o estado e o radiograma mostra a nova seleção.

3. Exemplo de vue:

Vue facilita o v-model

Alterar selectedPlan em seus dados VUE atualiza o radiograma instantaneamente.

4. Exemplo de jQuery:

O jQuery é simples porque você apenas cria uma instância e define o valor.

Solucionar problemas comuns

Mesmo com widgets simples, as coisas podem dar errado. Aqui estão os problemas mais comuns que os desenvolvedores enfrentam:

• Valor que não está atualizando: isso geralmente acontece quando o valor que você define não corresponde ao valueExpr no seu DataSource. Por exemplo, se o seu DataSource usar id , mas você tentar definir o texto, nada muda.
• Vários radiogramas de uma forma: se você usar a mesma ligação de dados para dois widgets, eles poderão interferir entre si. Sempre use ligações exclusivas ou estado separado para cada grupo.
• Problemas de estilo ou layout: Às vezes, o radiograma não parece bem dentro de formas ou grades. Verifique se o contêiner tem espaço suficiente e o CSS não está substituindo os estilos do Devextreme.

A maioria dessas questões se resume a valores incompatíveis ou a falta de ligações. Verificar seu value , valueExpr e dataSource geralmente os resolve.

Conclusão

O widget de radiograma em Devextreme é uma ferramenta simples, mas importante. Você usa a propriedade Value para definir uma opção padrão ("valor") para alterá -la posteriormente e o OnValuechanged para capturar ações do usuário. Em Angular, React, Vue ou JQuery, o método é o mesmo - vincule o valor corretamente e funciona.

Se algo não estiver atualizado, verifique sua ligação de dados e verifique se o valor corresponde ao seu painel de dados. Depois de configurá -lo corretamente, o Radiogroup se torna uma maneira suave de orientar os usuários a fazer a escolha desejada.