GridPanel dynamic in code behind and store and filter dynamic with datatable code behind

Hello guys,

I'm trying to do a Custom Controls on ASP.NET using the GridPanel to make it generic from the
Table and Columns that I choose on Properties of the Control.

I was wondering if is possible to create a GridPanel from code behind, and the Store from code behind too
and the data coming from a DataTable that I fill with data from SQL by my own code.

The question is, i want to make a TextField and when I press ENTER key the GridPanel is Reloaded or Refreshed as you preffer
to the new Filter typed in the TextField. That means that when You press the ENTER the code behind must recognize that
Key and the Text and if the Text is not empty the filter is applied.

I Tried something already, follows:

Mark Up of the Custom Control:

Code:

---

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ConsultaGeneric.ascx.cs" Inherits="GestorAspNet.Generic.ConsultaGeneric" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <style type="text/css">
        .x-panel-body
        {
            background-color:#D1DFF0 !important;
            border:none;   
        }
    </style> 
    <ext:ResourceManager ID="ResourceManager1" ClientIDMode="Static" runat="server">
    </ext:ResourceManager>
    <div id="divPrincipal" runat="server">
        <ext:Window
            ID="wndConsultaGeneric"
            runat="server"
            Title="Consulta Genérica"
            Layout="Fit"
            Height="350"
            Width="600">
            <Items>
                <ext:Panel ID="pnlGeneric"
                runat="server"
                AutoScroll="true"
                Border="false"
                AutoWidth="true"
                Layout="FitLayout">
                    <TopBar>
                        <ext:Toolbar ID="Toolbar1" runat="server"  AutoHeight="true" Layout="RowLayout" >
                            <Items>
                                <ext:Panel
                                    ID="pnlFiltro"
                                    runat="server"
                                    Layout="HBoxLayout"
                                    Height="22">
                                    <LayoutConfig>
                                        <ext:HBoxLayoutConfig Align="Middle"  />
                                    </LayoutConfig>
                                    <Items>
                                        <ext:TextField ID="txtFiltro" ClientIDMode="Static" runat="server" Flex="1" EnableKeyEvents="true">
                                            <DirectEvents>
                                                <KeyPress OnEvent="Test">
                                                    <ExtraParams>
                                                        <ext:Parameter Name="tecla" Value="e.getKey()" Mode="Raw">
                                                        </ext:Parameter>
                                                    </ExtraParams>
                                                </KeyPress>
                                            </DirectEvents>
                                            <Listeners>
                                                <KeyPress Handler="if (e.getKey() == e.ENTER) { e.stopEvent(); }" >
                                                </KeyPress>
                                            </Listeners>
                                        </ext:TextField>
                                        <ext:Button ID="btnFiltro" runat="server" Icon="Magnifier" Height="20" />
                                    </Items>
                                </ext:Panel>
                                <ext:Panel
                                    ID="pnlEscolhaFiltro"
                                    runat="server"
                                    Layout="HBoxLayout"
                                    Height="22">
                                    <LayoutConfig>
                                        <ext:HBoxLayoutConfig Align="Middle"  />
                                    </LayoutConfig>
                                    <Items>
                                    </Items>
                                </ext:Panel>
                            </Items>
                        </ext:Toolbar>
                    </TopBar>
                    <Content>
                    </Content>
                </ext:Panel>
            </Items>
        </ext:Window>
    </div>

---

Code Behind Of the Custom Control:

Code:

---

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Ext.Net;
using GestorAspNet.Data;
using System.ComponentModel;
using System.Data;
using System.Globalization;
using System.Drawing.Design;

namespace GestorAspNet.Generic
{
    using ListItem = System.Web.UI.WebControls.ListItem;

    public partial class ConsultaGeneric : System.Web.UI.UserControl
    {
        protected DataTable dt;
        protected GridPanel gridPanel;
        protected RadioGroup rdgEscolhaFiltro;
        protected string SelectCommand;

        public List<ListItem> Colunas { get; set; }
        public string WindowTitulo { get; set; }
        public string Tabela { get; set; }
        public string AutoExpandColumn { get; set; }
        public bool ShowRowNumber { get; set; }

        protected override void OnInit(EventArgs e)
        {
        }

        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                wndConsultaGeneric.Title = WindowTitulo;

                rdgEscolhaFiltro = new RadioGroup();
                List<string> listWidths = new List<string>();
                foreach (ListItem item in Colunas)
                {
                    Radio rdEscolha = new Radio();
                    rdEscolha.ID = item.Value;
                    rdEscolha.BoxLabel = item.Value;
                    rdgEscolhaFiltro.Items.Add(rdEscolha);
                    listWidths.Add(Convert.ToString((item.Value.Length * 6) + 25));
                }
                rdgEscolhaFiltro.ColumnsWidths = listWidths.ToArray();

