Dec 16, 2012, 12:30 AM
[CLOSED] GridPanel Store not rendering to show data
Here is the scenario. When a button is clicked we need to render the grid data from the response data.
Grid Partial View
Index.cshtml ( Javascript that calls controller )
Grid Partial View
@using Core.Framework.Common.Constants
@using SortDirection = Ext.Net.SortDirection
@model Core.Framework.Model.AcRole
@( Html.X().Panel()
.Layout(LayoutType.Fit)
.AutoDoLayout(true)
.Items(
(Html.X().Panel()
.Layout(LayoutType.Fit)
.Items(item => item.Add(
Html.X().GridPanel()
.ID("gridRoleResult")
.Border(false)
.Store(Html.X().Store()
.AutoLoad(false)
.Model(Html.X().Model()
.Fields(
new ModelField("RoleId"),
new ModelField("Title", ModelFieldType.Auto),
new ModelField("Description", ModelFieldType.Auto),
new ModelField("IsActive", ModelFieldType.Auto),
new ModelField("RoleTypeId", ModelFieldType.Auto),
new ModelField("LastUpdateDatetime", ModelFieldType.Auto),
new ModelField("LastUpdateUser", ModelFieldType.Auto)
)
)
.Reader(reader =>
reader.Add(Html.X().JsonReader().Root("data"))
)
)
.ColumnModel(
Html.X().Column().Text("Role Id").DataIndex("RoleId").Flex(1),
Html.X().Column().Text("Title").DataIndex("Title"),
Html.X().Column().Text("Description").DataIndex("Description"),
Html.X().Column().Text("Role Type").DataIndex("RoleTypeId"),
Html.X().DateColumn().Text("Last Updated").DataIndex("LastUpdateDatetime"),
Html.X().DateColumn().Text("Last Updated User").DataIndex("LastUpdateUser")
)
.View(Html.X().GridView().StripeRows(true).TrackOver(true))
)
))
))
Index.cshtml ( Javascript that calls controller )
var onSuccess = function (grid, data) {
debugger;
// grid.show();
var gridControl = Ext.getCmp("gridRoleResult");
var where = getWhereClause();
Ext.Ajax.request({
url: 'Search/BuildSearch',
method: 'POST',
params: {
where: where,
},
success: function (response) {
var result = response.responseText;
var obj = Ext.encode(response.responseText); --> does not work
grid.getStore().loadRawData(obj);
grid.doLayout();
Ext.Msg.show({
title: 'Search result',
msg: result,
buttons: Ext.Msg.OK,
animEl: 'elId'
});
},
failure: function (response) {
Ext.Msg.show({
msg: response.responseText,
buttons: Ext.Msg.OK,
animEl: 'elId'
});
}
});
};
var onFailure = function (grid, data) {
debugger;
};
Data received from server ( response.responseText)"{\"\":{\"Data\":[{\"RoleId\":\"EXECUTIVE\",\"Title\":\"Executive Role\",\"Description\":null,\"IsActive\":true,\"RoleTypeId\":\"NON-ADMIN\",\"LastUpdateDatetime\":\"\\/Date(1349587509827)\\/\",\"LastUpdateUser\":\"sa\",\"CanAdd\":null,\"CanDelete\":null,\"CanExecute\":null,\"CanView\":null,\"CanEdit\":null,\"ModelId\":null}],\"TotalRecords\":1}}"
//this is the actual index.cshtml ( it is too big to be copied here so only placing the sction that is needed(@Html.X().Toolbar()
.Items(ii => ii.Add((@Html.X().Panel()
.AutoDoLayout(true)
.LayoutConfig(new TableLayoutConfig() { Columns = 2 })
.Items(i => i.Add(
(@Html.X().Button()
.ID("btnSearch")
.Text(Compensation.UI.Controllers.Base.BaseController.GetLabelText(ResourceLabelConstants.LBL_BTN_SEARCH_TEXT))
.Icon(Icon.HtmlGo)
.Listeners(l => l.Click.Handler = "return myCustomFn();")
.DirectEvents(e =>
{
e.Click.Url = Url.Action("LoadSearchResult");
e.Click.ExtraParams.Add(new { containerId = "pnlSearchResult" });
e.Click.ExtraParams.Add(new { viewPath = model.ViewPath });
e.Click.Success = "onSuccess(App.gridRoleResult, result.result);";
e.Click.Failure = "onFailure(App.gridRoleResult, result.result);";
})
)
)
)
)))
))
Last edited by Daniil; Dec 21, 2012 at 4:55 AM.
Reason: [CLOSED]