FSGrid
Grid declarativo para exibir tabelas HTML no padrão Bootstrap 5 sem depender de GridView.
| Propriedade | Tipo | Padrao | Descricao |
|---|
ID_Componente | Integer | - | Identificador do grid. |
TextoComponente | String | - | Titulo/label acima da tabela. |
IDComponentePai | Integer | 0 | Controla inicio oculto. |
ComponenteFilho | String | vazio | Atributo de dependencia via data-toggle-ids. |
HabilitarDataSource | Boolean | False | Liga a leitura direta do banco via ADO.NET. |
ConnectionStringName | String | vazio | Nome da connection string no Web.config. |
ConnectionString | String | vazio | Connection string direta, usada quando ConnectionStringName nao for informado. |
ProviderName | String | System.Data.SqlClient | Provider ADO.NET usado para conexao e CRUD. |
SelectCommand | String | vazio | SQL base para leitura e geracao automatica do CRUD. |
DataKeyName | String | primeira coluna | Chave do registro quando a PK nao vier do provider. |
FSGridItem | Controle filho | vazio | Define cada coluna diretamente dentro do FSGrid com nome, descricao, tipo e regras de visibilidade. |
Dados | String | vazio | Dados manuais separados por ;; e colunas por |. Pode ser preenchido no Page_Load. |
Responsivo | Boolean | True | Envolve a tabela em table-responsive. A grade continua ocupando 100% do bloco e quebra o conteudo das celulas para reduzir a necessidade de rolagem horizontal. |
Listrado | Boolean | True | Aplica table-striped. |
ComBorda | Boolean | True | Aplica table-bordered. |
Hover | Boolean | True | Aplica table-hover. |
Compacto | Boolean | False | Aplica table-sm. |
CabecalhoEscuro | Boolean | False | Usa table-dark no cabecalho. |
HabilitarToolbar | Boolean | False | Renderiza uma toolbar acima da tabela. |
ToolbarHtml | String | vazio | HTML opcional com botoes e acoes customizadas. |
HabilitarMoverColunas | Boolean | False | Permite reordenar as colunas arrastando os titulos. |
HabilitarOrdenacao | Boolean | False | Ativa ordenacao clicando no titulo da coluna. |
HabilitarFiltroColuna | Boolean | False | Quando habilitado, adiciona o botao Filtros na toolbar e permite mostrar ou ocultar a linha de filtros, que sempre inicia invisivel. Cada filtro de coluna tambem exibe um icone para abrir um menu com busca nos valores distintos da grid; ao escolher um item, o valor e aplicado no campo e a grade e filtrada automaticamente. Em colunas date e datetime, o menu exibe filtros de periodo com data inicial e final. |
HabilitarBuscaToolbar | Boolean | False | Mostra a busca global na toolbar. |
ColunasBuscaToolbar | String | vazio | Lista de colunas separadas por ;. Se vazio, pesquisa em todas. |
HabilitarPaginacao | Boolean | False | Ativa a paginacao no rodape da grid. |
HabilitarSelecaoItensPorPagina | Boolean | False | Mostra seletor de quantidade por pagina no rodape, ao lado direito da paginacao. |
HabilitarSeletorColunas | Boolean | False | Mostra um dropdown na toolbar para o cliente ocultar ou exibir colunas da grade. |
HabilitarExportacao | Boolean | False | Adiciona exportacao nativa em PDF, CSV e XLS. |
ExtensoesExportacao | String | PDF;CSV;XLS | Lista de formatos disponiveis separada por ;. Aceita PDF, CSV, XLS e XLSX como alias legado para Excel. |
ItensPorPagina | Integer | 20 | Quantidade inicial de registros por pagina. |
OpcoesItensPorPagina | String | 10;20;50;100 | Valores permitidos no seletor de pagina. |
HabilitarTemaSeletorItensPorPagina | Boolean | False | Aplica o tema visual do seletor de itens por pagina, com seta em bloco escuro no lado direito do combo. |
ModalColunas | Integer | 2 | Define em quantas colunas o modal de novo/edicao sera dividido. Aceita de 1 a 4. |
TamanhoModal | String | lg | Tamanho do modal de novo/edicao. Aceita sm, lg, xl e fullscreen. |
HabilitarNovo | Boolean | False | Mostra o botao Novo na toolbar, com icone e modal. |
HabilitarEditar | Boolean | False | Mostra o botao de editar na primeira coluna, com icone e modal. |
HabilitarExcluir | Boolean | False | Mostra o botao de excluir na ultima coluna, com icone e modal. |
HabilitarSelecaoMassa | Boolean | False | Adiciona checkboxes por linha e seletor da pagina atual. |
HabilitarAcoesLote | Boolean | False | Exibe barra de acoes quando ha linhas selecionadas. |
AcoesLoteHtml | String | vazio | HTML opcional para botoes de lote. Use data-fs-grid-batch para disparar callback client-side. |
AcoesCustomizadasHtml | String | vazio | HTML por linha em coluna extra. Aceita tokens {key} e {rowIndex}. |
TituloColunaAcoes | String | vazio | Titulo opcional da coluna de acoes customizadas. Por padrao, os cabecalhos das colunas Editar, Excluir e Acoes ficam em branco. |
HabilitarToastOperacoes | Boolean | False | Quando existe FSToast na pagina, mostra notificacoes para mensagens de novo, edicao, exclusao e erros da grid. |
HabilitarCardViewMobile | Boolean | True | Em telas pequenas e tablets, troca a tabela por cards responsivos mantendo filtros, ordenacao, paginacao e acoes por linha. |
ColunaPrincipalCardView | String | primeira coluna visivel | Nome ou titulo da coluna usada como destaque principal do card mobile. As demais aparecem como NomeColuna: ValorColuna. |
SalvarPreferenciasUsuario | Boolean | False | Persiste ordem/visibilidade de colunas e tamanho da pagina em localStorage. |
ChavePreferenciasUsuario | String | ClientID | Chave usada no localStorage para separar preferencias por usuario/tela. |
MensagemVazia | String | Nenhum registro encontrado. | Texto exibido quando nao ha linhas. |
No modo manual, Dados usa ;; para separar registros e | para separar colunas. A configuracao visual e funcional da grade deve ser feita pelos itens filhos FSGridItem. Tipos suportados: text, textarea, int, decimal, money, date, datetime, checkbox, switch, combobox, radiobutton, tagbox, color e upload. O tipo legado number continua aceito como alias de decimal.
Os recursos de interacao da grade sao todos opcionais: mover colunas, ordenar, filtrar por coluna com atualizacao automatica durante a digitacao sem perder foco, menu de valores distintos com busca interna nos filtros de coluna, filtro por periodo para campos de data, busca global na toolbar, seletor de colunas, exportacao configuravel em PDF/CSV/XLS, paginacao e seletor de itens por pagina no rodape. O rodape mostra o resumo no formato Pagina 1 de 2 (22 itens), com os botoes de paginacao ao lado esquerdo e o seletor de quantidade por pagina no lado direito. Em telas de celular, a grid pode trocar a tabela por cards, destacando uma coluna principal e exibindo as demais no formato nome/valor. A exportacao usa os dados filtrados, ordenados e com as colunas visiveis no momento; CSV baixa com separador ponto e virgula para abrir corretamente no Excel pt-BR, XLS baixa em formato Excel compativel e PDF abre uma janela pronta para impressao/salvar como PDF. Todos entram desligados por padrao, exceto o card view mobile, que vem ligado. A renderizacao da tabela foi ajustada para ocupar 100% do bloco e quebrar textos longos no cabecalho e nas celulas.
Para Novo, Editar e Excluir, use uma consulta simples baseada em uma tabela com chave primaria. O componente usa DbCommandBuilder para gerar o CRUD automatico e abrir tudo em modal Bootstrap.
| Propriedade do FSGridItem | Tipo | Padrao | Descricao |
|---|
Name | String | - | Nome do campo/coluna no dataset ou na linha manual. |
Descricao | String | igual a Name | Titulo exibido no cabecalho e no modal. |
Titulo | String | vazio | Alias opcional para o titulo. E usado quando Descricao nao for informada. |
TipoCampo | String | text | Tipo do campo: text, textarea, int, decimal, money, date, datetime, checkbox, switch, combobox, radiobutton, tagbox, color ou upload. number segue como alias legado para decimal. |
Tipo | String | vazio | Alias opcional para TipoCampo. |
Visivel | Boolean | True | Controla se a coluna aparece na tabela. |
VisivelNovo | Boolean | True | Controla se o campo aparece no modal de novo registro. |
VisivelEditar | Boolean | True | Controla se o campo aparece no modal de edicao. |
Obrigatorio | Boolean | False | Aplica required no campo do modal. |
Placeholder | String | vazio | Texto de orientacao no campo do modal. |
Mascara | String | vazio | Renderiza o atributo data-mask para uso com plugins externos. |
Opcoes | String | vazio | Lista separada por ; usada nos tipos combobox, radiobutton e como sugestao no tagbox. |
MaxTags | Integer | 0 | Limite maximo de tags para colunas tagbox. 0 significa sem limite. |
PermitirNovasTags | Boolean | True | Permite incluir tags nao listadas em Opcoes no editor modal. |
Separador | String | ; | Separador usado para salvar o valor final da coluna tagbox. |
CoresTags | String | vazio | Mapa de cores por tag. Exemplo: Tecnologia:#0d6efd;Suporte:#198754. |
CorTagPadrao | String | #0d6efd | Cor aplicada quando a tag nao existir no mapa. Aceita cor CSS ou tokens Bootstrap como primary, info, danger, bg-danger e text-bg-danger. |
CorTextoTagPadrao | String | #fff | Cor aplicada ao texto das tags. |
TagModo | String | Tag | No tipo tagbox, Tag renderiza badges coloridos e Text exibe os valores como texto comum separado por virgula. |
UrlBuscaAssincrona | String | vazio | Endpoint JSON opcional para complementar as sugestoes do tagbox enquanto o usuario digita. |
ParametroBuscaAssincrona | String | term | Nome do parametro enviado ao endpoint remoto do tagbox. |
MinimoCaracteresBusca | Integer | 2 | Quantidade minima de caracteres para acionar a busca remota no editor modal. |
LimiteSugestoes | Integer | 8 | Quantidade maxima de sugestoes exibidas no dropdown do tagbox. |
Linhas | Integer | 4 | Quantidade de linhas usada no tipo textarea. |
PastaUpload | String | ~/uploads | Pasta usada pelo tipo upload para salvar o arquivo no servidor. Aceita caminho virtual, por exemplo ~/uploads/grid. |
ExtensoesPermitidas | String | vazio | Lista separada por ; com extensoes permitidas no tipo upload. |
TamanhoMaximoKB | Integer | 0 | Limite de tamanho do arquivo em KB para o tipo upload. |
PrefixoArquivo | String | vazio | Prefixo usado para compor o nome final do arquivo salvo pela grid. |
Largura | String | vazio | Largura da coluna em CSS, por exemplo 120px ou 15%. |
ClasseCss | String | vazio | Classe aplicada na coluna e no editor do modal. |
ColunasModal | Integer | 1 | Quantidade de colunas do layout do modal que esse item vai ocupar. Funciona em conjunto com ModalColunas do grid. |
SomenteLeitura | Boolean | False | Bloqueia edicao no modal e impede persistencia do valor no CRUD automatico. |
Sugestao de mapeamento entre componentes e tipos da grid: FSTxtBox=text, FSTextArea=textarea, FSNumericBox int=int, FSNumericBox decimal=decimal, FSCurrencyBox=money, FSCalendario=date, FSDateTimePicker=datetime, FSTagBox=tagbox, FSCheckBoxList=tagbox, FSSwitch=switch, FSComboBox=combobox, FSRadioButtonList=radiobutton, FSColorPicker=color e FSUpload=upload.
<fs:FSGrid
runat="server"
ID="GridComponentes"
ID_Componente="10"
TextoComponente="Grid de componentes"
HabilitarToolbar="true"
HabilitarMoverColunas="true"
HabilitarOrdenacao="true"
HabilitarFiltroColuna="true"
HabilitarBuscaToolbar="true"
ColunasBuscaToolbar="Codigo;Descricao;Status"
HabilitarPaginacao="true"
HabilitarSelecaoItensPorPagina="true"
HabilitarSeletorColunas="true"
HabilitarExportacao="true"
ExtensoesExportacao="PDF;CSV;XLS"
ItensPorPagina="20"
ModalColunas="2"
TamanhoModal="xl"
Responsivo="true"
Listrado="true"
ComBorda="true"
Hover="true">
<fs:FSGridItem Name="Codigo" Descricao="Codigo" TipoCampo="int" Visivel="true" VisivelNovo="false" VisivelEditar="false" Largura="90px" />
<fs:FSGridItem Name="Descricao" Descricao="Descricao" TipoCampo="text" Visivel="true" VisivelNovo="true" VisivelEditar="true" Obrigatorio="true" Placeholder="Informe a descricao" Largura="260px" ColunasModal="2" />
<fs:FSGridItem Name="Status" Descricao="Status" TipoCampo="text" Visivel="true" VisivelNovo="true" VisivelEditar="true" Placeholder="Ativo, Inativo ou Pendente" Largura="180px" />
<fs:FSGridItem Name="Tags" Descricao="Tags" TipoCampo="tagbox" Visivel="true" VisivelNovo="true" VisivelEditar="true" Opcoes="Financeiro;Comercial;Operacional;Tecnologia;Suporte" CoresTags="Financeiro:#6f42c1;Comercial:#fd7e14;Operacional:#6c757d;Tecnologia:#0d6efd;Suporte:#198754" UrlBuscaAssincrona="~/Default.aspx?ajaxTags=1" MinimoCaracteresBusca="1" LimiteSugestoes="10" MaxTags="5" Largura="260px" />
<fs:FSGridItem Name="Valor" Descricao="Valor" TipoCampo="decimal" Visivel="true" VisivelNovo="true" VisivelEditar="true" Obrigatorio="true" Placeholder="0,00" Mascara="money" Largura="160px" ClasseCss="text-nowrap" />
<fs:FSGridItem Name="DataCadastro" Descricao="Cadastro" TipoCampo="datetime" Visivel="false" VisivelNovo="true" VisivelEditar="true" SomenteLeitura="true" Placeholder="Preenchido automaticamente" />
</fs:FSGrid>
<fs:FSGridItem Name="Observacoes" Descricao="Observacoes" TipoCampo="textarea" Linhas="5" />
<fs:FSGridItem Name="Ativo" Descricao="Ativo" TipoCampo="switch" />
<fs:FSGridItem Name="Categoria" Descricao="Categoria" TipoCampo="combobox" Opcoes="Hardware;Software;Servicos" />
<fs:FSGridItem Name="Prioridade" Descricao="Prioridade" TipoCampo="radiobutton" Opcoes="Alta;Media;Baixa" />
<fs:FSGridItem Name="Tags" Descricao="Tags" TipoCampo="tagbox" Opcoes="API;Dashboard;Relatorio;Financeiro" CoresTags="API:#20c997;Dashboard:#0dcaf0;Relatorio:#6610f2;Financeiro:#6f42c1" UrlBuscaAssincrona="~/Default.aspx?ajaxTags=1" MaxTags="5" />
<fs:FSGridItem Name="Cor" Descricao="Cor" TipoCampo="color" />
<fs:FSGridItem Name="Anexo" Descricao="Anexo" TipoCampo="upload" PastaUpload="~/uploads/grid" ExtensoesPermitidas=".pdf;.docx" TamanhoMaximoKB="5120" PrefixoArquivo="anexo" />
No tipo upload, a grid salva o arquivo fisicamente na pasta configurada em PastaUpload, valida extensao/tamanho quando configurados, aplica PrefixoArquivo ao nome final e persiste no campo do banco o caminho relativo gerado. A visualizacao do arquivo no grid agora abre em modal.
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
If Not IsPostBack Then
GridComponentes.Dados = "1|Alpha Tech|Ativo|12500.00|2026-04-02T09:30;;2|Beta Supply|Pendente|8300.00|2026-04-03T10:15"
End If
End Sub
<connectionStrings>
<add name="FSDemo"
connectionString="Data Source=SERVIDOR;Initial Catalog=BASE;Integrated Security=True"
providerName="System.Data.SqlClient" />
</connectionStrings>
<fs:FSGrid
runat="server"
ID="GridProdutos"
ID_Componente="11"
TextoComponente="Produtos"
HabilitarDataSource="true"
ConnectionStringName="FSDemo"
SelectCommand="SELECT Id, Nome, Ativo, DataCadastro, ValorUnitario FROM Produtos"
DataKeyName="Id"
HabilitarToolbar="true"
HabilitarOrdenacao="true"
HabilitarFiltroColuna="true"
HabilitarBuscaToolbar="true"
HabilitarPaginacao="true"
HabilitarSelecaoItensPorPagina="true"
HabilitarSeletorColunas="true"
HabilitarExportacao="true"
ExtensoesExportacao="CSV;XLS"
ItensPorPagina="20"
HabilitarNovo="true"
HabilitarEditar="true"
HabilitarExcluir="true"
Hover="true"
ComBorda="true">
<fs:FSGridItem Name="Id" Descricao="Codigo" TipoCampo="int" Visivel="true" VisivelNovo="false" VisivelEditar="false" Largura="90px" />
<fs:FSGridItem Name="Nome" Descricao="Produto" TipoCampo="text" Visivel="true" VisivelNovo="true" VisivelEditar="true" Obrigatorio="true" Placeholder="Nome do produto" Largura="280px" />
<fs:FSGridItem Name="Ativo" Descricao="Ativo" TipoCampo="text" Visivel="true" VisivelNovo="true" VisivelEditar="true" Largura="140px" />
<fs:FSGridItem Name="DataCadastro" Descricao="Cadastro" TipoCampo="datetime" Visivel="true" VisivelNovo="false" VisivelEditar="true" SomenteLeitura="true" />
<fs:FSGridItem Name="ValorUnitario" Descricao="Valor unitario" TipoCampo="decimal" Visivel="true" VisivelNovo="true" VisivelEditar="true" Obrigatorio="true" Placeholder="0,00" Mascara="money" ClasseCss="text-nowrap" />
</fs:FSGrid>