Hi,
I followed your media item "CRUD with JQuery Grid", and I applied it right to my example. It works all fine, but I have some problems when I try to implement CRUD operations also on child columns.
My javascript understands that a new child row has been added, or deleted or edited, but what my controller action receives is an empty transaction log.
Here is my code:
@(Html.Infragistics().Grid(Model).ID("grid1").UpdateUrl(Url.Action("UpdateData")).AutoCommit(false).AutoGenerateColumns(true).PrimaryKey("Id").Columns(col =>{ col.For(x => x.Id); col.For(x => x.Code); col.For(x => x.Description).HeaderText("Descrizione"); col.For(x => x.Type).HeaderText("Tipologia");}).Width("100%").Features(feat =>{ feat.Updating() .StartEditTriggers(GridStartEditTriggers.DblClick) .ColumnSettings(colset => { colset.ColumnSetting().ColumnKey("Id").Required(true); colset.ColumnSetting().ColumnKey("Code").Required(true); colset.ColumnSetting().ColumnKey("Description").Required(true); colset.ColumnSetting().ColumnKey("Type").EditorType(ColumnEditorType.Numeric).EditorOptions("groupSeparator: '', maxDecimals: 0 ").Required(true); });}).AutoGenerateLayouts(false).ColumnLayouts(layouts =>{ layouts.For(l => l.SubProducts) .AutoGenerateColumns(false) .ForeignKey("Id") .PrimaryKey("Id") .Columns(childcol => { childcol.For(c => c.Id); childcol.For(c => c.SubCode).HeaderText("Codice Sub"); childcol.For(c => c.SubDescription).HeaderText("Descrizione"); }) .Features(childfeat=> { childfeat.Updating() .StartEditTriggers(GridStartEditTriggers.DblClick) .ColumnSettings(childcolset => { childcolset.ColumnSetting().ColumnKey("Id").Required(true); childcolset.ColumnSetting().ColumnKey("SubCode").Required(true); childcolset.ColumnSetting().ColumnKey("SubDescription").Required(true); }); });}).DataBind().Render()) <script type="text/javascript"> $("#grid1").live('iggridupdatingrowadded', function () { $("#grid1").igGrid("saveChanges"); }); $("#grid1").live('iggridupdatingeditrowended', function (event, ui) { if (ui.rowAdding == false) { $("#grid1").igGrid("saveChanges"); } }); $("#grid1").live('iggridupdatingrowdeleted', function () { $("#grid1").igGrid("saveChanges"); });</script>
So, if I add, edit or delete a row my controller action receives a JSON transaction where I can find these information. But if I add, edit or delete a child row, what my controller action receives is an empty pramater. Here is my action:
public ActionResult UpdateData(string ig_transactions){ ArrayList transactions = (ArrayList)Procurios.Public.JSON.JsonDecode(ig_transactions); foreach (Hashtable t in transactions) { switch (t["type"].ToString()) { case "newrow": case "row": // Do Something... break; case "deleterow": // Do Something... break; } } JsonResult result = new JsonResult(); Dictionary<string, bool> response = new Dictionary<string, bool>(); response.Add("Success", true); result.Data = response; return result;}
Take care that UI works correctly: I can see added rows, edited rows and deleted rows not only on main columns, but also on child ones. But of corse it is just a graphical way: if I refresh the page only main columns have been correctly updated, while child ones not.
Am I doing something wrong? Probably I have to define other event binders for child columns...or is there the possibility to define a different UpdateUrl for children?
Thanks in advance!
Flavio
hi Flavio,
this appears to be a bug in the sense that child grids' transaction logs aren't aggregated altogether and appended to the root's transaction log. This will be fixed, but the usage should be slightly different:
1) instead of calling:
$("#grid1").igGrid("saveChanges");
2) you should call:
$("#grid1").igHierarchicalGrid("saveChanges");
the fix should make it in the next service release.
Thanks,
Angel
Hi Angel, and thank you very much! Very quickly response!!
Uhm..if I use:
$("#grid1").live('iggridupdatingrowadded', function () { $("#grid1").igHierarchicalGrid("saveChanges"); });
instead of calling:
$("#grid1").live('iggridupdatingrowadded', function () { $("#grid1").igGrid("saveChanges"); });
actions is not called. I can define only one update url, right? Or is there a way to define an Update Url for the first grid and another one for child grid? I don't know if this is the problem..but in the way you indicated I can't call the controller action..
Any idea?
Hi Angel,
Ok for the Update Url.
But do you mean there is no function in the code I posted (in that case you can show me what kind of function I have to call, please?) or are you saying there is no function in ig javascript file?
Anyway..if I wish to have a gird with another child grid, but it is needed to have on both CRUD operations, what have I to do? Do I have to implement a master-detail grid? Other suggestions?
Hi Flavio,
is this the same topic that's discussed in this thread?
http://forums.infragistics.com/forums/t/66844.aspx
Ok. After different attempts, I decided to leave this way.If someone is interested in this, a possible solution was the following.
I implemented something like a master-detail grid. So, the first one has its own CRUD operations as I already had, while the second one has other 3 events binder and so other 3 CRUD operations to be matched with. Of course I had to catch row selection event on the master grid, because only with this I am able to load data for the child grid. But child grid has now its own ID, UpdateUrl and add/edit/delete events, so it's perfect.
I think it is a good solution for what I wanted to do.
If someone would like to know something more, please ask me and I will post some useful code.
Thanks to all for your help,
Would you share your code as an example because I am trying hard on master detail?
Thanks
Wilson