Ext.Net: RowExpander: Unable to display nested GridPanel in Codebehind (VB.NET)

  1. #1

    Ext.Net: RowExpander: Unable to display nested GridPanel in Codebehind (VB.NET)

    Hi everyone! Thank you in advance for your rsponses.

    I'm developing an ASP.NET website and I'm using a GridPanel with a RowExpander section. :

    <ext:RowExpander ID="RowExpander1" runat="server">
                <Loader ID="Loader1" runat="server" DirectMethod="#{DirectMethods}.GetGrid" Mode="Component">
                    <LoadMask ShowMask="true" />
                    <Params>
                        <ext:Parameter Name="id" Value="this.record.getId()" Mode="Raw" />
                    </Params>
                </Loader>
            </ext:RowExpander>
    In the codebehind, the function called "GetData", has to create dinamically the nested GridPanel looks like that:

    <Ext.Net.DirectMethod()>
    Public Function GetGrid(ByVal parameters As Dictionary(Of String, String)) As Object
    
        Dim data As New List(Of Object)
    
        For i = 1 To 10
            data.Add(New With {.ID = "P" & i, .Name = "Product " & i})
        Next
    
        Dim config As New Ext.Net.GridPanel.Config
    
        config.Height = 50
        config.EnableColumnHide = False
        config.StoreID = "Store2"
    
        Dim store As New Ext.Net.Store
        Dim model As New Ext.Net.Model
    
        store.ID = "Store2"
        store.DataSource = data
        store.ModelName = "Model2"
    
        model.ID = "Model2"
        model.IDProperty = "ID"
        model.Fields.Add("ID")
        model.Fields.Add("Name")
    
        store.Model.Add(model)
        config.Store.Add(store)
        config.StoreID = "Store2"
    
        Dim column As New Ext.Net.Column
        column.ID = "ColumnModel2"
        column.Text = "Products's Name"
        column.DataIndex = "Name"
        config.ColumnModel.Columns.Add(column)
        config.ColumnModel.Add(column)
    
        Dim grid As New Ext.Net.GridPanel(config)
    
        Return Ext.Net.ComponentLoader.ToConfig(grid)
    
    End Function
    When I click the "+" in the GridPanel, it shows a empty grid, even without columns. In fact, the code generated by Ext.Net.ComponentLoader.ToConfig(grid) is:

    [{"height":50,"xtype":"grid","columns":{},"enableColumnHide":false,"store":"Store2"}]
    So something I am doing wrong in the GetGrid function. What am I missing?

    Every example I run into is written in C#.
  2. #2
    No one? I would really appreciate any help.

    Thanks.
  3. #3
    Hi @jamesand,

    Please remove
    config.StoreID = "Store2"
    A GridPanel's Store and StoreID properties should not be used at the same time. With the latest Ext.NET sources from SVN trunk it throws a respective Exception.
  4. #4
    Hi Daniil, i already tried it that way. But no data nor even columns are shown. Here is my current code:

    Dim data As New List(Of Object)
    
            For i = 1 To 10
                data.Add(New With {.ID = "P" & i, .Name = "Product " & i})
            Next
    
            Dim config As New Ext.Net.GridPanel.Config
    
            config.Height = 50
            config.EnableColumnHide = False
    
            Dim store As New Ext.Net.Store
            Dim model As New Ext.Net.Model
    
            store.DataSource = data
    
            'model.IDProperty = "ID"
            model.Fields.Add("ID")
            model.Fields.Add("Name")
    
            store.Model.Add(model)
            config.Store.Add(store)
    
            Dim column As New Ext.Net.Column
            column.Text = "Nombre"
            column.DataIndex = "Name"
            config.ColumnModel.Columns.Add(column)
    
            Dim grid As New Ext.Net.GridPanel(config)
    
            Return Ext.Net.ComponentLoader.ToConfig(grid)
    The thing is that even columns are not shown! Don't know what else try.
  5. #5
    Please provide a full test case. I will investigate.
  6. #6
    In fact I'm trying to develop one of your examples in VB.NET before modifying a website to use with Ext.Net. This is the demo:

    https://examples2.ext.net/#/GridPane...ic_GridPanels/

    So the HTML code is quite the same, but the code behind I need to use (GetGrid function) has to be coded in VB instead C#.
  7. #7
    Well, softly saying, I am not fluent in VB.NET. So, in such case I use C# to VB.NET converters. For example,
    http://converter.telerik.com/

    Seems, VB.NET has no object initializers for read-only properties (though, I am not 100% sure), so, before conversion I had to change C# code to:

    [DirectMethod]
    public static string GetGrid(Dictionary<string, string> parameters)
    {
        GridPanel grid = new GridPanel
        {
            Height = 200,
            EnableColumnHide = false
        };
            
        List<object> data = new List<object>();
            
        for (int i = 1; i <= 10; i++)
        {
            data.Add(new { ID = "P" + i, Name = "Product " + i });
        }
    
        Store store = new Store();
    
        Model model = new Model()
        {
            IDProperty = "ID"
        };
            
        model.Fields.Add(new ModelField("ID"));
        model.Fields.Add(new ModelField("Name"));
            
            
        store.Model.Add(model);
    
        store.DataSource = data;
        grid.Store.Add(store);
    
        grid.ColumnModel.Columns.Add(new Column { Text = "Products's Name", DataIndex = "Name" });
    
        return ComponentLoader.ToConfig(grid);
    }
    When put it to the convertor, slightly modified the output to get it compilable and, finally, got a VB.NET example.

    <%@ Page Language="VB" %>
    
    <%@ Import Namespace="System.Collections.Generic" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        Protected Sub Page_Load(sender As Object, e As EventArgs)
            If Not ExtNet.IsAjaxRequest Then
                Dim data As New List(Of Object)()
    
                For i As Integer = 1 To 10
                    data.Add(New With { _
                        .ID = "S" & i.ToString(), _
                        .Name = "Supplier " & i.ToString() _
                    })
                Next
    
                Me.Store1.DataSource = data
            End If
    
        End Sub
    
        <DirectMethod> _
        Public Shared Function GetGrid(parameters As Dictionary(Of String, String)) As String
            Dim grid As New GridPanel() With { _
                .Height = 200, _
                .EnableColumnHide = False _
            }
    
            Dim data As New List(Of Object)()
    
            For i As Integer = 1 To 10
                data.Add(New With { _
                    .ID = "P" & i.ToString(), _
                    .Name = "Product " & i.ToString() _
                })
            Next
    
            Dim store As New Store()
    
            Dim model As New Model() With { _
                .IDProperty = "ID" _
            }
    
            model.Fields.Add(New ModelField("ID"))
            model.Fields.Add(New ModelField("Name"))
    
    
            store.Model.Add(model)
    
            store.DataSource = data
            grid.Store.Add(store)
    
            grid.ColumnModel.Columns.Add(New Column() With { _
                .Text = "Products's Name", _
                .DataIndex = "Name" _
            })
    
            Return ComponentLoader.ToConfig(grid)
        End Function
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>Ext.NET v2 Example</title>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
    
            <ext:GridPanel
                runat="server"
                Title="Expander Rows with GridPanel"
                Collapsible="true"
                AnimCollapse="true"
                Icon="Table"
                Width="600"
                Height="450"
                DisableSelection="true">
                <Store>
                    <ext:Store ID="Store1" runat="server">
                        <Model>
                            <ext:Model runat="server" IDProperty="ID">
                                <Fields>
                                    <ext:ModelField Name="ID" />
                                    <ext:ModelField Name="Name" />
                                </Fields>
                            </ext:Model>
                        </Model>
                    </ext:Store>
                </Store>
                <ColumnModel runat="server">
                    <Columns>
                        <ext:Column runat="server" Text="Supplier" DataIndex="Name" Flex="1" />
                    </Columns>
                </ColumnModel>
                <Plugins>
                    <ext:RowExpander runat="server">
                        <Loader runat="server" DirectMethod="#{DirectMethods}.GetGrid" Mode="Component">
                            <LoadMask ShowMask="true" />
                            <Params>
                                <ext:Parameter Name="id" Value="this.record.getId()" Mode="Raw" />
                            </Params>
                        </Loader>
                    </ext:RowExpander>
                </Plugins>
            </ext:GridPanel>
        </form>
    </body>
    </html>

Similar Threads

  1. Replies: 1
    Last Post: Aug 29, 2012, 10:34 PM
  2. Replies: 1
    Last Post: Mar 29, 2012, 10:42 PM
  3. Replies: 3
    Last Post: Apr 06, 2011, 6:27 PM
  4. Replies: 4
    Last Post: Jan 28, 2011, 9:55 AM
  5. Replies: 2
    Last Post: Jul 01, 2010, 1:24 AM

Tags for this Thread

Posting Permissions