[CLOSED] MVC Dynamic Grid with RowExpander, when expand and store reload of parent grid, JS error 'Cannot read 'style' of null'

  1. #1

    [CLOSED] MVC Dynamic Grid with RowExpander, when expand and store reload of parent grid, JS error 'Cannot read 'style' of null'

    I have a dynamic grid that has several child grids set in row expander plugins. When the top grid is expanded and I attempt to reload the store through either messagebus listeners or by a button, a js error hits. If I continue through the debugger, the top grid unexpanded is showing. When I expand again I get the error once more. I do not get the error again until I reload the top grid. I seem to be able to reload the child grids at will.
    Here is the code:
    Controller:
            public ActionResult CreateAllocationGrid(string id, string containerId)
            {
                int clientId = Convert.ToInt32(id);
                Client client = ClientRepository.GetClientDetails(db, clientId);
                List<DateTime> dateTimeList = new List<DateTime>();
                foreach (DateTime clientValueDate in client.ClientValues.Keys.OrderByDescending(d => d.Date).Distinct())
                {
                    string dateString = clientValueDate.ToString("d");
                    dateTimeList.Add(clientValueDate);
                }
                this.BuildGrid1(dateTimeList, client.Id).AddTo(containerId); //Client Level
                return this.Direct();
            }
            //parent grid
            private Ext.Net.GridPanel BuildGrid1(List<DateTime> dateTimeList, int clientId)
            {
                Client client = ClientRepository.GetClientDetails(db, clientId);
                Ext.Net.GridPanel grid = new Ext.Net.GridPanel
                {
                    Border = false,
                    Height = 550,
                    MessageBusListeners = 
                    {
                        new MessageBusListener
                        {
                            Name = "AllocationSubmitted" + clientId,
                            Handler = "reloadGrid(this);"
                        }
                    },
                    Store = 
                    {
                        new Store
                        {
                            Proxy =
                            {
                                new AjaxProxy
                                {
                                    Url = Url.Action("AllocationStore", "Client"),
                                    Reader =  { new JsonReader() { Root = "data" } }
                                }
                            },
                            Parameters =
                            {
                                new StoreParameter
                                {
                                    Name = "clientId", 
                                    Value = clientId.ToString(), 
                                    Mode = ParameterMode.Raw
                                }
                            },
                        }
                    },
                    ColumnModel =
                    {
                        Columns = 
                        {
                            new Column { Hidden = true, DataIndex = "clientId", Locked = true }, //0 Client ID
                            new Column { DataIndex = "plusHolder", Width = 177 }// Locked = true, } //1 Expand Line //the + box is 32 wide
                        }
                    },
                    View =
                    {
                        new Ext.Net.GridView()
                        {
                            StripeRows = true,
                            TrackOver = true
                        }
                    },
                    TopBar = 
                    {
                        new Toolbar
                        {
                            Items =
                            {
                                new Button
                                {
                                    Text = "Reload",
                                    Icon = Icon.ArrowRefresh,
                                    Listeners =
                                    {
                                        Click =
                                        {
                                            Handler = "reloadGridComp(this.up('grid'));"
                                        }
                                    }
                                }
                            }
                        }
                    }
                };
                Store store = grid.GetStore();
                Model model = new Model();
                model.Fields.Add(new ModelField("clientId", ModelFieldType.Int));//0 Client ID
                model.Fields.Add(new ModelField("plusHolder", ModelFieldType.String)); //1 plusholder
                foreach (DateTime dt in dateTimeList)
                {
                    string dateString = dt.Date.ToString("d");
                    ModelField field = new ModelField(dateString, ModelFieldType.Float);//this is the value field for the date
                    model.Fields.Add(field);
                    
                    Column col = new Column();
                    col.Text = dateString;
                    col.DataIndex = dateString;
                    col.Renderer.Fn = "checkFlag";
                    grid.ColumnModel.Columns.Add(col);
                }
                store.Model.Add(model);
                RowExpander rowExpander = new RowExpander
                {
                    ScrollOffset = 0,
                    Loader = new ComponentLoader
                    {
                        Mode = LoadMode.Component,
                        Url = Url.Action("BuildGrid2", "Client"),//Account Level //GetAccountGrid is similar
                        LoadMask =
                        {
                            ShowMask = true
                        },
                        Params = {
                                new Ext.Net.Parameter("clientId", clientId.ToString(), ParameterMode.Raw)
                            }
                    }
                };
                grid.Plugins.Add(rowExpander);
                return grid;
            }
            //the store for the parent grid
            public ActionResult AllocationStore(string clientId)
            {
                int clientID = Convert.ToInt32(clientId);
                Client client = ClientRepository.GetClientDetails(db, clientID);
                List<object> clientStuff = new List<object>();
                var _tempObject = new ExpandoObject() as IDictionary<string, Object>;
                _tempObject.Add("clientId", client.Id);
                _tempObject.Add("plusHolder", "Client Values");
                foreach (DateTime clientValueDate in client.ClientValues.Keys.OrderByDescending(d => d.Date).Distinct())
                {
                    string dateString = clientValueDate.ToString("d");
                    if (client.ClientRecommendationOffOnDateClient.ContainsKey(clientValueDate))
                    {
                        if (client.ClientRecommendationOffOnDateClient[clientValueDate] == false)
                        {
                            _tempObject.Add(dateString, "-" + client.ClientValues[clientValueDate]);
                        }
                        else
                        {
                            _tempObject.Add(dateString, client.ClientValues[clientValueDate]);
                        }
                    }
                    else
                    {
                        _tempObject.Add(dateString, client.ClientValues[clientValueDate]);
                    }
                }
                clientStuff.Add(_tempObject);
                return this.Store(clientStuff);
            }
            //child grid
            public ActionResult BuildGrid2(string clientId)
            {
                int clientID = Convert.ToInt32(clientId);
                Client client = ClientRepository.GetClientDetails(db, clientID);
                Ext.Net.GridPanel grid = new Ext.Net.GridPanel
                {
                    Border = false,
                    Height = 545,
                    MessageBusListeners = 
                    {
                        new MessageBusListener
                        {
                            Name = "AllocationSubmitted" + clientId,
                            Handler = "reloadGrid(this);"
                        }
                    },
                    Store = 
                    {
                        new Store
                        {
                            Proxy =
                            {
                                new AjaxProxy
                                {
                                    Url = Url.Action("AccountStore", "Client"),
                                    Reader =  { new JsonReader() { Root = "data" } }
                                }
                            },
                            Parameters =
                            {
                                new StoreParameter
                                {
                                    Name = "clientId", 
                                    Value = clientId.ToString(), 
                                    Mode = ParameterMode.Raw
                                }
                            },
                        }
                    },
                    ColumnModel =
                    {
                        Columns = 
                        {
                            new Column { Hidden = true, DataIndex = "AccountId", Locked = true }, //0 Account ID
                            new CheckColumn { DataIndex = "isActive", Width = 25 }, //1 Active State //+ box (32 + 25 + 120 = 177)
                            new Column { DataIndex = "accountNumber", Width = 120 } //2 ACCOUNT NUM
                        }
                    },
                    View =
                    {
                        new Ext.Net.GridView()
                        {
                            StripeRows = true,
                            TrackOver = true
                        }
                    },
                    TopBar = 
                    {
                        new Toolbar
                        {
                            Items =
                            {
                                new Button
                                {
                                    Text = "Reload",
                                    Icon = Icon.ArrowRefresh,
                                    Listeners =
                                    {
                                        Click =
                                        {
                                            Handler = "reloadGrid(this.up('grid'));"
                                        }
                                    }
                                }
                            }
                        }
                    }
                };
                Store store = grid.GetStore();
                Model model = new Model();
                model.IDProperty = "AccountId";
                model.Fields.Add(new ModelField("AccountId", ModelFieldType.Int));//0 Account ID
                model.Fields.Add(new ModelField("isActive", ModelFieldType.Boolean));//1 ActiveState
                model.Fields.Add(new ModelField("accountNumber", ModelFieldType.String)); //2 AccountNumber
                //client level dates are used, in the store check if there is a value for that date and supply a 0 if not.
                foreach (DateTime clientValueDate in client.ClientValues.Keys.OrderByDescending(d => d.Date).Distinct())
                {
                    string dateString = clientValueDate.Date.ToString("d");
                    model.Fields.Add(new ModelField(dateString, ModelFieldType.Float));//this is the value field for the date
                    Column col = new Column();
                    col.Text = dateString;
                    col.DataIndex = dateString;
                    col.Renderer.Fn = "checkFlag";
                    grid.ColumnModel.Columns.Add(col);
                }
                store.Model.Add(model);
                RowExpander rowExpander = new RowExpander
                {
                    ScrollOffset = 0,
                    Listeners =
                    {
                        BeforeExpand =
                        {
                            Handler = "this.removeComponents(); return true;"
                        }
                    },
                    Loader = new ComponentLoader
                    {
                        Mode = LoadMode.Component,
                        Url = Url.Action("BuildGrid3", "Client"),
                        LoadMask =
                        {
                            ShowMask = true
                        },
                        Params = {
                                new Ext.Net.Parameter("Id", "this.record.getId()", ParameterMode.Raw),
                                new Ext.Net.Parameter("clientId", clientId.ToString(), ParameterMode.Raw)
                            }
                    }
                };
                grid.Plugins.Add(rowExpander);
                return this.ComponentConfig(grid);
            }
            //the store for the second level grid
            public ActionResult AccountStore(string clientId)
            {
                int clientID = Convert.ToInt32(clientId);
                Client client = ClientRepository.GetClientDetails(db, clientID);
                List<object> accountStuff = new List<object>();
                var _tempObject = new ExpandoObject() as IDictionary<string, Object>;
                foreach (Account account in client.Accounts.Distinct())
                {
                    _tempObject = new ExpandoObject() as IDictionary<string, Object>;
                    _tempObject.Add("AccountId", account.Id);
                    _tempObject.Add("isActive", account.IsActive);
                    _tempObject.Add("accountNumber", account.AccountNum);
    
                    foreach (DateTime clientValueDate in client.ClientValues.Keys.OrderByDescending(d => d.Date).Distinct())
                    {
                        string dateString = clientValueDate.ToString("d");
                        if (account.AccountValues.ContainsKey(clientValueDate))
                        {
                            Dictionary<string, decimal> _tempDictionary = new Dictionary<string,decimal>();
                            if (account.AssetClassDifferenceDictionary.TryGetValue(clientValueDate, out _tempDictionary))
                            {
                                bool _flag = true;
                                foreach (KeyValuePair<string, decimal> assClassAmount in _tempDictionary)
                                {
                                    if (_flag == false)
                                        break;
                                    if (assClassAmount.Value >= client._flagAssetValue || assClassAmount.Value <= ((client._flagAssetValue) * (-1)))
                                    {
                                        _flag = false;
                                    }
                                    else
                                    {
                                        _flag = true;
                                    }
                                }
                                if (_flag == false)
                                {
                                    _tempObject.Add(dateString, account.AccountValues[clientValueDate] * -1);
                                }
                                else
                                {
                                    _tempObject.Add(dateString, account.AccountValues[clientValueDate]);
                                }
                            }
                            else
                            {
                                //there is no allocation for the date
                                _tempObject.Add(dateString, -99999999999);
                            }
                        }
                        else
                        {
                            _tempObject.Add(dateString, 0);
                        }
                    }
                    accountStuff.Add(_tempObject);
                }
                return this.Store(accountStuff);
            }
    And here is the pertinent portion of the view:

    @{
        var X = Html.X();
        string clientId = this.ViewBag.clientId;
        <script>
            var template = '<span style="color:{0};">{1}</span>';
    
            var checkFlag = function (v) {
                if (v >= 0) {
                    v = Ext.util.Format.currency(v);
                    return v;
                };
                if (v == -99999999999) {
                    return Ext.String.format(template, "red", "no allocation");
                };
                if (v < 0) {
                    v = v * -1;
                    v = Ext.util.Format.currency(v);
                    return Ext.String.format(template, "red", v);
                };
            };
            var reloadGrid = function (grid) {
                var store = grid.store;
                store.reload();
            };
    </script>
    }
    @(
     X.Window()
            .Title("Information on: " + this.ViewBag.clientName)
            .Width(700)
            .X(250)
            .Y(100)
            .Items(
                X.Panel()
                    .Title("Allocations")
                    .DirectEvents(de =>
                        {
                            de.BeforeRender.Url = Url.Action("CreateAllocationGrid");
                            de.BeforeRender.ExtraParams.Add(new { id = ViewBag.clientId, containerId = ViewBag.clientId + "ClientContainer" });
                            de.BeforeRender.EventMask.ShowMask = true;
                            de.BeforeRender.EventMask.Target = MaskTarget.CustomTarget;
                            de.BeforeRender.EventMask.CustomTarget = ViewBag.ClientId + "ClientContainer";
                        })
                    .ID(ViewBag.clientId + "ClientContainer")
            )
    )
    Any help would be greatly appreciated.
    Last edited by Daniil; Sep 18, 2014 at 6:45 AM. Reason: [CLOSED]
  2. #2
    Hi @JakeM,

    It is difficult to say what is going wrong.

    Please provide more information about the JavaScript error. What is the code it occurs in? How does the Stack look? You could provide a screenshot.

    Ideally, we would like to have a runnable test case to reproduce which we could copy, paste and run.
    How to prepare a sample

    If you can share the existing test case online, it also might be an option. Maybe, it will be good enough to understand the problem.
  3. #3
    I was able to fix this by adding an IDProperty to the parent grid model. You may close this thread. Thank you again.

Similar Threads

  1. reload store (grid) from treepanel
    By simbal in forum 1.x Help
    Replies: 1
    Last Post: Apr 28, 2012, 9:57 AM
  2. [CLOSED] RowExpander scroll to top of grid when expanded
    By rthiney in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Nov 30, 2011, 1:56 PM
  3. Replies: 7
    Last Post: Aug 12, 2011, 9:39 AM
  4. [CLOSED] Read the entire contents of a grid to store
    By majunior in forum 1.x Legacy Premium Help
    Replies: 27
    Last Post: Jul 15, 2011, 6:32 PM
  5. Replies: 1
    Last Post: Nov 01, 2010, 9:00 PM

Posting Permissions