[Razor] How to binding girdpanel to a form using Javascript
I want to map data between 2 form in my Project like this: https://examples2.ext.net/Examples/G.../Form_Details/
But this code is Asp.net, I use MVC3.
My Grid Panel
Code:
items.Add(Html.X().Panel().Region(Region.East).Width(370).Layout("fit").Title("Control Panel").BodyCls("west-main").Split(true).Collapsible(true)
.Items(itemeast =>
{//Grid Panel Control Panel Right---------------
itemeast.Add(Html.X().GridPanel().ID("ControlPanelGrid").Title("Device")
.Store(store =>
{
store.Add(Html.X().Store().ID("Storer1")
.AutoLoad(true)
.Model(model => model.Add(Html.X().Model()
.Fields(fields =>
{
fields.Add(Html.X().ModelField().Name("grid-alarm-device-name"));
fields.Add(Html.X().ModelField().Name("grid-check"));
fields.Add(Html.X().ModelField().Name("grid-devidename"));
fields.Add(Html.X().ModelField().Name("grid-lastupdate"));
fields.Add(Html.X().ModelField().Name("grid-status"));
fields.Add(Html.X().ModelField().Name("grid-retry"));
}
)))
.DataSource(dataDevice)
);
})
.ColumnModel(columnModel =>
{
columnModel.Columns.Add(Html.X().Column().Text("").ID("ga_id").DataIndex("grid-alarm-device-name").Width(30));
columnModel.Columns.Add(Html.X().CheckColumn().TdCls("td-non-img-checkcolum").DataIndex("grid-check").Width(30).Editable(true));
columnModel.Columns.Add(Html.X().Column().ID("ga_device_name").Text("Devide Name").DataIndex("grid-devidename"));
columnModel.Columns.Add(Html.X().Column().ID("ga_last_update").Text("Latest Update").DataIndex("grid-lastupdate").Width(120));
columnModel.Columns.Add(Html.X().Column().ID("ga_status").Text("Status").DataIndex("grid-status"));
columnModel.Columns.Add(Html.X().Column().ID("ga_retry").Text("Retry").DataIndex("grid-retry"));
})
.SelectionModel(gaSelectionModel =>
{
gaSelectionModel.Add(Html.X().RowSelectionModel().Listeners(garowlistener =>
{
garowlistener.Select.Handler = "gaRowSelect();";//Call gaRowSelect in Javascript
}));
})
This is my Text Fields:
Code:
itemtabpanel.Add(Html.X().Panel().Title("Status").IconPath("/Content/themes/icons/information.png")
.Items(itemstatus =>
{
itemstatus.Add(Html.X().FormPanel().ID("FormPanel").BodyBorder(0).Border(false).Layout("column").Height(290).Items(itemformpanel =>
{
itemformpanel.Add(Html.X().Panel().Layout("form").BodyBorder(0).Border(false).Height(290).ColumnWidth(0.65).Items(itempanel1 =>
{
itempanel1.Add(Html.X().Panel().Layout("column").BodyBorder(0).Border(false).Height(150).Items(itemchildpanel01 =>
{
itemchildpanel01.Add(Html.X().Panel().BodyBorder(0).Border(false).Height(150).ColumnWidth(0.5).Items(itemchildpan1 =>
{
itemchildpan1.Add(Html.X().Panel().Height(10).BodyBorder(0).Border(false));
itemchildpan1.Add(Html.X().TextField().FieldLabel("Device Name").Name("ga_device_name").ReadOnly(true));
itemchildpan1.Add(Html.X().TextField().FieldLabel("GPS Time").Name("ga_last_update").ReadOnly(true));
itemchildpan1.Add(Html.X().TextField().FieldLabel("Received Time").Name("ga_last_update").ReadOnly(true));
itemchildpan1.Add(Html.X().TextField().FieldLabel("Journey(Km)").ReadOnly(true));
}
));