[CLOSED] Issues with Editable GridPanel on PartialView when rendered using Container.Content

[mwiater]

Hi Team,

Continuing from same example as we were discussing in this thread . Now I am facing an issue where I have added a combobox on GridPanel on my partial view, and it is not working as expected.

Issue on _CompanyDetail view GridPanel:
1. Name column is set to combobox in editable mode, but when I click the dropdown arrow to select items from the list, the arrow actually makes the control back to non editable cell.
2. Last Updated column is a date column, and on cell editing, when I click on calendar icon, editable field again becomes non editable cell. Means it comes back to original state.

Now in our last thread we spoke on how we can render html + ext.net controls both from partial view on Window by wrapping whole partial view inside Content of Container, I am doing that same, and facing these above issues. But if I remove all the html part, and dont use Container to wrap any content, then things works fine. So it seems like problem is coming up when we wrap content inside container. I am putting same example here, please help us resolve this issue.

***CODE***

Model

Imports System.Collections
Imports System.Collections.Generic

Namespace ExtNETExamples
    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
        Private m_LastChange As DateTime
        Public Property companyList 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 Shared Function GetData() As IEnumerable
	        Dim firstNames = New String() {"Russel", "Clark", "Steve", "Sam", "Lance", "Robert", _
		        "Sean", "David", "Justin", "Nicolas", "Brent"}
	        Dim lastNames = New String() {"Wood", "Lewis", "Scott", "Parker", "Ross", "Garcia", _
		        "Bell", "Kelly", "Powell", "Moore", "Cook"}

	        Dim ratings = New Integer() {1, 2, 3, 4, 5}
	        Dim salaries = New Integer() {100, 400, 900, 1500, 1000000}
            Dim count As Integer  = 50000
	        Dim data = New Object(count - 1) {}
	        Dim rnd = New Random()

	        For i As Integer = 0 To count - 1
		        Dim ratingId = rnd.[Next](ratings.Length)
		        Dim salaryId = rnd.[Next](salaries.Length)
		        Dim firstNameId = rnd.[Next](firstNames.Length)
		        Dim lastNameId = rnd.[Next](lastNames.Length)

		        Dim rating = ratings(ratingId)
		        Dim salary = salaries(salaryId)
		        Dim name = [String].Format("{0} {1}", firstNames(firstNameId), lastNames(lastNameId))
		        Dim id = "rec-" + i.ToString()

		        data(i) = New Object() {id, name, rating, salary}
	        Next

	        Return data
        End Function
    End Class
End Namespace

Home Controller

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

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 InfiniteScrolling() As ActionResult
            Return View(companyModel.GetData())
        End Function
        Function EditDetail(id As Integer, containerId As String) As ActionResult
            Dim cmModel As New CompanyModel
            cmModel.companyList = cmModel.GetAll().Where(Function(m) m.ID = id).ToList()
            If(cmModel.companyList IsNot Nothing)
                For each item In cmModel.companyList
                    cmModel.ID = item.ID
                    cmModel.Name= item.Name
                    cmModel.Price = item.Price
                    cmModel.PctChange = item.PctChange
                    cmModel.LastChange = item.LastChange
                    cmModel.Change = item.Change
                Next
                
            End If 
            'Me.GetCmp(Of Container)(containerId).Show()
            Dim ret As New Ext.Net.MVC.PartialViewResult()
            ret.ViewName = "_CompanyDetail"
            ret.Model = cmModel
            ret.ContainerId = containerId
            ret.RenderMode = RenderMode.AddTo
            ret.ClearContainer = True
            Me.GetCmp(Of Window)(containerId).Show()

            Return ret
        End Function

        Function RemoveCompany(id As Integer) As ActionResult
            Dim cmModel As New CompanyModel
            cmModel.companyList = cmModel.GetAll().Where(Function(m) m.ID <> id).ToList()
            Return View("Index",cmModel)
        End Function

        Function SaveCompanyDetail(cmModel As CompanyModel) As ActionResult
            Return View()
        End Function
    End Class
End Namespace

Index View

@ModelType ExtNETExamples.ExtNETExamples.CompanyModel
@Code
ViewData("Title") = "Index"
End Code
@(Html.X().ResourceManager())
<h2>Index</h2>


@(Html.X().Menu().ID("ContextMenu").Items(
            Html.X().MenuItem().Text("Delete Contact"),
            Html.X().MenuItem().Text("Avery 5164"),
            Html.X().MenuItem().Text("Copy"),
            Html.X().MenuItem().Text("Envelope")
            )
)

