PDA

View Full Version : [CLOSED] Refresh grid after change store data from javascript



matrixwebtech
Sep 23, 2014, 9:48 AM
Example Controller and Sample data


public class Gridpanel_header_fieldController : Controller
{
//
// GET: /Gridpanel_header_field/

public ActionResult Index()
{
ViewBag.loadgrid = GetData();
return View();
}

private object[] GetData()
{
var listtest = new List<field>();
for (int i = 1; i <= 4; i++)
{

var v = new field()
{
id = i,
company = "Company " + i.ToString(),
cat = "Cat " + i.ToString()
};
listtest.Add(v);
}
return listtest.Cast<object>().ToArray();

}

}

public class field
{
public int id { get; set; }
public string company { get; set; }
public string cat { get; set; }

}

Example View


<script>
var set = function (field) {
var store = App.GridPanel1.getStore();
store.data.company = field.getValue();
App.GridPanel1.update();

}

</script>

@X.ResourceManager()

@(X.GridPanel()
.ID("GridPanel1")
.Layout(LayoutType.Anchor)

.ColumnWidth(0.6)

.Store(X.Store()
.ID("Store1")
.DataSource((object)ViewBag.loadgrid)

.Model(X.Model()
.Name("Person")
.IDProperty("id")
.Fields(
Html.X().ModelField().Name("company").Mapping("company"),
Html.X().ModelField().Name("cat").Mapping("cat")
)
)
)
.ColumnModel(
X.Column()
.Text("Company")
.DataIndex("company")
.Flex(1)
.Editor
(
X.TextField()

)
.HeaderItems
(
X.FieldContainer().Layout(LayoutType.HBox)
.Items
(
X.TextField().ID("ht")

,
X.Button().Text("Fill").Listeners(l =>
{
l.Click.Handler = "set(App.ht);";
})

)

)
,
X.Column().Text("Category").DataIndex("cat").Flex(1)
)
.Plugins
(
X.CellEditing().ClicksToEdit(1)
)
)

I take HeaderItems on Company Column in grid.Now I try,put some value in text field on Company Column and click on Fill button.
I set store's company field with new value.but unable to refresh grid data.I want each value of company column set with new value.

Daniil
Sep 23, 2014, 10:16 AM
Hi @matrixwebtech,

Please use a record's data property, not a Store's one.

After updating all the records, you can call:

grid.getView().refresh();

matrixwebtech
Sep 23, 2014, 10:24 AM
Hi Daniil
How do I get record in javascript set() function in my example on Fill Button Click

Daniil
Sep 23, 2014, 11:41 AM
How do I get record

Not sure why you are talking about the only record. As far as I can understand you need all the records, don't you?

matrixwebtech
Sep 23, 2014, 4:20 PM
As far as I can understand you need all the records, don't you?

Yes,all records of that specific column in Gridpanel(Here Company column in grid)

Daniil
Sep 24, 2014, 9:26 AM
I believe you already know how to iterate all the records. There is the "each" method in the Store API;)

matrixwebtech
Sep 24, 2014, 9:55 AM
thanks daniil for the hint.this thread can close now

Sample Code

<script>
var set = function (field,grid) {
var store = App.GridPanel1.getStore();
store.each(function (record) {
record.data.company = field.getValue();
console.log(record.data.company);
});
grid.getView().refresh();


}

</script>