I have a igTreeGrid and i am trying to update a cell in parent row based on the values in child row on "editCellEnded" event.
I am trying to call "setCellValue" but i keep getting this error: "cannot call methods on igGridUpdating prior to initialization; attempted to call method 'setCellValue'"
How can i update my parent cell value?
I tried your solution of calling the igGridUpdating with the following variations, all give the same error:
$("#treegrid").igGridUpdating("setCellValue", $(parentTR).attr("data-id"), ui.columnKey, sum );
$("#" + $("#treegrid").igTreeGrid("id")).igGridUpdating("setCellValue", $(parentTR).attr("data-id"), ui.columnKey, sum );
$("#treegrid").igTreeGrid("widget").igGridUpdating("setCellValue", $(parentTR).attr("data-id"), ui.columnKey, sum );
$("#treegrid").igGrid("widget").igGridUpdating("setCellValue", $(parentTR).attr("data-id"), ui.columnKey, sum );
I am using jquery-1.10.2.js, jquery-ui-1.11.4.js
Here is my code:
$("#treegrid").igTreeGrid({ width: "100%", //dataSource: gridData, //bound to flat data source, autoGenerateColumns: false, primaryKey: "bgt_rowid", foreignKey: "bgt_prowid", initialExpandDepth: 0, updateUrl: "Services/BudgetService.asmx/Update", autoCommit : true, columns: [ { headerText: "שם", key: "bgt_rowname" , width: "300px" , dataType: "string" }, { headerText: "rowID", key: "bgt_rowid", width: "100px", dataType: "number" , hidden: true},//must column. without it the grid is not working properly. { headerText: "ParentID", key: "bgt_prowid", width: "100px", dataType: "number", hidden: true },//must column. without it the grid is not working properly. //dynamically add columns <% br=""> For Each col As Builder.Tarbut.DAL.BudgetColumn In GridCols Response.Write(String.Format("{{ headerText: ""{0}"", key: ""{1}"", dataType: ""number"" }},", col.ColTitle, col.ID)) Next %> ], features: [ { name: "Selection", multipleSelection: true, mode: "cell", activation: true }, { name: "Sorting", applySortedColumnCss: false, //mode: "multi" }, { name: "Filtering", //filterButtonLocation : "right", labels: { advancedButtonLabel: "Advanced", after: "לפני", before: "אחרי", clear: "נקה סינון", contains: "מכיל", doesNotContain: "אינו מכיל", doesNotEqual: "שונה מ", empty: "ריק", endsWith: "מסתיים ב", equals: "שווה ל", false: "false", falseLabel: "false", filterDialogCaptionLabel: "Advanced Filtering", greaterThan: "גדול מ", greaterThanOrEqualTo: "גדול או שווה ל", lessThan: "קטן מ", lessThanOrEqualTo: "קטן או שווה ל", startsWith: "מתחיל ב"
}, nullTexts: { after: "לפני...", before: "אחרי...", clear: "נקה סינון", contains: "מכיל...", doesNotContain: "אינו מכיל...", doesNotEqual: "שונה מ...", empty: "ריק", endsWith: "מסתיים ב...", equals: "שווה ל...", false: "false", falseLabel: "false", filterDialogCaptionLabel: "Advanced Filtering", greaterThan: "גדול מ...", greaterThanOrEqualTo: "גדול או שווה ל...", lessThan: "קטן מ...", lessThanOrEqualTo: "קטן או שווה ל...", startsWith: "מתחיל ב...", } }, /*{ name: "Paging", pageSizeDropDownLabel: "הצג", pageSizeDropDownTooltip: "בחר מספר רשומות לתצוגה", pageSizeDropDownTrailingLabel: "רשומות", currentPageDropDownLeadingLabel: "Current XX Page XX", currentPageDropDownTrailingLabel: "X Pages XXX", firstPageLabelText: "ראשון", firstPageTooltip: "עבור לדף הראשון", lastPageLabelText: "אחרון", lastPageTooltip: "עבור לדף האחרון", nextPageLabelText: "הבא", nextPageTooltip: "עבור לדף הבא", prevPageLabelText: "הקודם", prevPageTooltip: "עבור לדף הקודם", pagerRecordsLabelTemplate: "${startRecord} עד ${endRecord} מתוך ${recordCount}", pageSize: 50 }, { name: "Updating", //enableAddRow: true, enableAddChild: true, addRowLabel: "הוסף שורה", cancelLabel: " בטל", doneLabel: " המשך", editMode: "cell", enableDeleteRow: true, excelNavigationMode: true, horizontalMoveOnEnter: true, validation: true, startEditTriggers: "click,f2,enter", columnSettings: [ { columnKey: "bgt_rowname", editorOptions: { type: "text", required: true //disabled: true } }, ], editCellEnded: function(evt, ui){ if (ui.update){ try{ alert (ui.columnKey + ": " + ui.value); var currentTR = $("#treegrid tr[data-id='" + ui.rowID + "']"); var levelToSum = $(currentTR).attr("aria-level"); while (levelToSum > 0) { //find parent by attribute aria-level="2" var parentTR = $(currentTR).prev(); while ($(parentTR).attr("aria-level") != levelToSum-1) { parentTR = $(parentTR).prev(); }
//sum all children of parent by attribute //aria-owns="treegrid_127 treegrid_128" var sum = 0; var arrChildren = parentTR.attr('aria-owns').split(' '); $.each(arrChildren, function(i, childId){ var rowId = childId.split('_').pop();//get the id var val = $("#treegrid").igTreeGrid("getCellValue", rowId, ui.columnKey); sum+= val; });
} } catch(err){ alert(err.message); } } } } ], rowExpanded: function (evt, ui) { } });
Thanks for your help,
Hagar
Hi Hagar,
You can set the cell value on an igTreeGridUpdating by using the following code:
$(".selector").igTreeGridUpdating("setCellValue", 5, "ProductName", "bologna");
The method name is igTreeGridUpdating. You can find more information about how to use this method in our API docs:http://www.igniteui.com/help/api/2016.1/ui.igtreegridupdating#events:editRowEnding
Please let me know if you have any further questions.