[CLOSED] Master/Detail with GridPanel - JavaScript crashes in the SelectionMemory onSelectChange method in certain circumstances

[bogc]

Hi:

I came across another issue that worked fine before in Ext.Net 2.1.1 but not in Ext.Net 2.5.2.

So, basically, what happens is that the app crashes in the Store indexOf method, the this.data runtime object doesn't have an indexOf method.

    /**
     * Get the index of the record within the store.
     *
     * When store is filtered, records outside of filter will not be found.
     *
     * @param {Ext.data.Model} record The Ext.data.Model object to find.
     * @return {Number} The index of the passed Record. Returns -1 if not found.
     */
    indexOf: function(record) {
        return this.data.indexOf(record);
    },

This is the next function in the calling stack and it belongs to the Ext.grid.plugin.SelectionMemory plugin:

    onSelectChange : function (record, isSelected, suppressEvent, commitFn) {
        if (suppressEvent) {
            if (isSelected) {
                this.onMemorySelect(this.selModel, record, this.store.indexOf(record), null);
            }
            else {
                this.onMemoryDeselect(this.selModel, record, this.store.indexOf(record));
            }
        }
    },

This is the stack trace in Chrome:



To reproduce, follow these steps:

1. After the page is rendered (I used Chrome), click on the Detail tab. The page will show the details rows for the master record
2. Click on the Master tab and click on the second row.
3. Navigate back to the Detail tab. The details are not refreshed because of the error I mentioned.

If you remove the IDProperty from the Detail model (in Index.cshtml) , it's going to work without an issue. Also, if I add the .SelectionMemory(false) on the detailGridPanel it works properly as well.

What is the SelectionMemory plugin used for? Why is it enabled by default? Historically, I came across another issue related to this: http://forums.ext.net/showthread.php...electionMemory. Should I turn it off for all the grids in my app?

Here is the code that I used:

Controller:

ExtNetController.cs

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

namespace TestSelectionMemoryPlugin.Controllers
{
    public class ExtNetController : Controller
    {
      private static List<MasterDTO> _masterData = new List<MasterDTO>
                                        {
                                          new MasterDTO
                                          {
                                            Id = 1, Name = "Master 1", Details = new List<DetailDTO>
                                                                                 {
                                                                                   new DetailDTO {SurrogateId = 1, CultureCode = "en-CA", Description = "Master 1 English Description"},
                                                                                   new DetailDTO {SurrogateId = 2, CultureCode = "en-ES", Description = "Master 1 Spanish Description"},
                                                                                 }
                                          },
                                          new MasterDTO
                                          {
                                            Id = 2, Name = "Master 2", Details = new List<DetailDTO>
                                                                                 {
                                                                                   new DetailDTO {SurrogateId = 1, CultureCode = "en-CA", Description = "Master 2 English Description"},
                                                                                   new DetailDTO {SurrogateId = 2, CultureCode = "en-ES", Description = "Master 2 Spanish Description"},
                                                                                 }
                                          },
                                        };

      public ActionResult Index()
        {
            ExtNetModel model = new ExtNetModel()
            {
              MasterData = _masterData
                
            };

            return this.View(model);
        }

        public ActionResult SampleAction(string message)
        {
            X.Msg.Notify(new NotificationConfig
            {
                Icon = Icon.Accept,
                Title = "Working",
                Html = message
            }).Show();

            return this.Direct();
        }

      public StoreResult GetMasterData()
      {
        return this.Store(_masterData);
      }

      public StoreResult GetMasterRecord(int id)
      {
        return this.Store(_masterData.Where(m => m.Id == id)
          .ToList(),
          1);
      }
    }
}

Models:

DetailDTO.cs:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace TestSelectionMemoryPlugin.Models
{
  public class DetailDTO
  {
    /// <summary>
    /// Manufactured ID
    /// </summary>
    public int SurrogateId { get; set; }
    public String CultureCode { get; set; }
    public String Description { get; set; }
  }
}

MasterDTO.cs:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace TestSelectionMemoryPlugin.Models
{
  public class MasterDTO
  {
    public int Id { get; set; }
    public String Name { get; set; }
    public IList<DetailDTO> Details { get; set; }
  }
}

ExtNetModel.cs:

using System.Collections.Generic;

namespace TestSelectionMemoryPlugin.Models
{
    public class ExtNetModel
    {
        public IList<MasterDTO> MasterData { get; set; }
       
    }
}

View:

Index.cshtml:

