[CLOSED] How to Loop through each headercolumn editor in gridview clientside

  1. #1

    [CLOSED] How to Loop through each headercolumn editor in gridview clientside

    Hi,

    I am building a custom header filter for a gridpanel, which requires me to loop through each editor in the headercolumn collection.
    (wanna build a dynamiclinq string, that i want to send to the server)

    I've been trying to read through the ext.js documentation, but i can't figure it how to "reach" the editors in the loop - can you help me out?

    <%@ Page Language="VB" %>
    
    <%@ 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">
    <script runat="server">
        Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
            If Not Ext.Net.X.IsAjaxRequest Then
                Dim l As New List(Of FooData)
                l.Add(New FooData(1, 1, "Record 1"))
                l.Add(New FooData(2, 1, "Record 2"))
                l.Add(New FooData(3, 1, "Record 3"))
                l.Add(New FooData(4, 20, "Record 4"))
                l.Add(New FooData(5, 20, "Record 5"))
                l.Add(New FooData(6, 20, "Record 6"))
                Me.Store1.DataSource = l
                Me.Store1.DataBind()
            End If
        End Sub
        Public Class FooData
            Public ID As Integer
            Public TypeID As String
            Public Name As String
            Public Sub New(ByVal ID As Integer, ByVal TypeID As Integer, ByVal Name As String)
                Me.ID = ID
                Me.TypeID = TypeID
                Me.Name = Name
            End Sub
        End Class
    </script>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" Theme="Gray" />
        <script type="text/javascript">
                  
        </script>
        <div>
            <ext:Store ID="Store1" runat="server">
                <Reader>
                    <ext:JsonReader IDProperty="ID">
                        <Fields>
                            <ext:RecordField Name="ID" Type="Int" />
                            <ext:RecordField Name="Name" />
                            <ext:RecordField Name="TypeID" />
                        </Fields>
                    </ext:JsonReader>
                </Reader>
            </ext:Store>
            <ext:GridPanel runat="server" ID="GridPanel1" Height="300" StripeRows="true" StoreID="Store1">
                <ColumnModel runat="server">
                    <Columns>
                        <ext:Column ColumnID="ID" DataIndex="ID" Header="ID" />
                        <ext:Column ColumnID="Name" DataIndex="Name" Header="Name" />
                    </Columns>
                </ColumnModel>
                <View>
                    <ext:GridView ID="GridView" runat="server">
                        <HeaderRows>
                            <ext:HeaderRow>
                                <Columns>
                                    <ext:HeaderColumn>
                                        <Component>
                                            <ext:TextField ID="Filter1" runat="server" EnableKeyEvents="true">
                                                <Listeners>
                                                    <KeyUp Handler="applyFilter(this);" Buffer="2000" />
                                                </Listeners>
                                            </ext:TextField>
                                        </Component>
                                    </ext:HeaderColumn>
                                    <ext:HeaderColumn>
                                        <Component>
                                            <ext:TextField ID="TextField1" runat="server" EnableKeyEvents="true">
                                                <Listeners>
                                                    <KeyUp Handler="applyFilter(this);" Buffer="2000" />
                                                </Listeners>
                                            </ext:TextField>
                                        </Component>
                                    </ext:HeaderColumn>
                                </Columns>
                            </ext:HeaderRow>
                        </HeaderRows>
                    </ext:GridView>
                </View>
            </ext:GridPanel>
        </div>
        </form>
        <ext:XScript runat="server">
        <script type="text/javascript">
            function applyFilter(field) {
    
                // #{GridView}.each ?? How do i loop through each textfield in header column ?
    
            }
        
        </script>
        </ext:XScript>
    </body>
    </html>
    Last edited by Daniil; Nov 13, 2010 at 7:28 AM. Reason: [CLOSED]
  2. #2
    Hi,

    Please use the following code.

    Example
    var cols = GridView.headerRows[0].columns;
    for (var i = 0; i < cols.length; i++) {
        alert(cols[i].component.id)
    }
  3. #3
    B-e-a-utifull, just what i needed! Thanks :-)

Similar Threads

  1. [CLOSED] HeaderColumn is not working
    By albayrak in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: Jan 05, 2011, 5:49 AM
  2. HeaderColumn filter from codebehind
    By GijsZePa in forum 1.x Help
    Replies: 1
    Last Post: Apr 20, 2010, 9:28 AM
  3. [CLOSED] [1.0] Gridview Editor Column handler
    By ljankowski in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Jan 27, 2010, 7:49 AM
  4. Replies: 3
    Last Post: Aug 15, 2009, 2:55 PM
  5. [CLOSED] Can't have two components in HeaderColumn
    By harafeh in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Mar 31, 2009, 3:30 PM

Tags for this Thread

Posting Permissions