Hi,
I have 3 bands in igHierarchicalGrid. I have few columns which are editable in the second band.
I am using the default row level editing with Done and Cancel buttons. After SaveChanges is called on the Done button click I want to refresh the grid, expand it and make one of the cells in a row to be editable dynamically.
I am calling
grid.igHierarchicalGrid("dataBind"); which refreshes the grid but I am not able to edit the row without again clicking on it.
I want to make a row editable dynamically which has a particular ID as primary key just after the grid is refreshed and expanded.
I am able to refresh and expand the grid.
I have tried using StartEdit but it needs endEdit which I don't want to call:
gridUpdating.startEdit(row.Id, "Comment");
Can you please suggest something?
Regards
Singh
hi,
I tried the above but I get the following error:
"Editing the specified row or column is currently not possible. It should be in view on the current page and virtualization frame.
My code is as below:
$(document).delegate("#igGrid", "iggriddatarendered", function (evt, ui) {
if (expandAll === true) {
var parentGrid = $("#igGrid").igHierarchicalGrid("rootWidget");
var domElement = parentGrid.rowById(rowID);
if (domElement != null) {
$("#igGrid").igHierarchicalGrid("expand", domElement, function () {
//updating the first row of the first child table
var children = $("#igGrid").igHierarchicalGrid("allChildren");
children.eq(0).igGridUpdating("startEdit", currentTradeIdFileTypeId);
});
}
Hello, Singh
Thank you for posting in our forum!
If the startEdit method requires endEdit, there is a chance you are incorrectly targeting the parent grid instead of the child one and because the editing hasn’t finished, it throws an error.
When you expand your child grid, the “expand” method has a callback function which you may use to edit the rows programmatically. Here’s how do to it:
I made a small sample, check it out.
Best Regards,
Vasil Pavlov
Associate Software Developer
Infragistics, Inc.
www.infragistics.com/support
<!DOCTYPE html> <html> <head> <title>HierarchicalGrid</title> <script src="https://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script> <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script> <script src="https://cdn-na.infragistics.com/igniteui/2017.2/latest/js/infragistics.core.js"></script> <script src="https://cdn-na.infragistics.com/igniteui/2017.2/latest/js/infragistics.lob.js"></script> <script src="https://igniteui.github.io/help-samples/data-files/northwind.js"></script> <link href="https://cdn-na.infragistics.com/igniteui/2017.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"> <link href="https://cdn-na.infragistics.com/igniteui/2017.2/latest/css/structure/infragistics.css" rel="stylesheet"> </head> <body> <table id="hierarchicalGrid"></table> <script> $(function () { $("#hierarchicalGrid").igHierarchicalGrid({ width: "100%", autoGenerateColumns: false, dataSource: northwind, responseDataKey: "results", dataSourceType: "json", caption: "Orders By Employee", features: [ { name: "Responsive", enableVerticalRendering: true, columnSettings: [ { columnKey: "Title", classes: "ui-hidden-phone" }, { columnKey: "Address", classes: "ui-hidden-phone" } ] }, { name: "Sorting", inherit: true }, ], columns: [ { key: "EmployeeID", headerText: "Employee ID", dataType: "number", width: "0%", hidden: true }, { key: "FirstName", headerText: "First Name", dataType: "string", width: "20%" }, { key: "LastName", headerText: "Last Name", dataType: "string", width: "20%" }, { key: "Title", headerText: "Title", dataType: "string", width: "20%" }, { key: "Address", headerText: "Address", dataType: "string", width: "25%" }, { key: "City", headerText: "City", dataType: "string", width: "15%" } ], autoGenerateLayouts: false, columnLayouts: [ { key: "Orders", responseDataKey: "results", width: "100%", autoGenerateColumns: false, primaryKey: "OrderID", columns: [ { key: "OrderID", headerText: "Order ID", dataType: "number", width: "20%" }, { key: "CustomerID", headerText: "Customer ID", dataType: "string", width: "0%", hidden: true }, { key: "ShipName", headerText: "Ship Name", dataType: "string", width: "20%" }, { key: "ShipAddress", headerText: "Ship Address", dataType: "string", width: "20%" }, { key: "ShipCity", headerText: "Ship City", dataType: "string", width: "20%" }, { key: "ShipCountry", headerText: "Ship Country", dataType: "string", width: "20%" } ], features: [ { name: "Responsive", enableVerticalRendering: false, columnSettings: [ { columnKey: "ShipAddress", classes: "ui-hidden-phone" }, { columnKey: "ShipCity", classes: "ui-hidden-phone" } ] }, { name: "Updating", editmode: "row", enableAddRow: true }, { name: "Summaries", columnSettings: [ { columnKey: "OrderID", summaryOperands: [ { rowDisplayLabel: "Orders Count", type: "count", decimalDisplay: 3 } ] }, { columnKey: "ShipName", allowSummaries: false }, { columnKey: "ShipAddress", allowSummaries: false }, { columnKey: "ShipCity", summaryOperands: [ { rowDisplayLabel: "Sao Paulo Orders", type: "custom1", summaryCalculator: $.proxy(countSaoPauloValues, this), order: 5, decimalDisplay: 1 }, { rowDisplayLabel: "Bergamo Orders", type: "custom2", summaryCalculator: $.proxy(countBergamoValues, this), order: 6, decimalDisplay: 1 } ] }, { columnKey: "ShipCountry", allowSummaries: false }, ] } ] } ] }); //expanding first parent row in the grid var firstRow = $("#hierarchicalGrid").igHierarchicalGrid("rootWidget").rowAt(0); $("#hierarchicalGrid").igHierarchicalGrid("expand", firstRow, function(){ //updating the first row of the first child table var children = $("#hierarchicalGrid").igHierarchicalGrid("allChildren"); children.eq(0).igGridUpdating("startEdit", 10258); }); function countSaoPauloValues(data) { var i, l = data.length, count = 0, elem; for (i = 0; i < l; i++) { elem = data[i]; if (elem === "Sao Paulo") { count++; } } return count; } function countBergamoValues(data) { var i, l = data.length, count = 0, elem; for (i = 0; i < l; i++) { elem = data[i]; if (elem === "Bergamo") { count++; } } return count; } }); </script> </body> </html>
In addition to the above issue:
My grids are load on demand. As per the requirements, when I refresh the grid I need to append a custom text to one of the cells in the column.
It refreshes the grid with the custom value, now if the user clicks the row manually to make it editable ( because I am not able to make it editable dynamically), the Done button remains disabled unless a value is changed in the that row. I want Done button to be enabled so that it can go into save changes.