PDA

View Full Version : [CLOSED] refreshing store data



sharmav1
Apr 30, 2015, 11:15 AM
I am trying to refresh my store's data, but unable to do so. I have tried store refresh, load and reload methods bot no one works. Please guide me how to reload store data without refreshing entire page. Thanks
requirement: I have an update button(coed given) inside my gridpanel, upon clicking that button that particular record is updated and upon success I want to refresh grid's data.
view code

X.ImageCommandColumn().ToolTip("Update").Text("Update").Commands
(
X.ImageCommand().CommandName("Update").Icon(Icon.TableAdd).Text("Update")
)
.Listeners(l => { l.Command.Handler = "UpdateRecord(record.data);"; })

javascript code



function UpdateRecord(record)
{
if (record.status == 'Need Update') {
Ext.net.Mask.show({ msg: 'Updating changes...' });

Ext.net.DirectMethod.request({
url: "/Admin/UpdateData",
cleanRequest: true,
params: {
UpdateData: record
},
success: function (result) {
App.updateStore.commitChanges();
//App.updateGrid.getView().refresh();

App.updateGrid.getStore().reload();


Ext.Msg.info({ ui: "success", title: "Saved", html: "Data updated.", iconCls: "#Accept" });
Ext.net.Mask.hide();
}

});
}
}

Daniil
Apr 30, 2015, 4:32 PM
Hi @sharmav1,

Please demonstrate the configuration of Store. An approach to reload might depend on that.

sharmav1
May 01, 2015, 7:44 AM
Hi @Daniil,

View Code:

X.GridPanel().Title("Update Grid").ID("updateGrid").Layout(LayoutType.Fit).Flex(7).Border(false).Aut oScroll(true).Region(Region.Center)
.Store
(
X.Store().ID("updateStore").Sorters(X.DataSorter().Property("Name").Direction(Ext.Net.SortDirection.ASC))
.Model
(
X.Model()
.Fields
(
new ModelField("Id", ModelFieldType.Object),
new ModelField("Name", ModelFieldType.String),

new ModelField("IsEnabled", ModelFieldType.Boolean),

new ModelField("Status", ModelFieldType.String)

)
)
.DataSource(Model)
)
.ColumnModel
(
X.Column().Text("Name").DataIndex("Name")
.HeaderItems(
X.TextField().ID("hdrName").Listeners(l => { l.Change.Handler = "jsApplyFilter(this);"; l.Change.Buffer = 250; }).Plugins(X.ClearButton())
),
X.Column().Text("Status").DataIndex("Status").HeaderItems(
X.TextField().ID("hdrStatus").Listeners(l => { l.Change.Handler = "jsApplyFilter(this);"; l.Change.Buffer = 250; }).Plugins(X.ClearButton())
),
X.ComponentColumn().Text("IsEnabled").DataIndex("IsEnabled").Editor(true).Align(Alignment.Center)
.HeaderItems(
Html.X().Container().Layout(LayoutType.VBox).Layou tConfig(new VBoxLayoutConfig { Align = VBoxAlign.Center })
.Items(
Html.X().Button()
.ID("Update")
.Icon(Icon.GroupEdit)
.ToolTip("Update All")
.Listeners(li => { li.Click.Handler = "UpdateAll();"; })
)
)
.Component
(
X.Checkbox()
),
X.ImageCommandColumn().ToolTip("Edit").Commands
(
X.ImageCommand().CommandName("Edit").Icon(Icon.TableEdit).Text("Edit")
)
.Listeners(l => { l.Command.Handler = "EditData(record.data);"; }),

X.ImageCommandColumn().ToolTip("Update").Text("Update").Commands
(
X.ImageCommand().CommandName("Update").Icon(Icon.TableAdd).Text("Update")
)
.Listeners(l => { l.Command.Handler = "UpdateRecord(record.data);"; })
)

JS Code

function UpdateRecord(record)
{
if (record.status == 'Need Update') {
Ext.net.Mask.show({ msg: 'Updating changes...' });

Ext.net.DirectMethod.request({
url: "/Admin/UpdateData",
cleanRequest: true,
params: {
UpdateData: record
},
success: function (result) {
App.updateStore.commitChanges();
//App.updateGrid.getView().refresh();

App.updateGrid.getStore().reload();


Ext.Msg.info({ ui: "success", title: "Saved", html: "Data updated.", iconCls: "#Accept" });
Ext.net.Mask.hide();
}

});
}
}

Controller Code


[DirectMethod]

public ActionResult UpdateView()
{
var data = // data from database

return View(data.Distinct());
}

public ActionResult UpdateData(string[] updateData)
{
// using incoming parameter, I am updating my data object through my repository and then
//committing data through unit of work object

return this.Direct("Success");
}


I hope I have provided enough information to understand the problem

Thanks

Daniil
May 01, 2015, 1:26 PM
Thank you.

Please thread might help.
http://forums.ext.net/showthread.php?36991

sharmav1
May 02, 2015, 3:20 PM
Hi @Daniil

