ext.net mvc gridpanel using datasource with complex model type

[czuroski]

Hello,

I am having trouble getting a partial view working. The partial view has a gridpanel embedded in it along with some other text boxes. I have a custom model class with some string properties to fill the text boxes and a list of custom objects to populate the grid. I am using .DataSource(Model.MyList) to populate the gridpanel, but I keep getting a null reference exception - object not set to an instance of an object. If I remove the datasource line, it renders correctly (obviously without any data in the grid) - the other fields are correctly populated.

Here is some sample code -

@(x.FormPanel()
    .ID("MyDetailsPanel")
    .Title("My Details")
        .Frame(true)
        .Height(525)
        .Width(425)
        .Margin(5)        
        .Items(
            x.TextFieldFor(m => m.Title)
                .FieldLabel("Title")
                .AnchorHorizontal("100%"),
            x.TextField()
                .FieldLabel("Number")
                .AnchorHorizontal("100%"),
            x.ComboBox()
                .FieldLabel("Type")
                .AnchorHorizontal("100%"),
                
            
                x.GridPanel()
                    .Title("My Grid")
                    .Frame(true)
                    .Width(400)
                    .Height(350)
                    .Store(
                        x.Store()
                            .AutoLoad(true)
                            .ID("MyStore")
                            .DataSource(Model.MyList)
                            .Model(
                                x.Model()
                                    .Fields(
                                        x.ModelField().Name("Number").Type(ModelFieldType.String),
                                        x.ModelField().Name("Title").Type(ModelFieldType.String)
                                    )
......

Here is the model -

public class MyDetailsViewModel
    {
        public int Id { get; set; }
        public string Title { get; set; }

        public  List<SomeDto> MyList { get; set; }
    }

and here is the controller -

public ActionResult MyDetailsPartial(string id)
        {
            var vm = new MyDetailsViewModel();
            vm.MyList = new List<SomeDto>();
            if(id != null)
            {
                vm.Title = "new title";
                vm.MyList.Add(new SomeDto { Number = "234", Title = "abcd"});
            }            
             
            ViewData.Model = vm;

            var pvr = new Ext.Net.MVC.PartialViewResult
            {
                ViewData = this.ViewData

            };
            return pvr;         
        }

I can't understand why I can't pass a custom list from the model into the datasource for the gridpanel.

Any thoughts would be great.

[Daniil]

Hi @czuroski,

Please clarify how do you render that partial view? I.e. how do you call the MyDetailsPartial action?

Providing us with a full (but simplified as much as you can) test case to reproduce the problem will probably give you a solution very soon.

[czuroski]

I use the following to call the partial view -

@Html.Partial("MyDetailsPartial")

This calls into the controller action - the same action outlined below (MyDetailsPartial).

[Daniil]

Could you, please, post the main view and full partial view?

[czuroski]

The main view doesn't really do much - it has an ext.net formpanel and then calls that partial along with another partial and an ext.net window.

If I get a chance, I will try to put together a sample app showing the issue.

[czuroski]

Here are the sample screens and controllers to reproduce. As I stated earlier, I remove the datasource line from ExtPartial.cshtml, the the view renders fine - the Name field is populated as expected and the grid is empty (also as expected).
If I leave the datasource line in, it throws the error.

Thanks

Index.cshtml -

@{
    ViewBag.Title = "Home Page";
    var x = Html.X();
}

@Html.X().ResourceManager()


@(x.Button().Text("Launch Partial").DirectEvents(de => de.Click.Url = Url.Action("ExtPartial"))

)

@Html.Partial("ExtPartial")

ExtPartial.cshtml -

@model Ext.NetError.ExtViewModel

@{
    var x = Html.X();
}

@(x.FormPanel()
    .ID("ExtPartialView")
    .Title("Partial View with Error")
        .Frame(true)
        .Height(525)
        .Width(425)
        .Margin(5)
        .Items(
            x.TextFieldFor(m => m.Name)
                .FieldLabel("Name")
                .AnchorHorizontal("100%"),

                x.GridPanel()
                        .Title("Ext Grid Error")
                        .Frame(true)
                        .Width(400)
                        .Height(350)
                        .Store(
                            x.Store()
                                .AutoLoad(true)
                                .ID("ExtStore")
                                .DataSource(Model.ExtList)
                                .Model(
                                    x.Model()                                        
                                        .Fields(
                                            x.ModelField().Name("Number").Type(ModelFieldType.String),
                                            x.ModelField().Name("Title").Type(ModelFieldType.String),
                                                x.ModelField().Name("Description").Type(ModelFieldType.String)
                                        )

                                )
                        )
                        .ColumnModel(x.Column().DataIndex("Number").Text("Number").Width(75))
                        .ColumnModel(x.Column().DataIndex("Title").Text("Title").Width(300))
                        .ColumnModel(x.Column().DataIndex("Description").Text("Description").Width(300))  
                        
        )
)

ExtObject.cs -

using System;
namespace Ext.NetError
{
    public class ExtObject
    {
        public string Number { get; set; }
        public string Title { get; set; }
        public string Description { get; set; }
    }
}

ExtViewModel.cs -

using System;
using System.Collections.Generic;

namespace Ext.NetError
{
    public class ExtViewModel
    {
        public string Name { get; set; }
        public List<ExtObject> ExtList { get; set; }
    }
}

HomeController.cs -

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Ext.Net.MVC;

namespace Ext.NetError.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            ViewBag.Message = "Modify this template to jump-start your ASP.NET MVC application.";

            return View();
        }
        
        public ActionResult ExtPartial()
        {
            var vm = new ExtViewModel
            {
                Name = "Ext View Model with Error",
                ExtList = new List<ExtObject>{
                    new ExtObject { Number = "1234", Title = "Ext Object Title", Description = "Description for this object"}
                }
            };
            ViewData.Model = vm;

            var pvr = new Ext.Net.MVC.PartialViewResult
            {
                ViewData = this.ViewData

            };
            return pvr;         
        }
               
    }
}

[Daniil]

Thank you.

This

@Html.Partial("ExtPartial")

doesn't call a controller action, it just renders a partial view.

You probably need to use

@Html.Action("ExtPartial")

[czuroski]

If I use Action instead of partial, it doesn't render correctly for me.

With the sample code that I sent, if you put a breakpoint in the controller action, you will see that it is getting hit as expected. If I remove the datasource line, the other field on the view is getting populated correctly from the controller action, which proves that it is hitting the controller. If I add the datasoure line back in, I am getting the null reference error - at that point, if you examine the model object, it appear to be empty.
So something is happening when I am trying to set the datasource for the gridpanel.

[czuroski]

I was able to get this working by using GridPanelFor. By using this, the view renders and updates as expected.

Thanks