                SelectCommand = "SELECT ";
                foreach (ListItem item in Colunas)
                {
                    SelectCommand += item.Text + ", ";
                }
                SelectCommand = SelectCommand.Substring(0, SelectCommand.Length - 2);
                SelectCommand += " FROM " + Tabela;

                pnlEscolhaFiltro.Items.Add(rdgEscolhaFiltro);
            }
            this.BuildGridPanel();
            pnlGeneric.ContentControls.Add(gridPanel);
        }

        [DirectMethod(Namespace = "Generic.Net")]
        protected void Test(Object sender, Ext.Net.DirectEventArgs e)
        {
            try
            {
                string tecla = e.ExtraParams["tecla"];
                if (tecla == "13")
                {
                    this.UpdateGrid(txtFiltro.Text);
                }
            }
            catch (Exception ex) { }
        }

        protected void UpdateGrid(string filtro)
        {
            SelectCommand = "SELECT ";
            foreach (ListItem item in Colunas)
            {
                SelectCommand += item.Text + ", ";
            }
            SelectCommand = SelectCommand.Substring(0, SelectCommand.Length - 2);
            SelectCommand += " FROM " + Tabela;
            if (!String.IsNullOrEmpty(txtFiltro.Text))
                SelectCommand += " WHERE Descricao LIKE '" + filtro + "%'";

            this.BuildStore();
            gridPanel.Reload();
        }

        private void BuildGridPanel()
        {
            gridPanel = new GridPanel();
            gridPanel.Border = false;
            gridPanel.StripeRows = true;
            gridPanel.TrackMouseOver = true;
            gridPanel.AutoExpandColumn = AutoExpandColumn;
            gridPanel.Store.Add(this.BuildStore());

            RowSelectionModel selMode = new RowSelectionModel();
            selMode.SingleSelect = true;
            gridPanel.SelectionModel.Add(selMode);

            if(ShowRowNumber)
                gridPanel.ColumnModel.Columns.Add(new RowNumbererColumn());
            foreach (DataColumn column in dt.Columns)
            {
                gridPanel.ColumnModel.Columns.Add(new Column
                {
                    ColumnID = column.ColumnName,
                    Header = column.Caption,
                    DataIndex = column.ColumnName
                });
            }

        }

        private Store BuildStore()
        {
            Store StoreConsultaGeneric = new Store();
            SelectCommand = "SELECT ";
            foreach (ListItem item in Colunas)
            {
                SelectCommand += item.Text + ", ";
            }
            SelectCommand = SelectCommand.Substring(0, SelectCommand.Length - 2);
            SelectCommand += " FROM " + Tabela;
            if (!String.IsNullOrEmpty(txtFiltro.Text) && rdgEscolhaFiltro != null)
                SelectCommand += " WHERE " + rdgEscolhaFiltro.CheckedItems[0].ID + " LIKE '" + txtFiltro.Text + "%'";
            dt = DataModule.GetInstancia().UtilMaster.GetDataTable(SelectCommand);
            if (StoreConsultaGeneric.Reader.Count == 0)
            {
                JsonReader reader = new JsonReader();
                foreach (DataColumn column in dt.Columns)
                {
                    reader.Fields.Add(new RecordField(column.Caption));
                }

                StoreConsultaGeneric.Reader.Add(reader);
            }
            StoreConsultaGeneric.DataSource = dt;
            StoreConsultaGeneric.DataBind();
            return StoreConsultaGeneric;
        }
    }
}

---

Code from a example page using the Custom Control:

Code:

---

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ConsultaPage.aspx.cs" Inherits="GestorAspNet.Generic.ConsultaPage" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<%@ Register Src="~/Generic/ConsultaGeneric.ascx" TagPrefix="uc" TagName="ConsultaGeneric" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <uc:ConsultaGeneric runat="server" Tabela="Produtos" AutoExpandColumn="Descricao" WindowTitulo="Consulta Genérica" >
        <Colunas>
            <asp:ListItem>Codigo</asp:ListItem>
            <asp:ListItem>Descricao</asp:ListItem>
            <asp:ListItem>PrecoVenda</asp:ListItem>
        </Colunas>
    </uc:ConsultaGeneric>
    </form>
</body>
</html>

---

Please guys, I tried all that I know to get it working but I failed. It only works on the initial load, and in the next Key events i cant get it working.
And yes, the DataModule its working already returning Data.

Thanks.

Please tell me. if already the Grid panel is working or not ?

