Pretty noob question... :(

**kabalkunz** · Aug 26, 2011, 2:47 AM

Hi there.
My question is pretty... noob :(
Besides I know ASP.NET, I am a JS noob. Because of that, I always use UpdatePanel and AjaxControlToolkit in my asp.net programs.
Recently I finded this very cool controls page, downloaded the ext.net framework and I started trying to use it.
I feel than I don't understand yet how Ext.Net works.
I know than Ext.Net is based in ExtJs (wich requires a lot of JS knowledge... not recommended for JS noobs like me).
Here is the deal: I need use the "ext:GridPanel" almost like I use the "asp:GridView".
I mean: I only concern about drag and drop the "asp:GridView", configure a bunch of columns and the only two lines needed to fill the GridView:
- [myGrid.DataSource=something]
- [myGrid.DataBind()]
and finish!

Please correct me if I am wrong but:
Is there a way to use the "ext:GridPanel" in the very same easy way of "asp:GridView"?
or
Ext.Net needs a lot of JS usage?

Thks in advance.
------

**geoffrey.mcgill** · Aug 26, 2011, 3:15 AM

Hi,

Welcome.

JavaScript knowledge is not required, but as you progress, sprinkling in a little custom JavaScript with Ext.NET will allow you to configure functionality exactly as you see fit.

The following sample uses a basic SQLDataSource + GridPanel.

https://examples1.ext.net/#/GridPane...SqlDataSource/

Within the sample above, there are further features which demonstrate some simple JavaScript customisations (Column Renderers). The Renderers are not required, but as mentioned, do help with getting exactly what you ultimately want.

Another GridPanel sample is the following:

https://examples1.ext.net/#/GridPanel/ArrayGrid/Simple/

Again, the Column Renderers are not required, but do help spice things up.

Hope this helps.

**kabalkunz** · Aug 26, 2011, 3:53 PM

Thks geoffrey.

I watched the examples you give me and tested.
Here is my code:

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Test2.aspx.vb" Inherits="Modulo_Admin_Test2" %>

<!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">
    <div>
    
        <ext:ResourceManager ID="ResourceManager1" runat="server" /> 

        <ext:Label ID="lblTest" runat="server" EnableViewState="true">
        </ext:Label>

        <ext:Button ID="btnTest" runat="server" Text="Submit" >
        </ext:Button>




        <ext:Store 
            ID="Store1" 
            runat="server" >
            <Reader>
                <ext:JsonReader>
                    <Fields>
                        <ext:RecordField Name="sFolioCompuesto" />
                        <ext:RecordField Name="sNombre" />
                        <ext:RecordField Name="iVersion" />
                    </Fields>
                </ext:JsonReader>
            </Reader>
        </ext:Store>



        <ext:GridPanel
            ID="gpSeguimiento"
            runat="server" 
            StoreID="Store1"
            StripeRows="true"
            Title="Seguimiento" 
            Width="800" 
            Height="300"
            AutoExpandColumn="sFolioCompuesto" >
            <ColumnModel ID="ColumnModel1" runat="server">
                <Columns>
                    <ext:RowNumbererColumn />
                    <ext:Column ColumnID="sFolioCompuesto" Header="Identificación" Width="160" DataIndex="sFolioCompuesto" />
					<ext:Column ColumnID="sNombre" Header="Nombre del Documento" Width="160" DataIndex="sNombre" />
					<ext:Column ColumnID="iVersion" Header="Rev." Width="160" DataIndex="iVersion" />
                </Columns>
            </ColumnModel>
            <SelectionModel>
                <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" />
            </SelectionModel>
            <LoadMask ShowMask="true" />
            <BottomBar>
                 <ext:PagingToolbar ID="PagingToolbar1" runat="server" PageSize="10" >
                    <Items>
                        <ext:Label ID="Label1" runat="server" Text="Page size:" />
                        <ext:ToolbarSpacer ID="ToolbarSpacer1" runat="server" Width="10" />
                        <ext:ComboBox ID="ComboBox1" runat="server" Width="80">
                            <Items>
                                <ext:ListItem Text="5" />
                                <ext:ListItem Text="10" />
                                <ext:ListItem Text="15" />
                                <ext:ListItem Text="20" />
                            </Items>
                            <SelectedItem Value="10" />
                            <Listeners>
                                <Select Handler="#{PagingToolbar1}.pageSize = parseInt(this.getValue()); #{PagingToolbar1}.doLoad();" />
                            </Listeners>
                        </ext:ComboBox>
                    </Items>
                </ext:PagingToolbar>
            </BottomBar>
        </ext:GridPanel>


    </div>
    </form>
</body>
</html>

And in the code behind:

Imports Alestra.SCD.BLL.Admin
Imports Alestra.SCD.BLL.Solicitud

Partial Class Modulo_Admin_Test2
    Inherits System.Web.UI.Page

    Dim bVar As Boolean = False 'this bool variable is the used to switch the datatable fill

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        Me.lblTest.Text = bVar.ToString()
    End Sub

    Private Sub LoadGrid()
        Dim oSolicitud As New SolicitudAlta()
        Dim dtSolicitud As DataTable = Nothing

        If Me.bVar = True Then 'change the property than allow me to change te amount of rows returned by the datatable function
            oSolicitud.sFolioCompuesto = "PR-PC-VTE-2" 'return one single row
        Else
            oSolicitud.sFolioCompuesto = "" 'return all the rows in the sql table
        End If

        dtSolicitud = oSolicitud.List() 'function made by me than loads a datatable from SQL server

        Me.Store1.DataSource = dtSolicitud.DefaultView
        Me.Store1.DataBind()

    End Sub

    Protected Sub btnTest_DirectClick(ByVal sender As Object, ByVal e As Ext.Net.DirectEventArgs) Handles btnTest.DirectClick
        LoadGrid()
        bVar = Not bVar
        Me.lblTest.Text = bVar.ToString()
    End Sub

End Class

Now my question is:

When I load the page for the first time, my button works fine, but if I click again, the page has no changes. According to my code, the button must load all rows of the table in my grid in the 1st, 3rd, 5th times and so on; and load only 1 row in the 2nd, 4th, 6th times and so on. This functionality is because I use a bool variable "bVar" (for testing grid).

How can I do for make the button usable not only in its first use? I need to make special stuff with JS to acomplish that?

Thks in advanced.
------
PS:
One of the examples you kindly give me use "asp:SqlDataSource".
But I need to use datatables filled since special classes (created by me) than interact with SQL server, Oracle, etc.
Because of that, I cannot use "asp:SqlDataSource" and put all the SQL-server interaction in the html code.

**Vladimir** · Aug 26, 2011, 4:06 PM

bVar variable is always false in LoadGrid

**kabalkunz** · Aug 26, 2011, 4:40 PM

Oh,
All was solved changing the line:
Dim bVar As Boolean = False
to
Shared bVar As Boolean = False

thks a lot Vladimir.
------

**geoffrey.mcgill** · Aug 26, 2011, 7:30 PM

Hi,

Glad to hear you have a sample working. Binding to DataTable objects is not a problem.

If I may, I'll offer a couple other minor syntax revisions:

1. In general, many of the Ext.Net Components do not require setting the .ID property. Removing the .ID property will help clean up your markup.
2. Move the <ext:Store> inside the <ext:GridPanel>, then remove id related properties. You can then get an instance of the Store by calling gpSeguimiento.GetStore().

Other than that, your code looks great.

Example

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Test2.aspx.vb" Inherits="Modulo_Admin_Test2" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>


<!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>Ext.NET Example</title>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" /> 
 
        <ext:Label ID="lblTest" runat="server" EnableViewState="true" />
 
        <ext:Button ID="btnTest" runat="server" Text="Submit" />
 
        <ext:GridPanel
            ID="gpSeguimiento"
            runat="server"
            StripeRows="true"
            Title="Seguimiento"
            Width="800"
            Height="300"
            AutoExpandColumn="sFolioCompuesto">
            <Store>
                <ext:Store runat="server">
                    <Reader>
                        <ext:JsonReader>
                            <Fields>
                                <ext:RecordField Name="sFolioCompuesto" />
                                <ext:RecordField Name="sNombre" />
                                <ext:RecordField Name="iVersion" />
                            </Fields>
                        </ext:JsonReader>
                    </Reader>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:RowNumbererColumn />
                    <ext:Column ColumnID="sFolioCompuesto" Header="Identificación" Width="160" DataIndex="sFolioCompuesto" />
                    <ext:Column ColumnID="sNombre" Header="Nombre del Documento" Width="160" DataIndex="sNombre" />
                    <ext:Column ColumnID="iVersion" Header="Rev." Width="160" DataIndex="iVersion" />
                </Columns>
            </ColumnModel>
            <SelectionModel>
                <ext:RowSelectionModel runat="server" />
            </SelectionModel>
            <LoadMask ShowMask="true" />
            <BottomBar>
                 <ext:PagingToolbar runat="server" PageSize="10" >
                    <Items>
                        <ext:Label runat="server" Text="Page size:" />
                        <ext:ToolbarSpacer runat="server" Width="10" />
                        <ext:ComboBox runat="server" Width="80">
                            <Items>
                                <ext:ListItem Text="5" />
                                <ext:ListItem Text="10" />
                                <ext:ListItem Text="15" />
                                <ext:ListItem Text="20" />
                            </Items>
                            <SelectedItem Value="10" />
                            <Listeners>
                                <Select Handler="#{PagingToolbar1}.pageSize = parseInt(this.getValue()); #{PagingToolbar1}.doLoad();" />
                            </Listeners>
                        </ext:ComboBox>
                    </Items>
                </ext:PagingToolbar>
            </BottomBar>
        </ext:GridPanel>
    </form>
</body>
</html>

**kabalkunz** · Aug 26, 2011, 7:45 PM

Oh, I see.
If I put the store inside the grid the code will be cleaner, great!

I am glad to see than this framework not require to be a JS expert.
My background: I was a win-forms programmer for several years and when I programmed in web, always used UpdatePanel/ajaxToolkit from Microsoft, because of that, I never learned JS.

I think I need to learn JS, because all people say to me than JS is the future.

thks a lot!
------

**geoffrey.mcgill** · Aug 26, 2011, 7:54 PM

Originally Posted by kabalkunz

I think I need to learn JS, because all people say to me than JS is the future.

Learning some of the JavaScript basics will come in handy.

C# developers might find the transition to JavaScript a little smoother, since syntactically the two languages are very similar. curly braces + semi-colons.

Thread: Pretty noob question... :(

Thread Tools

Search Thread

Display

Pretty noob question... :(

Similar Threads

[CLOSED] Hiding and Unhiding a checkbox via a direct event. Pretty sure this used to work.

A question about js run

Question

Question about ConfirmationList

CenterLayout in code behind- noob

Posting Permissions

Sitemap

Downloads

Resources

Thread: Pretty noob question... :(

Pretty noob question... :(

Similar Threads

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us