[CLOSED] Load combobox dynamically inside gridpanel editorfield
Hi
I write code as bellow
VIEW CODE
Code:
@model System.Collections.IEnumerable[]
@using Ext.Net
@using Ext.Net.MVC
@{
ViewBag.Title = "ComboBox with Template - Ext.NET MVC Examples";
var X = Html.X();
}
<script>
var addPlant = function () {
var r = Ext.create('pr', {
//common: 'New Plant 1',
//light: 'Mostly Shady',
//price: 0,
//availability: Ext.Date.clearTime(new Date()),
//indoor: false
}),
grid = App.GridPanel1;
grid.store.insert(0, r);
grid.editingPlugin.startEditByPosition({ row: 0, column: 0 });
};
var beforeEdit = function (ed, e) {
var field = this.getEditor(e.record, e.column).field;
switch (e.field) {
case "stateid":
field.allQuery = e.record.get('countryid');
break;
case "cityid":
field.allQuery = e.record.get('stateid');
break;
}
};
var countryRenderer = function (value) {
// alert(value)
var r = App.CountryStore.getById(value);
if (Ext.isEmpty(r)) {
return "";
}
// alert(r.data.Text)
//console.log(r.data.Text)
return r.data.Text;
};
var stateRenderer = function (value) {
var r = App.StateStore.getById(value);
console.log(r)
if (Ext.isEmpty(r)) {
return "";
}
// alert(r.data.Text)
console.log(r)
return r.data.state;
};
var cityRenderer = function (value) {
var r = App.CityStore.getById(value);
console.log(r)
if (Ext.isEmpty(r)) {
return "";
}
// alert(r.data.Text)
// console.log(r.data.city)
return r.data.city;
};
</script>
@X.ResourceManager()
@(X.Store()
.ID("CountryStore")
.Model(
X.Model()
.IDProperty("countryid")
.Fields(
X.ModelField()
.Name("Text")
.ServerMapping("Text")
.Type(ModelFieldType.String)
,
X.ModelField()
.Name("countryid")
.ServerMapping("countryid")
.Type(ModelFieldType.String)
)
)
.DataSource(Model[1])
)
@(X.Store()
.ID("StateStore")
.Model(X.Model()
.IDProperty("stateid")
.Fields(
X.ModelField()
.Name("stateid")
.Mapping("stateid")
.Type(ModelFieldType.String)
,
X.ModelField()
.Name("state")
.Mapping("state")
.Type(ModelFieldType.String)
)
)
.Proxy(X.AjaxProxy()
.Url(Url.Action("GetStates"))
.Reader(X.JsonReader().Root("data"))
)
)
@(X.Store()
.ID("CityStore")
.Model(X.Model()
.IDProperty("cityid")
.Fields(
X.ModelField()
.Name("cityid")
.Mapping("cityid")
.Type(ModelFieldType.String)
,
X.ModelField()
.Name("city")
.Mapping("city")
.Type(ModelFieldType.String)
)
)
.Proxy(X.AjaxProxy()
.Url(Url.Action("GetCities"))
.Reader(X.JsonReader().Root("data"))
)
)
@(X.GridPanel()
.ID("GridPanel1")
.TopBarItem(X.Button().Text("Add").Listeners(le => { le.Click.Fn = "addPlant"; }).Icon(Icon.Add)
)
.Listeners(l =>
{
l.ViewReady.Fn = "addPlant";
l.ViewReady.Delay = 1;
})
.Frame(true)
.Features(X.Summary())
.Height(300)
.Width(600)
.Title("Grid")
.ForceFit(true)
.Store(X.Store()
.ID("Store1")
.Model(X.Model()
.Name("pr")
.Fields(
X.ModelField()
.Name("countryid")
.Type(ModelFieldType.String),
X.ModelField()
.Name("Text")
.Type(ModelFieldType.String),
X.ModelField()
.Name("stateid")
.Type(ModelFieldType.String),
X.ModelField()
.Name("state")
.Type(ModelFieldType.String),
X.ModelField()
.Name("cityid")
.Type(ModelFieldType.String),
X.ModelField()
.Name("city")
.Type(ModelFieldType.String),
X.ModelField()
.Name("population")
.Type(ModelFieldType.Int),
X.ModelField()
.Name("men")
.Type(ModelFieldType.String),
X.ModelField()
.Name("women")
.Type(ModelFieldType.String)
)
)
.DataSource(Model[0])
)
.View(
Html.X().GridView().MarkDirty(false)
)
.ColumnModel(
X.Column()
.DataIndex("countryid")
.Text("Country")
.Renderer("countryRenderer")
.Editor(X.ComboBox()
.QueryMode(DataLoadMode.Local)
//.TriggerAction(TriggerAction.All)
.StoreID("CountryStore")
.ValueField("countryid")
.DisplayField("Text")
),
X.Column()
.DataIndex("stateid")
.Text("State")
.Renderer("stateRenderer")
.Editor(X.ComboBox()
.ID("ddlstate")
.QueryMode(DataLoadMode.Remote)
.TriggerAction(TriggerAction.All)
.StoreID("StateStore")
.ValueField("stateid")
.DisplayField("state")
.CustomConfig(cc => cc.Add(new ConfigItem { Name = "initQuery", Value = "Ext.emptyFn", Mode = ParameterMode.Raw }))
),
X.Column()
.DataIndex("cityid")
.Text("City")
.Renderer("cityRenderer")
.Editor(X.ComboBox()
.ID("ddlcity")
.QueryMode(DataLoadMode.Remote)
.TriggerAction(TriggerAction.All)
.StoreID("CityStore")
.ValueField("cityid")
.DisplayField("city")
.CustomConfig(cc => cc.Add(new ConfigItem { Name = "initQuery", Value = "Ext.emptyFn", Mode = ParameterMode.Raw }))
),
Html.X().SummaryColumn()
.Width(75)
.Text("Population")
.DataIndex("population")
.SummaryType(SummaryType.Sum)
.Renderer("return value ;")
.SummaryRenderer("return value ;")
.Editor(
Html.X().NumberField().AllowBlank(false).MinValue(0).StyleSpec("text-align:left")
),
X.Column()
.DataIndex("men")
.Text("Men")
.Editor(X.TextField()
.ID("txtMen")
.CustomConfig(cc => cc.Add(new ConfigItem { Name = "initQuery", Value = "Ext.emptyFn", Mode = ParameterMode.Raw }))
)
,
X.Column()
.DataIndex("women")
.Text("Wo-Men")
.Editor(X.TextField()
.ID("txtwomen")
.CustomConfig(cc => cc.Add(new ConfigItem { Name = "initQuery", Value = "Ext.emptyFn", Mode = ParameterMode.Raw }))
)
,
Html.X().ImageCommandColumn()
.Width(30)
.Commands(
Html.X().ImageCommand()
.Icon(Icon.Bin)
.ToolTip(t =>
{
t.Text = "Delete plant";
})
.CommandName("delete")
)
.Listeners(l =>
{
l.Command.Handler = "this.up('gridpanel').store.removeAt(recordIndex);";
})
)
.Plugins(X.CellEditing()
.Listeners(events => {
events.BeforeEdit.Fn = "beforeEdit";
})
.ClicksToEdit(1)
.DirectEvents(events =>
{
events.Edit.Action = "Edit";
events.Edit.EventMask.ShowMask = true;
events.Edit.EventMask.CustomTarget = "App.GridPanel1";
events.Edit.ExtraParams.Add(new Parameter { Name = "field", Value = "e.field", Mode = ParameterMode.Raw });
events.Edit.ExtraParams.Add(new Parameter { Name = "index", Value = "e.rowIdx", Mode = ParameterMode.Raw });
events.Edit.ExtraParams.Add(new Parameter { Name = "recordData", Value = "e.record.data", Mode = ParameterMode.Raw });
})
)
)
@(X.Button().Text("Save").Icon(Icon.DatabaseSave).DirectEvents(d =>
{
d.Click.Action = "save";
d.Click.ExtraParams.Add(new Parameter
{
Name = "values",
Value = "Ext.encode(#{GridPanel1}.getRowsValues())",
Mode = ParameterMode.Raw
});
})
)
CONTROLLER CODE
Code:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Ext.Net;
using Ext.Net.MVC;
using System.Text;
namespace ERP_test.Controllers
{
public class masterdetailsController : Controller
{
//
// GET: /masterdetails/
public ActionResult Index(string id)
{
List<object> countries = new List<object>(10);
List<object> states = new List<object>(10);
for (int i = 1; i <= 10; i++)
{
countries.Add(new { Text = "C" + i,countryid=i });
}
if (id == "edit")
{
return View(new IEnumerable<object>[]
{
new List<object>
{
new {countryid = "1", stateid = "1",state="C1_S1", cityid = "1", population = "25",men="58",women="25"},
new {countryid = "1", stateid = "1",state="C1_S1", cityid = "1", population = "65",men="45",women="65"},
new {countryid = "1", stateid = "1",state="C1_S1", cityid = "2", population = "56",men="67",women="89"},
},
countries
});
}
else
{
return View(new IEnumerable<object>[]
{
new List<object>
{
new {country = "", state = "", city = "", population = "0",men="0",women="0"},
},
countries
});
}
}
public ActionResult GetStates(string query)
{
List<object> states = new List<object>(10);
if (string.IsNullOrEmpty(query) == false)
{
for (int i = 1; i <= 10; i++)
{
states.Add(new { stateid=i,state = query + "_S" + i });
}
}
return this.Store(states);
}
public ActionResult GetCities(string query)
{
List<object> cities = new List<object>(10);
if (string.IsNullOrEmpty(query) == false)
{
for (int i = 1; i <= 10; i++)
{
cities.Add(new { cityid=i,city= query + "_C" + i });
}
}
return this.Store(cities);
}
public ActionResult Edit(string field, string recordData, int index)
{
List<string> fields = new List<string> { "country", "state", "city", "population", "men", "women" };
int startIndex = fields.IndexOf(field);
JsonObject data = JSON.Deserialize<JsonObject>(recordData);
ModelProxy record = X.GetCmp<Store>("Store1").GetAt(index);
Random r = new Random();
switch (field)
{
case "cityid":
record.Set(fields[3], r.Next(10, 200).ToString());
record.Set(fields[4], r.Next(10, 200).ToString());
record.Set(fields[5], r.Next(10, 200).ToString());
break;
}
return this.Direct();
}
public ActionResult save(string values)
{
string json = values;
Dictionary<string, string>[] companies = JSON.Deserialize<Dictionary<string, string>[]>(json);
StringBuilder sb = new StringBuilder();
foreach (Dictionary<string, string> row in companies)
{
foreach (KeyValuePair<string, string> keyValuePair in row)
{
sb.Append(keyValuePair.Key);
}
foreach (KeyValuePair<string, string> keyValuePair in row)
{
sb.Append(keyValuePair.Value);
}
}
return this.Direct();
}
}
}
run this and go to edit mode [http://localhost:####/masterdetails/index/edit]
I am trying to load this grid if the page open as edit mode,for that I write bellow code
Code:
if (id == "edit")
{
return View(new IEnumerable<object>[]
{
new List<object>
{
new {countryid = "1", stateid = "1",state="C1_S1", cityid = "1", population = "25",men="58",women="25"},
new {countryid = "1", stateid = "1",state="C1_S1", cityid = "1", population = "65",men="45",women="65"},
new {countryid = "1", stateid = "1",state="C1_S1", cityid = "2", population = "56",men="67",women="89"},
},
countries
});
}
but state and city combo not fill with these value.
I click on save button , and debug
Code:
public ActionResult save(string values)
values parameter and found stateid and cityid present ,that means the value I send to view on edit time is bind with combo but not displaying.
please let me know what is the best ay to do this.