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
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>
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);
});
}
Can anyone please reply to this?
Hello Singh,
This error message gets thrown when the igGrid control couldn’t find the row or column you are trying to edit – usually when it doesn’t exist in the browser’s DOM because of the virtualization or paging.
How do you initialize the “currentTradeIdFileTypeId” variable that you are using in the “startEdit” method? If you haven’t set it properly, it might be the cause of the issue.
If you need any additional assistance, feel free to contact me.
Hi Vasil,
I have checked what you suggested but currentTradeIdFileTypeId always has the correct value. It is set somewhere above in the code. Can you please suggest something else?
There could be some other thing in the code that is causing the issue and which I am missing, but it is not possible to know without the whole grid configuration and the event handlers that you are using.
Is there a way for you to provide me with an isolated code sample? Or modify the sample I sent you with your settings and event handlers and send it back to me?