mmcanal@yahoo.com

Quote:

---

Originally Posted by elbesh

Hello guys,

I'm trying to do a Custom Controls on ASP.NET using the GridPanel to make it generic from the
Table and Columns that I choose on Properties of the Control.

I was wondering if is possible to create a GridPanel from code behind, and the Store from code behind too
and the data coming from a DataTable that I fill with data from SQL by my own code.

The question is, i want to make a TextField and when I press ENTER key the GridPanel is Reloaded or Refreshed as you preffer
to the new Filter typed in the TextField. That means that when You press the ENTER the code behind must recognize that
Key and the Text and if the Text is not empty the filter is applied.

I Tried something already, follows:

Mark Up of the Custom Control:

Code:

---

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ConsultaGeneric.ascx.cs" Inherits="GestorAspNet.Generic.ConsultaGeneric" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <style type="text/css">
        .x-panel-body
        {
            background-color:#D1DFF0 !important;
            border:none;   
        }
    </style> 
    <ext:ResourceManager ID="ResourceManager1" ClientIDMode="Static" runat="server">
    </ext:ResourceManager>
    <div id="divPrincipal" runat="server">
        <ext:Window
            ID="wndConsultaGeneric"
            runat="server"
            Title="Consulta Genérica"
            Layout="Fit"
            Height="350"
            Width="600">
            <Items>
                <ext:Panel ID="pnlGeneric"
                runat="server"
                AutoScroll="true"
                Border="false"
                AutoWidth="true"
                Layout="FitLayout">
                    <TopBar>
                        <ext:Toolbar ID="Toolbar1" runat="server"  AutoHeight="true" Layout="RowLayout" >
                            <Items>
                                <ext:Panel
                                    ID="pnlFiltro"
                                    runat="server"
                                    Layout="HBoxLayout"
                                    Height="22">
                                    <LayoutConfig>
                                        <ext:HBoxLayoutConfig Align="Middle"  />
                                    </LayoutConfig>
                                    <Items>
                                        <ext:TextField ID="txtFiltro" ClientIDMode="Static" runat="server" Flex="1" EnableKeyEvents="true">
                                            <DirectEvents>
                                                <KeyPress OnEvent="Test">
                                                    <ExtraParams>
                                                        <ext:Parameter Name="tecla" Value="e.getKey()" Mode="Raw">
                                                        </ext:Parameter>
                                                    </ExtraParams>
                                                </KeyPress>
                                            </DirectEvents>
                                            <Listeners>
                                                <KeyPress Handler="if (e.getKey() == e.ENTER) { e.stopEvent(); }" >
                                                </KeyPress>
                                            </Listeners>
                                        </ext:TextField>
                                        <ext:Button ID="btnFiltro" runat="server" Icon="Magnifier" Height="20" />
                                    </Items>
                                </ext:Panel>
                                <ext:Panel
                                    ID="pnlEscolhaFiltro"
                                    runat="server"
                                    Layout="HBoxLayout"
                                    Height="22">
                                    <LayoutConfig>
                                        <ext:HBoxLayoutConfig Align="Middle"  />
                                    </LayoutConfig>
                                    <Items>
                                    </Items>
                                </ext:Panel>
                            </Items>
                        </ext:Toolbar>
                    </TopBar>
                    <Content>
                    </Content>
                </ext:Panel>
            </Items>
        </ext:Window>
    </div>

---

Code Behind Of the Custom Control:

Code:

---

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Ext.Net;
using GestorAspNet.Data;
using System.ComponentModel;
using System.Data;
using System.Globalization;
using System.Drawing.Design;

namespace GestorAspNet.Generic
{
    using ListItem = System.Web.UI.WebControls.ListItem;

    public partial class ConsultaGeneric : System.Web.UI.UserControl
    {
        protected DataTable dt;
        protected GridPanel gridPanel;
        protected RadioGroup rdgEscolhaFiltro;
        protected string SelectCommand;

        public List<ListItem> Colunas { get; set; }
        public string WindowTitulo { get; set; }
        public string Tabela { get; set; }
        public string AutoExpandColumn { get; set; }
        public bool ShowRowNumber { get; set; }

        protected override void OnInit(EventArgs e)
        {
        }

        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                wndConsultaGeneric.Title = WindowTitulo;

                rdgEscolhaFiltro = new RadioGroup();
                List<string> listWidths = new List<string>();
                foreach (ListItem item in Colunas)
                {
                    Radio rdEscolha = new Radio();
                    rdEscolha.ID = item.Value;
                    rdEscolha.BoxLabel = item.Value;
                    rdgEscolhaFiltro.Items.Add(rdEscolha);
                    listWidths.Add(Convert.ToString((item.Value.Length * 6) + 25));
                }
                rdgEscolhaFiltro.ColumnsWidths = listWidths.ToArray();

