Hi
[Ignite UI 13.1]
I have an igHierarchicalGrid with two bands.
I want to set a cell value in the child band but I can't figure out the syntax. I know that my igUpdating instance has the method but I can't figure out how to reference the igUpdating instance associated with the child band.
My first band is for tickets, my child band holds the timesheet entries for each ticket.
This will set the IsDirty cell to true in the ticket band (the top level band):
$("#TimesheetGrid").igGridUpdating("setCellValue", ui.rowID, "IsDirty", true);
Now I just need the equivalent for the child band. I have tried many variations but haven't got there yet.
eg
var oColLayouts = $("#TimesheetGrid").igHierarchicalGrid("option", "columnLayouts");for (var j = 0; j < oColLayouts.length; j++) { if (oColLayouts[0].features[j].name == "Updating") { oColLayouts[0].features[j].igUpdating("setCellValue", ui.rowID, "IsDirty", true); }// Updating ??}
I have also tried these, without success:
oColLayouts[0].igUpdating("setCellValue", ui.rowID, "IsDirty", true);
oColLayouts[0]("setCellValue", ui.rowID, "IsDirty", true);
I am a bit lost now, not sure what else to try.
Regards,
Graeme Hart
I can add the following to the list of things that don't work:
oColLayouts[0].features[j]("setCellValue", ui.rowID, "IsDirty", true);
oColLayouts[0].features[j].setCellValue( ui.rowID, "IsDirty", true);
The code now looks like this, and still doesn't work (the loop wasn't right in teh example above, but that had no bearing on the matter):
var oColLayouts = $("#TimesheetGrid").igHierarchicalGrid("option", "columnLayouts");for (var j = 0; j < oColLayouts[0].features.length; j++) { if (oColLayouts[0].features[j].name == "Updating") { oColLayouts[0].features[j]("setCellValue",ui.rowID, "IsDirty", true); }// Updating ??}
ERROR: TypeError: oColLayouts[0].features[j] is not a function
..and to give you some context here is the problem that I am trying to solve by setting the IsDirty cell value:
My child band has several columns but only one editable column, which is a checkbox column. When the user ticks the box and clicks a save button on the page the cell is still in edit mode so the new value is not saved.
I was running the grid in row edit mode but they kept forgetting to click the "Done" button so changes were not saved. I have switched to cell edit mode which gets rid of the "Done" button but not the problem.
I can use setCellValue to set the value of a hidden cell (IsDirty) which updates the UI by changing the row to italics. The row is then included in the save processing (ie the grid's transactions). This works fine with iGrid but I can't figure out how to do it with a child band in a hierarchical grid.
The 13.2 sample has the same problem:
http://www.igniteui.com/hierarchical-grid/editing-dataset
If you edit a cell in the product (ie child) band and then click the save button the row is not updated. If instead you click in another cell instead of clicking the save button the row text turns italic. If you then click the save button the change is processed and the row goes back to normal styling.
Hello Graeme,
You should be able to get the collection of rendered layouts by using the "allChildren" API function of igHierarchicalGrid.
var bands = $("#TimesheetGrid").igHierarchicalGrid("allChildren");
Then you can proceed with calling "setCellValue" for the one that's being edited. The "isEditing" igGridUpdating function will help you with this. You can also try calling "endEdit" before "saveChanges" instead of your current implementation to ensure the latest value is saved.
The solution will look similar to the following:
bands.map(function () {
var band = $(this);
if (band.igGridUpdating("isEditing")) {
band.igGridUpdating("endEdit", true); // passing "true" forces endEdit to update the grid
}
});
$("#TimesheetGrid").igHierarchicalGrid("saveChanges");
I hope this helps! Please, let me know if you have any other questions or concerns!
Best regards,
Stamen Stoychev
Thanks very much for your answer - it was bang on. I just had to add a little bit to do the same job on teh parent band and now all my changes are being saved.
For completeness, here is the entire save button function :
$("#saveChanges").bind({click: function (e) { var oBands = $("#TimesheetGrid").igHierarchicalGrid("allChildren"); oBands.map(function () { var band = $(this); if (band.igGridUpdating("isEditing")) { band.igGridUpdating("endEdit", true); // passing "true" forces endEdit to update the grid } }); if ($("#TimesheetGrid").igGridUpdating("isEditing")) { $("#TimesheetGrid").igGridUpdating("endEdit", true); // passing "true" forces endEdit to update the grid } $("#TimesheetGrid").igHierarchicalGrid("saveChanges"); $.ajax({ url: "", type: "GET", cache: false, async: false }); }});
Thanks again for the spot on reply,
Graeme