thanks for the reply.... The thread you indicated shows me server proxy way to reload a store. I can't test server proxy thing till Monday... so till that time if you could tell me what's wrong with my code which I have posted previously, isn't that a correct way of doing it?
Also, can't I reload the store with App.gridpanel.getStore().reload() ??


Thanks

Daniil
May 02, 2015, 8:02 PM
A Store's reload works with remote Proxies only. You create a Store with inline data (.DataSource). It cannot be reloaded on client without a request to server.

sharmav1
May 04, 2015, 10:31 AM
Hi @Daniil,

ServerProxy is not working for me. I want my store to be reloaded when I click on an "Update" button(ImageCommandColumn) inside my grid. This button is responsible to update my grid data based on one of the fields value in the grid. Pleas help fix it.

ViewCode:


X.GridPanel().Title("Update Grid").ID("updateGrid").Layout(LayoutType.Fit).Flex(7).Border(false).Aut oScroll(true).Region(Region.Center)
.Store
(
X.Store().ID("updateStore").Sorters(X.DataSorter().Property("Name").Direction(Ext.Net.SortDirection.ASC))
.Model
(
X.Model()
.Fields
(
new ModelField("Id", ModelFieldType.Object),
new ModelField("Name", ModelFieldType.String),

new ModelField("IsEnabled", ModelFieldType.Boolean),

new ModelField("Status", ModelFieldType.String)

)
)
.ServerProxy(X.AjaxProxy()
.Url(Url.Action("GetData"))
.Reader(X.JsonReader().Root("data")))
.DataSource(Model)
)
.ColumnModel
(
X.Column().Text("Name").DataIndex("Name")
.HeaderItems(
X.TextField().ID("hdrName").Listeners(l => { l.Change.Handler = "jsApplyFilter(this);"; l.Change.Buffer = 250; }).Plugins(X.ClearButton())
),
X.Column().Text("Status").DataIndex("Status").HeaderItems(
X.TextField().ID("hdrStatus").Listeners(l => { l.Change.Handler = "jsApplyFilter(this);"; l.Change.Buffer = 250; }).Plugins(X.ClearButton())
),
X.ComponentColumn().Text("IsEnabled").DataIndex("IsEnabled").Editor(true).Align(Alignment.Center)
.HeaderItems(
Html.X().Container().Layout(LayoutType.VBox).Layou tConfig(new VBoxLayoutConfig { Align = VBoxAlign.Center })
.Items(
Html.X().Button()
.ID("Update")
.Icon(Icon.GroupEdit)
.ToolTip("Update All")
.Listeners(li => { li.Click.Handler = "UpdateAll();"; })
)
)
.Component
(
X.Checkbox()
),
X.ImageCommandColumn().ToolTip("Edit").Commands
(
X.ImageCommand().CommandName("Edit").Icon(Icon.TableEdit).Text("Edit")
)
.Listeners(l => { l.Command.Handler = "EditData(record.data);"; }),

X.ImageCommandColumn().ToolTip("Update").Text("Update").Commands
(
X.ImageCommand().CommandName("Update").Icon(Icon.TableAdd).Text("Update")
)
.Listeners(l => { l.Command.Handler = "UpdateRecord(record.data);"; })
)

JSCode:

function UpdateRecord(record)
{
if (record.status == 'Need Update') {
Ext.net.Mask.show({ msg: 'Updating changes...' });

Ext.net.DirectMethod.request({
url: "/Admin/UpdateData",
cleanRequest: true,
params: {
UpdateData: record
},
success: function (result) {
App.updateStore.commitChanges();
//App.updateGrid.getView().refresh();

App.updateGrid.getStore().reload();


Ext.Msg.info({ ui: "success", title: "Saved", html: "Data updated.", iconCls: "#Accept" });
Ext.net.Mask.hide();
}

});
}
}

Controller Code:


[DirectMethod]
private object GetGridData()
{
return data.Distinct();
}
public ActionResult UpdateView()
{
//var data = // data from database

return View(GetGridData());
}

public ActionResult UpdateData(string[] updateData)
{
// using incoming parameter, I am updating my data object through my repository and then
//committing data through unit of work object

return this.Direct("Success");
}
public ActionResult GetData()
{
return this.Store(this.GetGridData());
}

Thanks

sharmav1
May 04, 2015, 11:59 AM
Hi @Daniil,

Server Proxy worked for me now. By mistake I commented the App.updateGrid.getStore.reload() line in my code and that's why it was not working.
Now after uncommenting it and adding server proxy example u gave it is working nicely.

Thanks very much for all your help.

Just one more question if you could answer that:

.Reader(X.JsonReader().Root("data"))

what's the purpose of Root("data") property in above code and is "data" always hardcoded like that ?

thanks

Daniil
May 05, 2015, 2:13 PM
Best to read the doc article.
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.data.reader.Reader-cfg-root

And yes, it is always "data" if you return a StoreResult from a controller action.

return this.Store(this.GetGridData());