@Html.X().Menu().ID("GirdContextMenu").Items(Html.X().MenuItem().ID("deleteCxtMenu").Text("Delete ID").DirectEvents(Sub(ls)
                                                                            ls.Click.Confirmation.ConfirmRequest = True
                                                                            ls.Click.Confirmation.Message = "Are you sure you want to remove the company?"
                                                                            ls.Click.Url = Url.Action("RemoveCompany")
                                                                            ls.Click.ExtraParams.Add(New Parameter("id", "#{GirdContextMenu}.param1", mode:=ParameterMode.Raw))
                                                                        End Sub).Icon(Icon.Delete),
                                                                        Html.X().MenuItem().ID("closeCxtMenu").Text("Close Tab").Handler("ConfirmBox"),
                                                Html.X().MenuItem().ID("removeRow").Text("Remove this row").Handler("RemoveRow"))

@(Html.X().GridPanel() _
                                    .Title("Editable GridPanel").OverflowX(Overflow.Scroll).OverflowY(Overflow.Scroll) _
                                    .Height(350) _
                                    .ID("indexGrid") _
                                    .Store(Html.X().Store() _
                                    .ID("Store23") _
                                    .PageSize(500) _
                                    .Buffered(True) _
                                    .Model(Html.X().Model() _
                                    .IDProperty("IDs") _
                                    .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")
                                    ).View(Html.X().GridView().StripeRows(True).ID("indexGridView").DirectEvents(Sub(ls)
                                                                                                    ls.RowDblClick.Url = Url.Action("EditDetail")
                                                                                                    ls.RowDblClick.ExtraParams.Add(New Parameter("id", "record.data.ID", mode:=ParameterMode.Raw))
                                                                                                    ls.RowDblClick.ExtraParams.Add(New Parameter("containerId", "detailWindow", mode:=ParameterMode.Value))

                                                                                                End Sub
                                    ).Listeners(Sub(ls)
                                                    ls.RowContextMenu.Handler = "ShowContextMenu(record.data.ID);e.stopEvent();#{GirdContextMenu}.param1 = record.data.ID; #{GirdContextMenu}.showAt(e.getXY()); return false;"
                                                End Sub)))


@Html.X().Window().ID("detailWindow").Modal(True).Hidden(True).AutoUpdateLayout(True).Width(800)

<script>

    function ShowContextMenu(id) {
        if (id == 2) {
           
           App.GirdContextMenu.items.get("deleteCxtMenu").disable();

        }
        else {

            App.GirdContextMenu.items.get("deleteCxtMenu").enable();
        }

    }
    function ConfirmBox() {
        Ext.Msg.show({
            title: 'Save Changes?',
            msg: 'You are closing a tab that has unsaved changes. Would you like to save your changes?',
            buttons: Ext.Msg.YESNO,
            fn: processResult,
            animEl: 'elId',
            icon: Ext.MessageBox.QUESTION
        });
    }
    function processResult(btn){
        if (btn == 'yes') {
            Ext.Msg.alert("Aye Yes", "Yes Clicked!!!");
        }
    }

    function RemoveRow() {
        var title = 'Confirm';
        var msg = 'Are you sure?';

        var grid = App.indexGrid;
        Ext.Msg.confirm(title, msg, function (btn) {
            if (btn == 'yes') {
                grid.deleteSelected();
                return true;
            } else {
                return false;
            }
        });
    }
</script>

_CompanyDetail View Problem is in this grid.

@ModelType ExtNETExamples.ExtNETExamples.CompanyModel

@(Html.X().Container().Content(
            @@<text>
               <form action="/Home/SaveCompanyDetail" method="post">
                   <div Class="modal-content">
                       <div Class="modal-body">
                           <div Class="form-horizontal">
                               <h4> CompanyModel</h4>
                               <hr />
<div Class="form-group">@Html.X().Menu().ID("PartialGirdContextMenu").Items(Html.X().MenuItem().Text("Delete ID").DirectEvents(Sub(ls)
ls.Click.Confirmation.ConfirmRequest = True
ls.Click.Confirmation.Message = "Are you sure you want to remove the company?"
ls.Click.Url = Url.Action("RemoveCompany")
ls.Click.ExtraParams.Add(New Parameter("id", "#{PartialGirdContextMenu}.param1", mode:=ParameterMode.Raw))
End Sub)) 
<div>@(Html.X().GridPanel() _
.ID("partialGrid") _
.Store(Html.X().Store() _
.ID("StorePartial") _
.Model(Html.X().Model() _
.IDProperty("partialIDs") _
.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").MinWidth(400).Flex(1).Editor(Html.X().ComboBox().Store(Html.X().Store().ID("comboStore").Model(Html.X().Model().Fields(Html.X().ModelField().Name("Name").Mapping("Name").Type(ModelFieldType.String))).DataSource(Model.GetAll)).DisplayField("Name").ValueField("Name")),
Html.X().Column().Text("Price").DataIndex("Price").Renderer(RendererFormat.UsMoney).Editor(Html.X().NumberField()).Flex(1),
Html.X().Column().Text("Change").DataIndex("Change").Editor(Html.X().NumberField()).Flex(1),
Html.X().Column().Text("PctChange").DataIndex("PctChange").Editor(Html.X().NumberField()).Flex(1),
Html.X().DateColumn().Text("Last Updated").DataIndex("LastChange").Format("yyyy-MM-dd").Editor(Html.X().DateField()).Flex(1)
) _
.SelectionModel(Html.X().CellSelectionModel()) _
.Plugins(
Html.X().CellEditing()
) _
.View(Html.X().GridView().ID("partialGridView").Listeners(Sub(ls) ls.RowContextMenu.Handler = "e.stopEvent();App.PartialGirdContextMenu.param1= record.data.ID;App.PartialGirdContextMenu.showAt(e.getXY()); return false;")))</div>
</div>
            </div>
            </div>
            <div Class="modal-footer">
            <input type="submit" Class="btn btn-default"  value="Save" />
            </div>
            </div>
            </form></text>).DestroyContent(True))

[fabricio.murta]

Hello Puneet!

I couldn't get to the point your sample shows a combo box. Getting syntax error on your _CompanyDetail.vbhtml around line 3 (where it opens a @@<text> block).

[mwiater]

Hi Fabricio,

Can you try doing the same example with c# code. I am using the same example and it is working fine for me. Also can you show me the error in screenshot? Is it End of statement error or something else?

[fabricio.murta]

Here's the error shot:



EDIT: Okay, sorry, it seems Visual Studio is changing the contents of _CompanyDetails.vbhtml as I paste it on the file.

I added an @* comment, pasted, and then undone the comment and it works. I could reproduce the issue then.

[mwiater]

Alright, Please update me when you have the solution.

On another note:
Moreover, this approach of putting everything inside

Container().Content(@@<text> everything... </text>)

does not seem to be a good approach. Because something or other does break anyway. It would be best if it take partialviewresult as it is.

[fabricio.murta]

Hello @mwiater

So far I have at least two alternatives that improve the problem regarding the editor boxes being dismissed on click (even if click is inside them):

1. Instead of .Content(), using .Items() and, of course, just the grid panel in the list of items -- removing the form and custom divs from the code worked:

@(Html.X().Container() _
    .Items(Html.X().GridPanel() _
        .ID("partialGrid") _
        .Store(Html.X().Store() _
            .ID("StorePartial") _
            .Model(Html.X().Model() _
            .IDProperty("partialIDs") _
            .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").MinWidth(400) _
                .Flex(1).Editor(Html.X().ComboBox() _
                .Store(
                    Html.X().Store().ID("comboStore") _
                        .Model(
                            Html.X().Model() _
                                .Fields(
                                    Html.X().ModelField() _
                                        .Name("Name").Mapping("Name").Type(ModelFieldType.String)
                                ) _
                        ) _
                        .DataSource(Model.GetAll)
                ) _
                .DisplayField("Name").ValueField("Name")),
            Html.X().Column() _
                .Text("Price").DataIndex("Price").Renderer(RendererFormat.UsMoney) _
                .Editor(Html.X().NumberField()) _
                .Flex(1),
            Html.X().Column() _
                .Text("Change").DataIndex("Change") _
                .Editor(Html.X().NumberField()) _
                .Flex(1),
            Html.X().Column() _
                .Text("PctChange").DataIndex("PctChange") _
                .Editor(Html.X().NumberField()).Flex(1),
            Html.X().DateColumn() _
                .Text("Last Updated").DataIndex("LastChange").Format("yyyy-MM-dd") _
                .Editor(Html.X().DateField()) _
                .Flex(1)
        ) _
        .Plugins(
            Html.X().CellEditing()
        ) _
        .View(Html.X().GridView() _
            .ID("partialGridView") _
            .Listeners(
                Sub(ls) ls.RowContextMenu.Handler = "e.stopEvent();App.PartialGirdContextMenu.param1= record.data.ID;App.PartialGirdContextMenu.showAt(e.getXY()); return false;"
            ) _
        ) _
    ) _
    .DestroyContent(True) _
)

Please also note I've reindented your code for easier reading. We'd really appreciate if you took your time to provide formatted code when reporting issues as it makes it much better for understanding what is going on. That's really a pity Visual Studio can't handle proper indentation on razor syntax.

Another approach that worked was just by removing the modal property from the window in the main view.

But we still couldn't find the reason as for why it does not work properly if we draw the components using the .Content() approach.

[mwiater]

Hi Fabricio,

I understand that it is difficult to read such unintended lines of code. But honestly its just that Ext.NET and VB does not mix well. We get end of expected statement when we put our code inside Content. Though same thing with c# does not give any error. In vb + ext.net syntax, every Control needs to start from tag and needs to end along with same tag.
This below lines of code will through an error : End of statement expected:

<div>
@Html.X().TextField()
</div>

but this works

<div>@Html.X().TextField()</div>

and this happens only when we wrap it around @@<text> tag. and @@<text> is required when Container().Content is used. So you can very well imagine the picture how we are working around.

It would be best for us or anyone who is using Ext.NET, if they can simply render the content of view as Ext.net.Mvc.PartialViewResult as it is, without wrapping it around Container().Content.
Of course, view does have combination of Html and Ext.net content.

[fabricio.murta]

Hello Puneet!

That would be best, yes, to use only Ext.NET components on the partial view, like the example I've shown. You can bind Ext.NET components to CSS classes if you need a particular different look to them, you can append (or prepend) buttons to the top or bottom of panels, and you really don't need a input type=submit button. Or rather, you shouldn't have one, as you can bind an Ext.NET button (which submits a form or grid) to the form validation status, so it becomes available (enabled) only when the form is complete.

Here's a nice example on binding grid data to a form (which could be in a hidden window instead of an always visible form): Basic FormPanel.

And here's an example with validation (it uses server-side validation but you can use client-side validation as well for faster performance): Form Validation - Remote -- this one is in WebForms format.

I can see two alternatives to your page:
- it wouldn't use partial view for the company details form and the window wouldn't use a grid, but a form with the fields (refer to the first example I linked in this form
- it wouldn't define the details window on the on the index page, but bring the whole window from the partial view. The window would be destroyed on close.

But it wouldn't mean any of these scenarios fit your application, I don't see why Razor + VB + Ext.NET won't work other than limitations in VB itself; maybe VB requires a line break character on the situation you shown?

<div>
  @(Html.X().TextField()
</div>

You say this situation only breaks when using .Content and inside a @@<text>..</text> block, right?
I could reproduce the same problem in your partial view when I stripped all HTML code and kept using only Ext.NET elements inside the .Content definition. The problem was gone (in the code above) with HTML stripped out and using .Items approach.

[mwiater]

hi Fabricio,

I can see two alternatives to your page:
- it wouldn't use partial view for the company details form and the window wouldn't use a grid, but a form with the fields (refer to the first example I linked in this form

Well yes this example is not the true scenario of our application, It is just to give you an idea that I am having editable grid on partial view(popup) to edit the list that we have along with the form fields. So please consider this as just an example of scenario.

- it wouldn't define the details window on the on the index page, but bring the whole window from the partial view. The window would be destroyed on close.

do you have any example for this? I liked the idea of creating window in the action itself.

[fabricio.murta]

do you have any example for this? I liked the idea of creating window in the action itself.

Sure, here you go: Dynamic Partial Rendering - Window

About the test case, we understand this is a test case and should not be exactly like the actual window. Actually the sample you provided brought it several unnecessary parts that was confusing a lot, and this may lead us to an incorrect interpretation of the example. A context menu was provided in your sample, to name one. I removed it and the problem remained the same.

If something does not add to the test case, it should be removed. The problem is just that it makes it harder for us to identify the problem & effectively help you with your actual problem if we have to be guessing here and searching there. Hope you understand.

Anyway, I hope the approach in the above example helps!