Sep 16, 2014, 1:54 AM
[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:
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]