PDA

View Full Version : [CLOSED] GridPanel Store not rendering to show data



pawangyanwali
Dec 16, 2012, 12:30 AM
Here is the scenario. When a button is clicked we need to render the grid data from the response data.

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).TrackOv er(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.BaseControl ler.GetLabelText(ResourceLabelConstants.LBL_BTN_SE ARCH_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);";
})

)
)
)


)))
))

Baidaly
Dec 16, 2012, 4:14 AM
Hello!

Please, look at the following example: http://mvc.ext.net/#/GridPanel_ArrayGrid/Remote_Load/

Also, why you are trying to load data manually without DirectEvent or DirectMethod?