@using Ext.Net;
@using Ext.Net.MVC;
@using ScriptMode = Ext.Net.ScriptMode

@model TestSelectionMemoryPlugin.Models.ExtNetModel

@{
    Layout = null;
  var X = Html.X();
}

<!DOCTYPE html>

<html>
<head>
    <title>Ext.NET MVC Sample</title>    


</head>
<body>
  @Html.X().ResourceManager().ScriptMode(ScriptMode.Development).SourceFormatting(true)
  
  @(X.Model()
        .Name("Detail")
        .IDProperty("SurrogateId")
        .Fields(
            X.ModelField()
                .Name("SurrogateId")
                .Type(ModelFieldType.Int),
            X.ModelField()
                .Name("CultureCode")
                .Type(ModelFieldType.String),
            X.ModelField()
                .Name("Description")
                .Type(ModelFieldType.String)
      )
  )



  @(X.Model()
        .Name("Master")
        .IDProperty("Id")
        .Fields(
            X.ModelField()
                .Name("Id")
                .Type(ModelFieldType.Int),
            X.ModelField()
                .Name("Name")
                .Type(ModelFieldType.String)
        )
        .Associations(a => a.Add(X.HasManyAssociation()
                .Model("Detail")
                .Name("details")
                .AssociationKey("Details"))
      )
  )
  
  @(X.Store()
      .ID("recordStore")
      .IDMode(IDMode.Static)
      .ModelName("Master")
      .AutoLoad(false)
      .Proxy(Html.X().AjaxProxy()
        .Url(Url.Content("~/ExtNet/GetMasterRecord"))
        .Reader(Html.X().JsonReader().TotalProperty("total").Root("data"))
      )
      .Parameters(ps =>
                  ps.Add(new StoreParameter("id", "#{masterGridPanel}.getSelectionModel().selected.getAt(0).get('Id')", ParameterMode.Raw))
          )
      .Listeners(l =>
        {
          l.Load.Handler = "var rec = store.getAt(0); /*debugger; */ #{recordFormPanel}.getForm().loadRecord(rec); #{detailsGridPanel}.bindStore(rec.details()); #{detailsGridPanel}.getSelectionModel().select(0);";
        
        }
      )
  )
  @(Html.X().Viewport().Layout("fit")
      .Items(
        Html.X().TabPanel()
          .ID("mainTabPanel")
              .Listeners(a => a.TabChange.Handler = @" if (#{mainTabPanel}.getActiveTab() == #{detailsPanel}) #{recordStore}.load();")
          .Items(
            Html.X().GridPanel().Title("Master")
              .ID("masterGridPanel")
              .Region(Region.North)
              .Split(true)
              .Height(210)
              .Store(Html.X().Store()
                .ModelName("Master")
                .Data(Model.MasterData)
                .AutoLoad(false)
                .Proxy(Html.X().AjaxProxy()
                  .Url(Url.Content("~/ExtNet/GetMasterData"))
                    .Reader(Html.X().JsonReader().TotalProperty("total").Root("data").IDProperty("Id"))
                )
              
              )             
              .ColumnModel(
                Html.X().Column().Text("Id").Width(120).DataIndex("Id"),
                Html.X().Column().Text("Name").Flex(1).DataIndex("Name")
              )
              .Listeners(l =>
              {
                l.ViewReady.Handler = "#{masterGridPanel}.getSelectionModel().select(0);";
                l.ViewReady.Delay = 1;
              })
            ,
            X.Panel().Title("Details").Layout("border")
              .ID("detailsPanel")
              .Items(
                X.FormPanel()
                  .ID("recordFormPanel")                 
                  .Region(Region.North)
                  .Height(100)
                  .Split(true)
                  .Title("Record Form")
                  .Items(
                    X.NumberField()
                     .Name("Id")
                     .FieldLabel("ID"),
                    X.TextField()
                     .Name("Name")
                     .FieldLabel("Name")
                  ),
                X.GridPanel().Title("Details")
                  .ID("detailsGridPanel")
                  .Region(Region.Center)
                  .Store(Html.X().Store()                    
                    .ModelName("Detail")
                  )
                  .ColumnModel(
                    Html.X().Column().Text("CultureCode").Flex(1).DataIndex("CultureCode"),
                    Html.X().Column().Text("Description").Flex(1).DataIndex("Description")
                  )
                
              )
          
          )
      ))

</body>
</html>

For your convenience, you can download the VS2013 project from here (7-zip format).

Thanks!