Mar 25, 2015, 12:46 PM
RowExpander Sub-Grid remote loading issues
Dears,
Kindly, I am using Ext.Net MVC version 3 and I am facing some issue when using RowExpander to load a remote grid based on some parameters.
1-How can I access the loaded sub-grid store to collect its data after modifications?
2-when you add a new row in the main grid the previous rows' sub grid disappear, then if you go to that record and start modify any value its sub grid will appear again, but the TopBar buttons will not work in case you are using Chrome. How to solve this issue of sub-grid disappearance.
3-"low priority" :TopBar icons in sub-grid is giving error (not found), how can I resolve this issue ?
4-The last thing, "low priority" : When adding new row in the main grid and modify its cells the update icon "red one on top left" does not appear and the row is not exists in grid.getStore().getNewRecords() but in grid.getStore().getUpdatedRecords(). I think this happened because of live search cells ? if you have a solution for this also please provide.
Please review the below codes for main grid and its remote loading sub-grid:
Kindly, I am using Ext.Net MVC version 3 and I am facing some issue when using RowExpander to load a remote grid based on some parameters.
1-How can I access the loaded sub-grid store to collect its data after modifications?
2-when you add a new row in the main grid the previous rows' sub grid disappear, then if you go to that record and start modify any value its sub grid will appear again, but the TopBar buttons will not work in case you are using Chrome. How to solve this issue of sub-grid disappearance.
3-"low priority" :TopBar icons in sub-grid is giving error (not found), how can I resolve this issue ?
4-The last thing, "low priority" : When adding new row in the main grid and modify its cells the update icon "red one on top left" does not appear and the row is not exists in grid.getStore().getNewRecords() but in grid.getStore().getUpdatedRecords(). I think this happened because of live search cells ? if you have a solution for this also please provide.
Please review the below codes for main grid and its remote loading sub-grid:
@model IEnumerable<dynamic>
@*
@model IEnumerable<WebApplication1.Models.MarcData>
<script type="text/javascript">
var MarcData = Ext.JSON.decode('@Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model))');//note this single quotes !!
</script>
<script src="~/Scripts/marcgrid.js"></script>
@(Html.X().Window()
.Width(800)
.Title("Marc Data")
.CloseAction(CloseAction.Destroy)
.Items(
Html.X().Panel()
.Height(500)
.AutoScroll(true)
.Html("<div id='marcgrid'></div>")
)
)
------------------------------------------------
@(Html.X().Window()
.Width(800)
.Title("Marc Data")
.CloseAction(CloseAction.Destroy)
.Items(Html.X().TreePanel()
.Height(500)
.Border(false)
.AutoScroll(true)
.RootVisible(false)
.Store(
Html.X().TreeStore().Proxy(Html.X().AjaxProxy().Url(Url.Action("GetChildren")))
)
.Root(
Html.X().Node().NodeID("{MainDataID:" + ViewData["MainDataID"] + "}").Text("Tags")
)
)
)
*@
@(Html.X().Window()
.Width(800)
.Title("Marc Data")
.CloseAction(CloseAction.Destroy)
.Items(
Html.X().GridPanel()//main data id: MainDataID
.ID("MainMarcGridID")
.Title("Marc Data Grid")
.Height(500)
.EnableColumnResize(true)
.Plugins(
Html.X().RowExpander()
.SwallowBodyEvents(true)
.Loader(Html.X().ComponentLoader()
.Url(Url.Action("getSubtagsGrid"))
.Mode(LoadMode.Component)//use this with component config !
.LoadMask(mask => mask.ShowMask = true)
.Params(new { MarcDataID = JRawValue.From("this.record.getId()"),tag =new JFunction("App.tag")})//this is nice work man !!!
)
)
.Store(
Html.X().Store()
.DataSource(Model)
.Model(Html.X().Model()
.IDProperty("MarcDataID")
.Fields(
new ModelField("MarcDataID", ModelFieldType.Int) { Mapping = "MarcDataID" },
new ModelField("tag", ModelFieldType.String) { Mapping = "tag" },
new ModelField("i1", ModelFieldType.String) { Mapping = "i1" },
new ModelField("i2", ModelFieldType.String) { Mapping = "i2" }
)
)
)
.ColumnModel(
Html.X().Column().DataIndex("tag").Text("Tag").Width(145).Editor(
Html.X().ComboBox()
.ID("tagsID")
.EmptyText("Select Tag")
.DisplayField("tag")
.ValueField("tag")
.ForceSelection(true)
.AllowBlank(false)
.QueryMode(DataLoadMode.Local)//done
.Store(Html.X().Store()
.Model(Html.X().Model()
.Fields(
new ModelField("tag", ModelFieldType.String) { Mapping = "tag" }
)
)
.DataSource(ViewData["tags"])
)
),
Html.X().Column().DataIndex("i1").Text("First Indicator").Width(300).Editor(
Html.X().ComboBox()
.DisplayField("i1")
.ValueField("i1")
.TypeAhead(false)
.ForceSelection(true)
.PageSize(5)
.HideTrigger(true)
.MinChars(0)
.TriggerAction(TriggerAction.Query)
.Store(Html.X().Store()
.AutoLoad(false)
.Proxy(Html.X().AjaxProxy()
.Url(Url.Action("getIndicator1"))
.ActionMethods(am => am.Read = HttpMethod.POST)
.Reader(Html.X().JsonReader().RootProperty("data"))
)
.Parameters(ps => ps.Add(new StoreParameter("tag", "App.tag", ParameterMode.Raw)))//use raw option to execute the code !
.Model(Html.X().Model()
.Fields(
new ModelField("i1", ModelFieldType.String) { Mapping = "i1" }
)
)
)
),
Html.X().Column().DataIndex("i2").Text("Second Indicator").Width(300).Editor(
Html.X().ComboBox()
.DisplayField("i2")
.ValueField("i2")
.TypeAhead(false)
.ForceSelection(true)
.PageSize(5)
.HideTrigger(true)
.MinChars(0)
.TriggerAction(TriggerAction.Query)
.Store(Html.X().Store()
.AutoLoad(false)
.Proxy(Html.X().AjaxProxy()
.Url(Url.Action("getIndicator2"))
.ActionMethods(am => am.Read = HttpMethod.POST)
.Reader(Html.X().JsonReader().RootProperty("data"))
)
.Parameters(ps => ps.Add(new StoreParameter("tag", "App.tag", ParameterMode.Raw)))//use raw option to execute the code !
.Model(Html.X().Model()
.Fields(
new ModelField("i2", ModelFieldType.String) { Mapping = "i2" }
)
)
)
)
)
.TopBar(
Html.X().Toolbar()
.Items(
Html.X().Button()
.Text("Add")
.Icon(Icon.Add)
.Handler("this.up('grid').store.add({tag:'',i1:'',i2:''});"),
Html.X().Button()
.ItemID("btnRemove")
.Text("Delete")
.Icon(Icon.Exclamation)
.Handler("this.up('grid').deleteSelected();")
)
)
.SelectionModel(Html.X().CellSelectionModel().Listeners(ls => ls.SelectionChange.Handler = "function(e,d){if(d[0] != null) App.tag = d[0].data.tag;}"))//here we set a global tag then use it in params sending !
.Plugins(
Html.X().CellEditing().ClicksToEdit(1)//.Listeners(ls => ls.Edit.Fn = "edit")
)
)
.Buttons(
Html.X().Button()
.Text("Save")
.Handler("alert('WOWOWOWW')")
)
)
@model IEnumerable<dynamic>
<script type="text/javascript">
var edit = function (editor, e) {
/*
"e" is an edit event with the following properties:
grid - The grid
record - The record that was edited
field - The field name that was edited
value - The value being set
originalValue - The original value for the field, before the edit.
row - The grid table row
column - The grid Column defining the column that was edited.
rowIdx - The row index that was edited
colIdx - The column index that was edited
*/
// Call DirectMethod
if (!(e.value === e.originalValue || (Ext.isDate(e.value) && Ext.Date.isEqual(e.value, e.originalValue)))) {
Ext.net.DirectMethod.request({
url: '@(Url.Action("Edit"))',
params: {
id: e.record.data.ID,
field: e.field,
oldValue: e.originalValue,
newValue: e.value,
customer: e.record.data
}
});
}
};
</script>
@(Html.X().GridPanel()//main data id: MainDataID
.EnableColumnResize(true)
.ColumnLines(true)
.HideHeaders(true)
//.Title("Sub-Tags")
.Height(100)
.Store(
Html.X().Store()
.DataSource(Model)
.Model(Html.X().Model()
.Fields(
new ModelField("MarcDataID", ModelFieldType.Int) { Mapping = "MarcDataID" },
new ModelField("t", ModelFieldType.String) { Mapping = "t" },
new ModelField("d", ModelFieldType.String) { Mapping = "d" }
)
)
)
.ColumnModel(
Html.X().Column().DataIndex("t").Width(200).Editor(
Html.X().ComboBox()
.DisplayField("t")
.ValueField("t")
.TypeAhead(false)
.ForceSelection(true)
.PageSize(5)
.HideTrigger(true)
.MinChars(0)
.TriggerAction(TriggerAction.Query)
.Store(Html.X().Store()
.AutoLoad(false)
.Proxy(Html.X().AjaxProxy()
.Url(Url.Action("getSubtags"))
.ActionMethods(am => am.Read = HttpMethod.POST)
.Reader(Html.X().JsonReader().RootProperty("data"))
)
.Parameters(ps => ps.Add(new StoreParameter("tag", "App.tag", ParameterMode.Raw)))//use raw option to execute the code !
.Model(Html.X().Model()
.Fields(
new ModelField("t", ModelFieldType.String) { Mapping = "t" }
)
)
)
),
Html.X().Column().DataIndex("d").Width(500).Editor(Html.X().TextField())
)
.TopBar(
Html.X().Toolbar()
.Items(
Html.X().Button()
.Text("Add")
//.Icon(Icon.Add)
.Handler("this.up('grid').store.insert(0, {MarcDataID:0,t:'',d:''});"),//get parent ID
Html.X().Button()
.Text("Delete")
//.Icon(Icon.Exclamation)
.Handler("this.up('grid').deleteSelected();")
)
)
.SelectionModel(Html.X().CellSelectionModel())
.Plugins(
Html.X().CellEditing().ClicksToEdit(1)//.Listeners(ls => ls.Edit.Fn = "edit")
)
)
@*
<script type="text/javascript">
var marcDataSources = Ext.JSON.decode('@Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model))');//note this single quotes !!, will contains the sub grid data.
//so I will generate the dropdowns based on this object
</script>
<script src="~/Scripts/marcsubgrid.js"></script>
@(Html.X().Panel()
.ID("marcsubgrid_" + Model.MarcDataID)
.Title("Sub-Tags")
.Html("<div id='marcsubgrid_" + Model.MarcDataID + "'></div>")//need to add dynamic ID ! marcsubgrid_240
.Height(100)
.AutoScroll(true)
)
*@
public ActionResult ShowMarcFormatData()
{
ViewData["MainDataID"] = 29;
//List<MarcData> marcData = db.MarcDatas.Where(q => q.MainDataID == 29).ToList<MarcData>();
List<dynamic> marcModel = new List<dynamic>();
/*
foreach (MarcData row in marcData)
{
marcModel.Add(getRowData(row));
}
*/
//need to return list of header tags and each one with list of sub tags.
//Session["marcModel"] = marcModel;
ViewData["tags"] = marcutl.Tags;
return new Ext.Net.MVC.PartialViewResult()
{
Model = marcModel,
ViewData = ViewData
};
}