                SelectCommand = "SELECT ";
                foreach (ListItem item in Colunas)
                {
                    SelectCommand += item.Text + ", ";
                }
                SelectCommand = SelectCommand.Substring(0, SelectCommand.Length - 2);
                SelectCommand += " FROM " + Tabela;

                pnlEscolhaFiltro.Items.Add(rdgEscolhaFiltro);
            }
            this.BuildGridPanel();
            pnlGeneric.ContentControls.Add(gridPanel);
        }

        [DirectMethod(Namespace = "Generic.Net")]
        protected void Test(Object sender, Ext.Net.DirectEventArgs e)
        {
            try
            {
                string tecla = e.ExtraParams["tecla"];
                if (tecla == "13")
                {
                    this.UpdateGrid(txtFiltro.Text);
                }
            }
            catch (Exception ex) { }
        }

        protected void UpdateGrid(string filtro)
        {
            SelectCommand = "SELECT ";
            foreach (ListItem item in Colunas)
            {
                SelectCommand += item.Text + ", ";
            }
            SelectCommand = SelectCommand.Substring(0, SelectCommand.Length - 2);
            SelectCommand += " FROM " + Tabela;
            if (!String.IsNullOrEmpty(txtFiltro.Text))
                SelectCommand += " WHERE Descricao LIKE '" + filtro + "%'";

            this.BuildStore();
            gridPanel.Reload();
        }

        private void BuildGridPanel()
        {
            gridPanel = new GridPanel();
            gridPanel.Border = false;
            gridPanel.StripeRows = true;
            gridPanel.TrackMouseOver = true;
            gridPanel.AutoExpandColumn = AutoExpandColumn;
            gridPanel.Store.Add(this.BuildStore());

            RowSelectionModel selMode = new RowSelectionModel();
            selMode.SingleSelect = true;
            gridPanel.SelectionModel.Add(selMode);

            if(ShowRowNumber)
                gridPanel.ColumnModel.Columns.Add(new RowNumbererColumn());
            foreach (DataColumn column in dt.Columns)
            {
                gridPanel.ColumnModel.Columns.Add(new Column
                {
                    ColumnID = column.ColumnName,
                    Header = column.Caption,
                    DataIndex = column.ColumnName
                });
            }

        }

        private Store BuildStore()
        {
            Store StoreConsultaGeneric = new Store();
            SelectCommand = "SELECT ";
            foreach (ListItem item in Colunas)
            {
                SelectCommand += item.Text + ", ";
            }
            SelectCommand = SelectCommand.Substring(0, SelectCommand.Length - 2);
            SelectCommand += " FROM " + Tabela;
            if (!String.IsNullOrEmpty(txtFiltro.Text) && rdgEscolhaFiltro != null)
                SelectCommand += " WHERE " + rdgEscolhaFiltro.CheckedItems[0].ID + " LIKE '" + txtFiltro.Text + "%'";
            dt = DataModule.GetInstancia().UtilMaster.GetDataTable(SelectCommand);
            if (StoreConsultaGeneric.Reader.Count == 0)
            {
                JsonReader reader = new JsonReader();
                foreach (DataColumn column in dt.Columns)
                {
                    reader.Fields.Add(new RecordField(column.Caption));
                }

                StoreConsultaGeneric.Reader.Add(reader);
            }
            StoreConsultaGeneric.DataSource = dt;
            StoreConsultaGeneric.DataBind();
            return StoreConsultaGeneric;
        }
    }
}

---

Code from a example page using the Custom Control:

Code:

---

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ConsultaPage.aspx.cs" Inherits="GestorAspNet.Generic.ConsultaPage" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<%@ Register Src="~/Generic/ConsultaGeneric.ascx" TagPrefix="uc" TagName="ConsultaGeneric" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <uc:ConsultaGeneric runat="server" Tabela="Produtos" AutoExpandColumn="Descricao" WindowTitulo="Consulta Genérica" >
        <Colunas>
            <asp:ListItem>Codigo</asp:ListItem>
            <asp:ListItem>Descricao</asp:ListItem>
            <asp:ListItem>PrecoVenda</asp:ListItem>
        </Colunas>
    </uc:ConsultaGeneric>
    </form>
</body>
</html>

---

Please guys, I tried all that I know to get it working but I failed. It only works on the initial load, and in the next Key events i cant get it working.
And yes, the DataModule its working already returning Data.

Thanks.

---

Saddly, stills not working.