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 ou via DataSourceID. |
DataSourceID | String | vazio | ID de um asp:SqlDataSource existente na pagina. Quando informado, a grid usa o Select desse datasource em vez do caminho interno por SelectCommand. |
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 ou procedure base para leitura. Quando o CRUD automatico for usado, tambem serve como base para o DbCommandBuilder. |
CommandType, SelectCommandType | String | Text | Tipo do comando de leitura. Aceita Text ou StoredProcedure. CommandType e um alias direto para facilitar markup. |
SelectParameters | String | vazio | Parametros do comando separados por ;. Exemplo: @IdEmpresa=@Session:IdEmpresa;@Status=Ativo;@Busca=@QueryString:q. Origens aceitas: Session, QueryString, Form, Request, Items e AppSettings. |
InsertCommand, UpdateCommand, DeleteCommand | String | vazio | Comandos opcionais para substituir o CRUD automatico de cada operacao. Podem ser SQL ou procedure. |
InsertCommandType, UpdateCommandType, DeleteCommandType | String | Text | Tipo do comando de cada operacao. Aceita Text ou StoredProcedure. |
InsertParameters, UpdateParameters, DeleteParameters | String | automatico | Parametros separados por ;. Use @Nome=@Field:Nome para valor do campo, @Id=@Key para a chave, alem de @Session:Chave, @QueryString:Chave, @Form:Chave, @Request:Chave, @Items:Chave e @AppSettings:Chave. Se vazio, a grid envia automaticamente os campos editaveis e a chave. |
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 inativar na ultima coluna, com icone e modal. |
TextoTituloExclusao, TextoConfirmacaoExclusao | String | localizado | Personaliza o titulo e a mensagem exibidos no modal de confirmacao de inativacao. |
TextoBotaoConfirmarExclusao, TextoBotaoCancelarExclusao | String | localizado | Personaliza os textos dos botoes do modal de inativacao. |
TextoSelecaoObrigatoria, TextoTituloSelecaoObrigatoria, TextoBotaoFecharSelecaoObrigatoria | String | localizado | Personaliza o modal exibido quando Editar ou Inativar pela toolbar for acionado sem exatamente um registro selecionado. |
HabilitarSelecaoMassa | Boolean | False | Adiciona seletor da pagina atual no cabecalho. A coluna de checkboxes fica oculta quando HabilitarEditarToolbar e HabilitarExcluirToolbar estao falsos e nao ha acoes de lote; HabilitarNovo nao habilita essa coluna. |
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, Inativar e Acoes ficam em branco. |
HabilitarToastOperacoes | Boolean | False | Quando existe FSToast na pagina, mostra notificacoes para mensagens de novo, edicao, inativacao 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. |
HabilitarCarregamentoIncrementalCliente | Boolean | False | Carrega todos os dados no HTML/JSON, mas renderiza/anexa as linhas em lotes no navegador para reduzir travamento visual inicial. |
HabilitarCarregamentoIncrementalServidor | Boolean | False | Carrega o primeiro lote no HTML e busca os demais lotes por callback Web Forms. Para SQL texto em SQL Server, a grid tenta aplicar paginação automaticamente; para stored procedure, a procedure deve aceitar @FSOffset e @FSLimit. |
TamanhoLoteCarregamentoIncremental | Integer | 500 | Quantidade de registros por lote nos modos incrementais. Valor maximo normalizado internamente: 5000. |
IntervaloCarregamentoIncrementalMs | Integer | 50 | Intervalo em milissegundos entre os lotes anexados ao navegador. |
OrdenacaoCarregamentoIncremental | String | DataKeyName | Expressao usada no ORDER BY da paginação automatica do modo servidor com SQL texto. Informe uma coluna indexada e estavel, como Id. |
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, html, int, decimal, money, date, datetime, checkbox, switch, combobox, comboboxfilter, comboboxcheck, comboboxtag, multiselect, radiobutton, checkboxlist, 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 tabela ocupa 100% do bloco; as celulas quebram textos longos, enquanto o cabecalho preserva palavras inteiras e permite quebra somente nos espacos. Em consultas complexas com funcao escalar no SELECT, a carga por datasource faz fallback automatico para leitura normal quando a leitura de schema do provider falhar.
Sem comandos especificos de operacao, Novo, Editar e Inativar usam CRUD automatico via DbCommandBuilder e exigem CommandType="Text" com consulta simples baseada em uma tabela com chave primaria. Para stored procedure ou SQL proprio no CRUD, configure InsertCommand, UpdateCommand e/ou DeleteCommand.
Quando o FSGrid tiver itens filhos FSGridItem, somente essas colunas declaradas serao carregadas na grade. Colunas extras retornadas pelo SelectCommand ou procedure sao ignoradas. Sem itens filhos, a grade continua auto-carregando todas as colunas do resultado.
Os modos de carregamento incremental sao opcionais e desligados por padrao. O modo cliente melhora a sensacao de fluidez, mas ainda envia todos os registros no HTML. O modo servidor reduz o payload inicial e busca os proximos lotes em background; enquanto os lotes ainda estao carregando, busca, filtros, ordenacao e exportacao operam sobre os registros ja recebidos.
<fs:FSGrid
runat="server"
HabilitarDataSource="true"
ConnectionStringName="FSDemo"
SelectCommand="SELECT Id, Nome, Status FROM Clientes WHERE IdEmpresa = @IdEmpresa AND Status = @Status"
SelectParameters="@IdEmpresa=@Session:IdEmpresa;@Status=Ativo" />
<fs:FSGrid
runat="server"
HabilitarDataSource="true"
ConnectionStringName="FSDemo"
CommandType="StoredProcedure"
SelectCommand="sp_ListarClientes"
SelectParameters="@IdEmpresa=@Session:IdEmpresa;@Busca=@QueryString:q" />
<fs:FSGrid
runat="server"
HabilitarDataSource="true"
ConnectionStringName="FSDemo"
SelectCommand="SELECT Id, Nome, Status FROM Clientes"
DataKeyName="Id"
HabilitarCarregamentoIncrementalServidor="true"
TamanhoLoteCarregamentoIncremental="500"
IntervaloCarregamentoIncrementalMs="50"
OrdenacaoCarregamentoIncremental="Id" />
<fs:FSGrid
runat="server"
Dados="1|Cliente A|Ativo;;2|Cliente B|Ativo"
HabilitarCarregamentoIncrementalCliente="true"
TamanhoLoteCarregamentoIncremental="500"
IntervaloCarregamentoIncrementalMs="50" />
<fs:FSGrid
runat="server"
HabilitarDataSource="true"
ConnectionStringName="FSDemo"
SelectCommand="sp_ListarClientes"
CommandType="StoredProcedure"
DataKeyName="Id"
InsertCommand="sp_InserirCliente"
InsertCommandType="StoredProcedure"
InsertParameters="@Nome=@Field:Nome;@Status=@Field:Status;@IdEmpresa=@Session:IdEmpresa"
UpdateCommand="sp_AtualizarCliente"
UpdateCommandType="StoredProcedure"
UpdateParameters="@Id=@Key;@Nome=@Field:Nome;@Status=@Field:Status"
DeleteCommand="sp_InativarCliente"
DeleteCommandType="StoredProcedure"
DeleteParameters="@Id=@Key"
TextoTituloExclusao="Inativar cliente"
TextoConfirmacaoExclusao="Inativar Registro?"
TextoBotaoConfirmarExclusao="Inativar"
TextoBotaoCancelarExclusao="Voltar" />
| 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, html, int, decimal, money, date, datetime, checkbox, switch, combobox, comboboxfilter, comboboxcheck, comboboxtag, multiselect, radiobutton, checkboxlist, tagbox, template, 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. |
VisivelSeletorColunas | Boolean | True | Controla se a coluna aparece no seletor de colunas. Quando False, o usuario nao pode ocultar ou exibir essa coluna; o estado fica bloqueado conforme Visivel, inclusive sobre preferencias antigas salvas no navegador. Use Visivel="True" para uma coluna obrigatoria ou Visivel="False" para impedir sua exibicao em determinado perfil. |
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. |
VisivelExcluir | Boolean | True | Controla se o campo aparece no resumo do modal de inativacao. |
Obrigatorio | Boolean | False | Aplica required no campo do modal. |
FiltroColuna | Boolean | True | Controla o icone/menu de valores distintos no cabecalho da coluna. Quando False, a grid nao renderiza esse icone/menu, mas mantem o input da linha de filtros e a busca global da toolbar. |
Ordem / DisplayOrder / Indice | Integer | 0 | Define a ordem visual da coluna na tabela, seletor de colunas, exportacao e demais recursos que usam a ordem da grid. Valores maiores que zero sao ordenados antes das colunas sem ordem; quando nenhum item define ordem, prevalece a ordem retornada pelo SelectCommand ou pela configuracao manual. |
Placeholder | String | vazio | Texto de orientacao no campo do modal. |
Mascara | String | vazio | Renderiza o atributo data-mask para uso com plugins externos. Aceita mascara literal ou aliases: telefone e celular geram (00) 00000-0000, telefone-fixo gera (00) 0000-0000, cpf gera 000.000.000-00, cnpj gera 00.000.000/0000-00 e cep gera 00000-000. |
MaxLength | Integer | 0 | Limite maximo de caracteres para campos textuais editaveis. Em datasource, quando nao informado, usa o MaxLength da coluna retornada pelo banco. |
Opcoes | String | vazio | Lista separada por ; usada nos tipos combobox, comboboxfilter, comboboxcheck, comboboxtag, multiselect, radiobutton, checkboxlist e como sugestao no tagbox. |
OpcoesSelectCommand | String | vazio | SQL ou stored procedure para carregar opcoes externas com ID e texto. A grid usa o ID no valor salvo e o texto na exibicao/editor. |
OpcoesSelectCommandType | String | Text | Tipo do comando de opcoes externas: Text ou StoredProcedure. |
OpcoesSelectParameters | String | vazio | Parametros do SELECT externo no mesmo formato do SelectParameters, aceitando @Session, @QueryString, @Form, @Request, @Items e @AppSettings. |
OpcoesValueField, OpcoesTextField | String | primeira e segunda coluna | Campos retornados pelo SELECT externo usados como valor salvo e texto exibido. Se nao informados, usa a primeira coluna como valor e a segunda como texto. |
OpcoesTextMultiField | String | vazio | Lista de campos retornados pelo SELECT externo, separados por ;, para renderizar TipoCampo="combobox" com dropdown em formato de grade de colunas. |
OpcoesConnectionStringName, OpcoesConnectionString, OpcoesProviderName | String | vazio | Conexao opcional para o SELECT externo. Quando vazias, reutilizam a conexao principal da grid. |
TemplateHtml | String | vazio | HTML livre usado quando TipoCampo="template". Aceita tokens escapados {value}, {key}, {rowIndex} e {NomeDaColuna}. Use {raw} ou {raw:NomeDaColuna} para renderizar HTML sem escape vindo de fonte confiavel, como uma funcao SQL que retorna links. A coluna template nao entra no modal de novo/edicao. |
FiltroToolbarOpcoes | Boolean | False | Renderiza as opcoes da coluna como botoes em uma nova linha da toolbar, sem repetir o nome da coluna antes dos botoes. A primeira opcao visual e Todos, fica selecionada por padrao com cor primary e remove o filtro dessa coluna. Ao clicar em uma opcao, a grid aplica filtro exato nessa coluna mantendo a coluna visivel; clicar novamente na opcao ativa nao desmarca todos os botoes, mantendo sempre Todos ou uma opcao especifica ativa. |
ToolbarColorido | Boolean | False | Quando false, as celulas continuam coloridas, mas os botoes ficam transparentes e usam CoresFiltroToolbarAcao, CorFiltroToolbarAcaoPadrao ou primary no hover e selecionado. Quando true, os botoes da toolbar tambem usam as cores de CoresFiltroToolbar. |
CoresFiltroToolbar | String | vazio | Mapa de cores por valor para fundo das celulas dessa coluna e tambem para botoes da toolbar quando ToolbarColorido=true. Exemplo: Ativo:#d1e7dd;Inativo:#f8d7da. |
CoresFiltroToolbarAcao | String | vazio | Mapa de cores por valor usado somente nos botoes da toolbar quando houver hover ou quando a opcao estiver selecionada. Se nao informado, usa primary quando ToolbarColorido=false ou a cor de CoresFiltroToolbar quando ToolbarColorido=true. Exemplo: Ativo:#badbcc;Inativo:#f1aeb5. |
CorFiltroToolbarPadrao | String | Transparent | Cor de fundo usada quando o valor nao existir em CoresFiltroToolbar. |
CorFiltroToolbarAcaoPadrao | String | vazio | Cor padrao para hover e selecionado da toolbar quando o valor nao existir em CoresFiltroToolbarAcao. Se nao informado, usa CorFiltroToolbarPadrao, ou primary quando ToolbarColorido=false. |
CorTextoFiltroToolbarPadrao | String | vazio | Cor opcional do texto dos botoes e celulas coloridas pelo filtro da toolbar. |
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 | Transparent | Cor aplicada ao fundo e a borda quando a tag nao existir em CoresTags. Aceita qualquer cor CSS informada; o texto usa peso normal por padrao. |
CorTextoTagPadrao | String | inherit | Cor aplicada ao texto das tags; por padrao herda a cor do elemento pai. |
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 nos tipos textarea, html e multiselect. |
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, FSHTMLEditor=html, FSNumericBox int=int, FSNumericBox decimal=decimal, FSCurrencyBox=money, FSCalendario=date, FSDateTimePicker=datetime, FSTagBox=tagbox, FSCheckBoxList=checkboxlist, FSMultiSelectBox=multiselect, FSSwitch=switch, FSComboBox Select=combobox, FSComboBox Select+Filtro=comboboxfilter, FSComboBox Check=comboboxcheck, FSComboBox Tag=comboboxtag, FSRadioButtonList=radiobutton, FSColorPicker=color e FSUpload=upload.
Para campos de lista com tabela secundaria, use OpcoesSelectCommand no FSGridItem. O campo principal deve retornar/salvar o ID; a grid carrega as opcoes externas, exibe o texto correspondente e envia o ID no insert/update.
<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" VisivelSeletorColunas="false" VisivelNovo="false" VisivelEditar="false" VisivelExcluir="true" Largura="90px" Ordem="6" />
<fs:FSGridItem Name="Descricao" Descricao="Descricao" TipoCampo="text" Visivel="true" VisivelNovo="true" VisivelEditar="true" Obrigatorio="true" Placeholder="Informe a descricao" MaxLength="120" Largura="260px" ColunasModal="2" FiltroColuna="false" Ordem="1" />
<fs:FSGridItem Name="Status" Descricao="Status" TipoCampo="text" Visivel="true" VisivelNovo="true" VisivelEditar="true" Placeholder="Ativo, Inativo ou Pendente" MaxLength="20" Opcoes="Ativo;Inativo;Pendente" FiltroToolbarOpcoes="true" CoresFiltroToolbar="Ativo:#d1e7dd;Inativo:#f8d7da;Pendente:#fff3cd" CorFiltroToolbarPadrao="Transparent" CorTextoFiltroToolbarPadrao="#212529" Largura="180px" Ordem="2" />
<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" Ordem="3" />
<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" Ordem="4" />
<fs:FSGridItem Name="DataCadastro" Descricao="Cadastro" TipoCampo="datetime" Visivel="false" VisivelNovo="true" VisivelEditar="true" SomenteLeitura="true" Placeholder="Preenchido automaticamente" Ordem="5" />
</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="Combo Select" TipoCampo="combobox" Opcoes="Hardware;Software;Servicos" />
<fs:FSGridItem Name="IdCategoria" Descricao="Categoria" TipoCampo="combobox" OpcoesSelectCommand="SELECT IdCategoria, Nome FROM Categorias WHERE Ativo = 1 ORDER BY Nome" OpcoesValueField="IdCategoria" OpcoesTextField="Nome" />
<fs:FSGridItem Name="IdProduto" Descricao="Produto" TipoCampo="combobox" OpcoesSelectCommand="sp_ListarProdutos" OpcoesSelectCommandType="StoredProcedure" OpcoesSelectParameters="@IdEmpresa=@Session:IdEmpresa" OpcoesValueField="IdProduto" OpcoesTextField="Nome" OpcoesTextMultiField="Codigo;Nome;Estoque" />
<fs:FSGridItem Name="Responsavel" Descricao="Combo Filtro" TipoCampo="comboboxfilter" Opcoes="Ana;Bruno;Carla;Diego" />
<fs:FSGridItem Name="Telefone" Descricao="Telefone" TipoCampo="text" Mascara="telefone" Placeholder="(11) 99999-9999" />
<fs:FSGridItem Name="AreasCombo" Descricao="Combo Check" TipoCampo="comboboxcheck" Opcoes="Financeiro;Comercial;Operacional" />
<fs:FSGridItem Name="IdsPermissoes" Descricao="Permissoes" TipoCampo="checkboxlist" OpcoesSelectCommand="SELECT IdPermissao, Descricao FROM Permissoes ORDER BY Descricao" OpcoesValueField="IdPermissao" OpcoesTextField="Descricao" Separador=";" />
<fs:FSGridItem Name="TagsCombo" Descricao="Combo Tag" TipoCampo="comboboxtag" Opcoes="API;Dashboard;Relatorio" />
<fs:FSGridItem Name="Areas" Descricao="Areas" TipoCampo="multiselect" Opcoes="Financeiro;Comercial;Operacional" />
<fs:FSGridItem Name="Prioridade" Descricao="Prioridade" TipoCampo="radiobutton" Opcoes="Alta;Media;Baixa" />
<fs:FSGridItem Name="Permissoes" Descricao="Permissoes" TipoCampo="checkboxlist" Opcoes="API;Dashboard;Exportacao" />
<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="Resumo" Descricao="Resumo" TipoCampo="template" TemplateHtml="<div class="d-flex flex-column"><strong>{Texto}</strong><small class="text-secondary">Codigo {key} - {ComboSelect}</small></div>" />
<fs:FSGridItem Name="Template" Descricao="Acoes" TipoCampo="template" Largura="100px" TemplateHtml="{raw:Template}" />
<fs:FSGridItem Name="IdsTags" Descricao="Tags por ID" TipoCampo="tagbox" OpcoesSelectCommand="SELECT IdTag, Nome FROM Tags ORDER BY Nome" OpcoesValueField="IdTag" OpcoesTextField="Nome" PermitirNovasTags="false" MaxTags="5" />
<fs:FSGridItem Name="ResumoHtml" Descricao="Resumo HTML" TipoCampo="html" Linhas="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.
Criando a FSGrid direto no Page_Load
Quando a grid for criada por codigo, coloque um asp:PlaceHolder no ASPX e adicione a instancia no Page_Load antes da renderizacao. Evite recriar a mesma grid duas vezes no mesmo request e mantenha um ID fixo para postback, filtros, selecao e eventos.
<asp:PlaceHolder ID="PhGridFornecedores" runat="server" />
Imports FSISA
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
If PhGridFornecedores.FindControl("GridFornecedores") IsNot Nothing Then
Return
End If
Dim grid As New FSGrid With {
.ID = "GridFornecedores",
.ID_Componente = 1201,
.TextoComponente = "Fornecedores",
.HabilitarToolbar = True,
.HabilitarBuscaToolbar = True,
.HabilitarFiltroColuna = True,
.HabilitarPaginacao = True,
.HabilitarExportacao = True,
.ItensPorPagina = 10,
.Dados = "3659|Alpha Tech|Ativo|<div class=""d-inline-flex""><a href=""Detalhes?id=3659"" class=""btn btn-sm btn-link"">Detalhes</a></div>;;" &
"3660|Beta Supply|Pendente|<div class=""d-inline-flex""><a href=""Detalhes?id=3660"" class=""btn btn-sm btn-link"">Detalhes</a></div>"
}
grid.Items.Add(New FSGridItem With {.Name = "ID_Fornecedor", .Descricao = "Codigo", .TipoCampo = "int", .Largura = "110px", .Ordem = 1})
grid.Items.Add(New FSGridItem With {.Name = "RazaoSocial", .Descricao = "Razao social", .TipoCampo = "text", .Ordem = 2})
grid.Items.Add(New FSGridItem With {
.Name = "Status",
.Descricao = "Status",
.TipoCampo = "combobox",
.Opcoes = "Ativo;Inativo;Pendente",
.FiltroToolbarOpcoes = True,
.CoresFiltroToolbar = "Ativo:#d1e7dd;Inativo:#f8d7da;Pendente:#fff3cd",
.Ordem = 3
})
grid.Items.Add(New FSGridItem With {.Name = "Template", .Descricao = "Acoes", .TipoCampo = "template", .TemplateHtml = "{raw:Template}", .Largura = "120px", .Ordem = 4})
PhGridFornecedores.Controls.Add(grid)
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" MaxLength="120" Largura="280px" />
<fs:FSGridItem Name="Ativo" Descricao="Ativo" TipoCampo="text" Visivel="true" VisivelNovo="true" VisivelEditar="true" MaxLength="10" 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>