[CLOSED] Issue with Rendering GridPanel with Headers on Container as Popup

[mwiater]

Hi Team,

I am trying to render a normal grid panel with headers on Popup window. But its not happening. here is my code.

Model

	Public Class CompanyModel
		Public Property ID() As Integer
			Get
				Return m_ID
			End Get
			Set
				m_ID = Value
			End Set
		End Property
		Private m_ID As Integer
		Public Property Name() As String
			Get
				Return m_Name
			End Get
			Set
				m_Name = Value
			End Set
		End Property
		Private m_Name As String
		Public Property Price() As Double
			Get
				Return m_Price
			End Get
			Set
				m_Price = Value
			End Set
		End Property
		Private m_Price As Double
		Public Property Change() As Double
			Get
				Return m_Change
			End Get
			Set
				m_Change = Value
			End Set
		End Property
		Private m_Change As Double
		Public Property PctChange() As Double
			Get
				Return m_PctChange
			End Get
			Set
				m_PctChange = Value
			End Set
		End Property
		Private m_PctChange As Double
		Public Property LastChange() As DateTime
			Get
				Return m_LastChange
			End Get
			Set
				m_LastChange = Value
			End Set
		End Property
		Public Property partialIDs As String

		Private m_LastChange As DateTime
		Public Property companyList As List(Of CompanyModel)
		Public Property companyNameList As List(Of CompanyModel)
		Public Function GetAll() As List(Of CompanyModel)
			Dim today As DateTime = DateTime.Today

			Return New List(Of CompanyModel)() From {
				New CompanyModel() With {
					.ID = 1,
					.Name = "3m Co",
					.Price = 71.72,
					.Change = 0.02,
					.PctChange = 0.03,
					.LastChange = today
				},
				New CompanyModel() With {
					.ID = 2,
					.Name = "Alcoa Inc",
					.Price = 29.01,
					.Change = 0.42,
					.PctChange = 1.47,
					.LastChange = today
				},
				New CompanyModel() With {
					.ID = 3,
					.Name = "Altria Group Inc",
					.Price = 83.81,
					.Change = 0.28,
					.PctChange = 0.34,
					.LastChange = today
				},
				New CompanyModel() With {
				   .ID = 4,
				   .Name = "American Express Company",
				   .Price = 52.55,
				   .Change = 0.01,
				   .PctChange = 0.02,
				   .LastChange = today
				},
				New CompanyModel() With {
					.ID = 5,
					.Name = "American International Group, Inc.",
					.Price = 64.13,
					.Change = 0.31,
					.PctChange = 0.49,
					.LastChange = today
				},
				New CompanyModel() With {
					.ID = 6,
					.Name = "AT&T Inc.",
					.Price = 31.61,
					.Change = -0.48,
					.PctChange = -1.54,
					.LastChange = today
				}
			}
		End Function

		Public Shared Function GetAllCompanies() As IEnumerable(Of CompanyModel)
			Dim now As DateTime = DateTime.Now

			Return New Object() {New CompanyModel() With {.Name = "3m Co", .Price = 71.72, .Change = 0.02, .PctChange = 0.03, .LastChange = now},
				New Object() {"Alcoa Inc", 29.01, 0.42, 1.47, now},
				New Object() {"Altria Group Inc", 83.81, 0.28, 0.34, now},
				New Object() {"American Express Company", 52.55, 0.01, 0.02, now},
				New Object() {"American International Group, Inc.", 64.13, 0.31, 0.49, now},
				New Object() {"AT&T Inc.", 31.61, -0.48, -1.54, now},
				New Object() {"Boeing Co.", 75.43, 0.53, 0.71, now},
				New Object() {"Caterpillar Inc.", 67.27, 0.92, 1.39, now},
				New Object() {"Citigroup, Inc.", 49.37, 0.02, 0.04, now},
				New Object() {"E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, now},
				New Object() {"Exxon Mobil Corp", 68.1, -0.43, -0.64, now},
				New Object() {"General Electric Company", 34.14, -0.08, -0.23, now},
				New Object() {"General Motors Corporation", 30.27, 1.09, 3.74, now},
				New Object() {"Hewlett-Packard Co.", 36.53, -0.03, -0.08, now},
				New Object() {"Honeywell Intl Inc", 38.77, 0.05, 0.13, now},
				New Object() {"Intel Corporation", 19.88, 0.31, 1.58, now},
				New Object() {"International Business Machines", 81.41, 0.44, 0.54, now},
				New Object() {"Johnson & Johnson", 64.72, 0.06, 0.09, now},
				New Object() {"JP Morgan & Chase & Co", 45.73, 0.07, 0.15, now},
				New Object() {"McDonald""s Corporation", 36.76, 0.86, 2.4, now},
				New Object() {"Merck & Co., Inc.", 40.96, 0.41, 1.01, now},
				New Object() {"Microsoft Corporation", 25.84, 0.14, 0.54, now},
				New Object() {"Pfizer Inc", 27.96, 0.4, 1.45, now},
				New Object() {"The Coca-Cola Company", 45.07, 0.26, 0.58, now},
				New Object() {"The Home Depot, Inc.", 34.64, 0.35, 1.02, now},
				New Object() {"The Procter & Gamble Company", 61.91, 0.01, 0.02, now},
				New Object() {"United Technologies Corporation", 63.26, 0.55, 0.88, now},
				New Object() {"Verizon Communications", 35.57, 0.39, 1.11, now},
				New Object() {"Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, now}}
		End Function

		Public Function GetCompanyNames() As List(Of CompanyModel)
			Dim list = GetAll()
			Return list
		End Function
	End Class

Controller

Imports System.Web.Mvc
Imports Ext.Net
Imports Ext.Net.MVC

Namespace Controllers
	Public Class HomeController
		Inherits Controller

        ' GET: Home
        Function Index() As ActionResult
			Dim companyModel As New CompanyModel
			companyModel.companyList = companyModel.GetAll()
			Return View(companyModel)
		End Function
		Function Save() As ActionResult

			Return View()
		End Function

		Function OpenAddReview(qaBatchID As Integer, containerId As String) As ActionResult


			Dim companyModel As New CompanyModel
			companyModel.companyList = companyModel.GetAll()
			Dim ret As New Ext.Net.MVC.PartialViewResult()
			ret.ViewName = "_AddReview"
			ret.Model = companyModel
			ret.ContainerId = containerId
			ret.RenderMode = RenderMode.AddTo
			ret.ClearContainer = True

			Me.GetCmp(Of Window)(containerId).Show()
			Return ret
		End Function
	End Class
End Namespace

Index View

@ModelType CommissionCheckProblem.CompanyModel
<h2>Index</h2>

@Html.X().ResourceManager()

@(Html.X().Window().ID("reviewWindow") _
	.Width(1200) _
	.OverflowX(Overflow.Scroll) _
	.OverflowY(Overflow.Scroll) _
	.Hidden(True) _
	.Title("QAR Edit - " + Model.Name + " - " + Model.PctChange.ToString() + " - " + Model.LastChange.ToString()) _
	.AutoUpdateLayout(True))

@(Html.X().Button.ID("btnAddReview") _
	.Text("Add") _
	.DirectEvents(Sub(ls)
					  ls.Click.Url = Url.Action("OpenAddReview")
					  ls.Click.ExtraParams.Add(New Parameter("qaBatchID", "1", mode:=ParameterMode.Value))
					  ls.Click.ExtraParams.Add(New Parameter("containerId", "reviewWindow", mode:=ParameterMode.Value))
				  End Sub))

_AddReview Partial View

@ModelType CommissionCheckProblem.CompanyModel
@(Html.X().Container().Content(@@<text>
    <div>@(Html.X().GridPanel().ID("CompanyGrid") _
		.Store(Html.X().Store() _
		.ID("Store2") _
		.Model(Html.X().Model() _
		.Fields(
			New ModelField("ID", ModelFieldType.Int),
			New ModelField("Name"),
			New ModelField("Price", ModelFieldType.Float),
			New ModelField("Change", ModelFieldType.Float),
			New ModelField("PctChange", ModelFieldType.Float),
			New ModelField("LastChange", ModelFieldType.Date)
		)
		).DataSource(Model.companyList)) _
		.ColumnModel(
		Html.X().Column().Text("ID").DataIndex("ID").Width(35),
		Html.X().Column() _
		.Text("Name") _
		.DataIndex("Name") _
		.Flex(1),
		Html.X().Column() _
		.Text("Price") _
		.DataIndex("Price") _
		.Renderer(RendererFormat.UsMoney),
		Html.X().Column() _
		.Text("Change") _
		.DataIndex("Change"),
		Html.X().Column() _
		.Text("PctChange") _
		.DataIndex("PctChange"),
		Html.X().DateColumn() _
		.Text("Last Updated") _
		.DataIndex("LastChange") _
		.Format("yyyy-MM-dd")
		))</div></text>).DestroyContent(True))

Can you please help in rendering this simple grid?

Note: Everything here is hard coded in parameter and Model class is just an example class, just to avoid confusion, please ignore extra properties of Model defined here. I posted here so that you can having working example and this should avoid any delay.

Thanks.

[fabricio.murta]

Hello @mwiater!

I'm getting syntax errors at least from your partial view here. Just by copy-pasting your code I get here:



Do you also get this error on your side? If so, maybe you should try indenting the code to fix those syntax errors? I agree that Visual Studio does not really excels in indenting Razor syntax code but it could save you from a lot of trouble trying to guess where the error is.

[fabricio.murta]

And hello again!

I could have your partial view working if I dropped the use of .Content() and the <div />. Do your scenario require the div? Or maybe you just need the div to add a style (CSS Class) to the surrounding frame?

Actually you could bring the whole window from the partial view. Just a guess, but who knows, this could help.

Here's how I've written your partial view for it to work in your sample:

@ModelType Controllers.c61424_gridPartViewController.CompanyModel

@(
    Html.X().Container() _
        .Items(
            Html.X().GridPanel() _
                .ID("CompanyGrid") _
                .Store(
                    Html.X().Store() _
                        .ID("Store2") _
                        .Model(
                            Html.X().Model() _
                                .Fields(
                                    New ModelField("ID", ModelFieldType.Int),
                                    New ModelField("Name"),
                                    New ModelField("Price", ModelFieldType.Float),
                                    New ModelField("Change", ModelFieldType.Float),
                                    New ModelField("PctChange", ModelFieldType.Float),
                                    New ModelField("LastChange", ModelFieldType.Date)
                                )
                        ) _
                        .DataSource(Model.companyList)
                ) _
                .ColumnModel(
                    Html.X().Column().Text("ID").DataIndex("ID").Width(35),
                    Html.X().Column() _
                        .Text("Name") _
                        .DataIndex("Name") _
                        .Flex(1),
                    Html.X().Column() _
                        .Text("Price") _
                        .DataIndex("Price") _
                        .Renderer(RendererFormat.UsMoney),
                    Html.X().Column() _
                        .Text("Change") _
                        .DataIndex("Change"),
                    Html.X().Column() _
                        .Text("PctChange") _
                        .DataIndex("PctChange"),
                    Html.X().DateColumn() _
                        .Text("Last Updated") _
                        .DataIndex("LastChange") _
                        .Format("yyyy-MM-dd")
                )
        )
)

Notice I'm using a different namespace for the model (for simplicity I've appended it in the controller!). While I also re-formatted your index view for better understanding of your code, I don't remember getting any error in its original form, but anyway, the index view here looks like this after a few indentation:

@Code
    Layout = Nothing
End Code

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <div> 
        @ModelType Controllers.c61424_gridPartViewController.CompanyModel
        <h2>Index</h2>

        @Html.X().ResourceManager()

        @(Html.X().Window().ID("reviewWindow") _
            .Width(1200) _
            .OverflowX(Overflow.Scroll) _
            .OverflowY(Overflow.Scroll) _
            .Hidden(True) _
            .Title("QAR Edit - " + Model.Name + " - " + Model.PctChange.ToString() + " - " + Model.LastChange.ToString()) _
            .AutoUpdateLayout(True))

        @(
            Html.X().Button.ID("btnAddReview") _
                .Text("Add") _
                .DirectEvents(Sub(ls)
                    ls.Click.Url = Url.Action("OpenAddReview")
                    ls.Click.ExtraParams.Add(New Parameter("qaBatchID", "1", mode:=ParameterMode.Value))
                    ls.Click.ExtraParams.Add(New Parameter("containerId", "reviewWindow", mode:=ParameterMode.Value))
                End Sub)
        )
    </div>
</body>
</html>

Notice the Layout = Nothing part is particularly relevant. It means all that it takes to draw the page is on the code pasted above and nothing additional is needed.

I didn't change the model+controller code and just visual studio's own reindentation fixes seems to do the job, so I'm not re-posting them here.

I hope this helps!

[fabricio.murta]

Hello @mwiater!

Been some time since your last reply here. Do you still need help with this issue? We'll wait another week for your feedback before marking this as closed -- which will not prevent you from posting follow-ups when you are able to, though.