Hello,
I'm testing the MVC Hierarchical grid with the following code. I can't edit the child rows and I can't select one child row, it selects all the child row.
@(Html.Infragistics() .Grid(Model) .ID("igGrid") .AutoGenerateColumns(false) .PrimaryKey("ID") .Features(f => { f.Updating().EditMode(GridEditMode.Row); }) .UpdateUrl(Url.Action("CfgCatalogsSaveData")) .Columns(column => { column.For(x => x.ID).HeaderText("ID"); column.For(x => x.Name).HeaderText("Name"); }) .ColumnLayouts(layouts => { layouts.For(x => x.CfgCatalogItems) .PrimaryKey("ID") .AutoGenerateColumns(false) .AutoCommit(true) .Columns(childcols1 => { childcols1.For(x => x.ChoiceValue).HeaderText("Valeur"); childcols1.For(x => x.Label).HeaderText("Texte"); childcols1.For(x => x.Congruent).HeaderText("Compliant"); }) .Features(g => { g.Updating().EditMode(GridEditMode.Row); }) ; })
.DataBind() .Render())
Best regards,
Alain
Hello Alain,
Both issues are most likely related to the fact you are not defining the ID column for the child layout but still set it as a primary key. Updating requires that there is a correct and unique primary key defined available for the data source you are editing. Selection would select all rows that have the same PK and since the PK column is not defined all values for it will be 'null' causing the behavior you are experiencing.
I hope this helps! Please, let me know if you have any other questions or concerns!
Stamen Stoychev
Hello Stamen,
It works, thank you.
But I have another problem. I save the data to the server with UpdateUrl(...), but the data added or changed in the children are never send to the server. It works properly for the parent.
public ActionResult CfgCatalogsSaveData() { GridModel gridModel = new GridModel(); List<Transaction> transactions = gridModel.LoadTransactions(HttpContext.Request.Form["ig_transactions"]);//List<Transaction> transactions2 = gridModel.LoadTransactions(HttpContext.Request.Form["ig_transactions"]);
foreach (Transaction t in transactions) { if (t.type == "newrow") { //model.Add(t.row); } else if (t.type == "deleterow") { //model.Remove(model.Find(Convert.ToInt32(t.rowId))); } else if (t.type == "row") { //CfgUnit o = model.Find(Convert.ToInt32(t.rowId)); //o.Name = t.row.Name; //o.Note = t.row.Note; } }
JsonResult result = new JsonResult(); Dictionary response = new Dictionary(); response.Add("Success", true); result.Data = response; return result; }
I haven't found an example, could you help me ?
Could you paste the code with the saveChanges call? You may be targeting the igGrid parent widget instead of the igHierarchicalGrid widget. The latter bundles all transactions for all layouts and should work for your case. You can find a code snippet with sample usage here.
Yes, I used the igGrid and not the igHierachicalGrid.
Now I receive the children data but I have still 2 problems:
1)If I add a new children, in the MVC controller I receive the children data but I haven't the parent ID ?
2) When I modify or add a parent, after the record is in italic to show the modification. But when I change/add a children, the record is not in italic.
@using Infragistics.Web.Mvc;@model IQueryable<NCH.Quality.QModels.CfgCatalog>
<h2>Catalogues</h2>
@(Html.Infragistics() .Grid(Model) .ID("igGrid") .AutoGenerateColumns(false) .PrimaryKey("ID") .Features(f => { f.Updating().EditMode(GridEditMode.Row); }) .UpdateUrl(Url.Action("CfgCatalogsSaveData")) .Columns(column => { column.For(x => x.ID).HeaderText("ID"); column.For(x => x.Name).HeaderText("Nom Catalogue"); }) .ColumnLayouts(layouts => {
layouts.For(x => x.CfgCatalogItems) .PrimaryKey("ID") .ForeignKey("CfgCatalogID") .AutoGenerateColumns(false) .AutoCommit(true) .Columns(childcols1 => { childcols1.For(x => x.ID).HeaderText("ID"); childcols1.For(x => x.ChoiceValue).HeaderText("Valeur"); childcols1.For(x => x.Label).HeaderText("Texte"); childcols1.For(x => x.Congruent).HeaderText("Compliant"); childcols1.For(x => x.CfgCatalogID).HeaderText("CatID").Hidden(true); }) .Features(g => { g.Responsive(); g.Updating().ColumnSettings(cs => { cs.ColumnSetting().ColumnKey("ID").ReadOnly(true); cs.ColumnSetting().ColumnKey("ChoiceValue").EditorType(ColumnEditorType.Numeric).Required(true); cs.ColumnSetting().ColumnKey("Label").EditorType(ColumnEditorType.Text).Required(true); cs.ColumnSetting().ColumnKey("Congruent").EditorType(ColumnEditorType.Checkbox).Required(true); cs.ColumnSetting().ColumnKey("CfgCatalogID").ReadOnly(true); }).EditMode(GridEditMode.Row).Validation(true); g.Sorting() ; }).UpdateUrl(Url.Action("CfgCatalogsSaveData")) ; })
<input type="button" id="saveChanges" class="button-style" value="Enregistrer" /><input type="button" id="undo" class="button-style" value="Undo" />
<script type="text/javascript">
function GridModalLoadingIndicator(grid) { var modalBackground = $("<div class='ui-widget-overlay ui-iggrid-blockarea' style='position: absolute; display: none; width: 100%; height: 100%;'></div>").appendTo(grid.data("igGrid").container()); function _show() { modalBackground.show(); grid.data("igGrid")._loadingIndicator.show(); } function _hide() { modalBackground.hide(); grid.data("igGrid")._loadingIndicator.hide(); } return { show: _show, hide: _hide } }
$(function () { var loadingIndicator;
var grid = $("#igGrid");
loadingIndicator = new GridModalLoadingIndicator(grid); $("#saveChanges").igButton({ labelText: $("#saveChanges").val(), disabled: true }); $("#undo").igButton({ labelText: $("#undo").val(), disabled: true });
$("#saveChanges").on('igbuttonclick', function (e) { //grid.igGrid("saveChanges", function saveSuccess() { // loadingIndicator.hide(); //});
grid.igHierarchicalGrid("saveChanges", function saveSuccess() { loadingIndicator.hide(); }); loadingIndicator.show(); $("#undo").igButton("disable"); $(this).igButton("disable"); return false; } );
$("#undo").on('igbuttonclick', function (e, args) { updates = $.extend({}, grid.data('igGrid').pendingTransactions()); $.each(updates, function (index, transaction) { grid.igGrid("rollback", transaction.rowId, true); });
$("#undo").igButton("disable"); $("#saveChanges").igButton("disable");
return false; } );
grid.on("iggriddatabinding", function (e, args) { loadingIndicator.show(); });
grid.on("iggriddatabound", function (e, args) { loadingIndicator.hide(); });
grid.on("iggridupdatingrowdeleted", function (e, args) { $("#undo").igButton("option", "disabled", false); $("#saveChanges").igButton("option", "disabled", false); });
grid.on("iggridupdatingrowadded", function (e, args) { $("#undo").igButton("option", "disabled", false); $("#saveChanges").igButton("option", "disabled", false); }); grid.on("iggridupdatingeditrowended", function (e, args) { if (args.update) { $("#undo").igButton("option", "disabled", false); $("#saveChanges").igButton("option", "disabled", false); } });
});
</script>
----------------------------------------------------------------------
public class CfgCatalogsController : Controller { private NCH.Quality.QDAL.QContext db = new NCH.Quality.QDAL.QContext();
public ActionResult Index() { var model = db.CfgCatalogs; return View(model); } public ActionResult CfgCatalogsSaveData() { GridModel gridModel = new GridModel(); List<Transaction<NCH.Quality.QModels.CfgCatalog>> transactions = gridModel.LoadTransactions<NCH.Quality.QModels.CfgCatalog>(HttpContext.Request.Form["ig_transactions"]); List<Transaction<NCH.Quality.QModels.CfgCatalogItem>> transactions2 = gridModel.LoadTransactions<NCH.Quality.QModels.CfgCatalogItem>(HttpContext.Request.Form["ig_transactions"]); var model = db.CfgCatalogs;
foreach (Transaction<CfgCatalog> t in transactions) { if (t.type == "newrow") { model.Add(t.row); } else if (t.type == "deleterow") { model.Remove(model.Find(Convert.ToInt32(t.rowId))); } else if (t.type == "row") { CfgCatalog o = model.Find(Convert.ToInt32(t.rowId)); o.Name = t.row.Name; o.Name = t.row.Name; } }
db.SaveChanges();
JsonResult result = new JsonResult(); Dictionary<string, bool> response = new Dictionary<string, bool>(); response.Add("Success", true); result.Data = response; return result; } }
The modified styles are applied to rows the changes for which are not yet committed locally. Your child layout uses auto-committing (.AutoCommit(true)) which means that all changes are committed as they come and the rows are never painted as modified. Disabling auto-committing allows for transactions rollback, as well as for aggregating them.
As for the other issue - the parent row ID is not part of the Infragistics.Web.Mvc.Transaction object for the HierarchicalGrid. However, it should be available in the CfgCatalogItem object available in Transaction.row if it exists as a property of CfgCatalogItem. If this is not the case, please let me know which Ignite UI version you are using so I can investigate this further.
I am sorry, the issue is indeed easily reproducible when adding rows. I logged it as a bug with #228032 in our internal tracking system. A support case is created on your behalf with number CAS-178264-M9B4Q9, so that you can be notified when the bug is fixed. You can find your active cases under Account - Support Activity in our website. Select your ticket and go to Development Issues tab to view the status of related bugs.
I also managed to work around the issue using the rowAdding event for child layouts. I am attaching an updated sample. I hope this helps unblocking your from working on your application while a fix for the bug is being developed.
It's exactyl my scenario.
I made a test, I added a child row in the CfgCatalogID 1, and as you can see in the attached screenshot, the CfgCatalogID is at 0.
Regards,
In the code you provided the CfgCatalogID property is defined as a column for the child layout so the grid is certainly aware of it as long as it's populated correctly in your model. I did a test on my own using as much from your code as possible and the property was certainly available in the Transaction.row members in the transactions2 list. I am attaching my sample for your reference.
If it is not representative of your scenario, please apply any changes you feel necessary so I can take another look.
First point solved with the autocommit to false.
Concerning the parent row ID, in the Transaction.row, there is the object CfgCatalogItem with a property CfgCatalogID, but this property is defined in my class and the grid don't know it must to set it with parent row ID.
public class CfgCatalogItem { public int ID { get; set; }
public int ChoiceValue { get; set; }
public string Label { get; set; }
public bool Congruent { get; set; }
public int CfgCatalogID { get; set; }
public virtual CfgCatalog CfgCatalog { get; set; } }
I have the last version of the Ignite UI (16.1.20161.2145).