¡Hello community! I have two simple questions regarding infragistics, I researched quite a lot but couldn't find a solution.
The first one: ¿How can I detect and manipulate the collapsability of rows in a Hierarchical Grid? I would need it to answer to javascript triggers.
The second one: In the child rows, there is an editable column that is a simple checkbox. The thing is that it changes state when clicking anywhere in the cell, I would need it to change only when clicking the checkbox.
Thanks and have a nice weekend!
Hello Marcos,
After investigating this further, I determined that collapsing and expanding rows in igHierarchicalGrid could be handled with the rowCollapsing and rowExpanding events. Both events could be canceled by returning false:
rowCollapsing: function(evt, ui){
return false;
},
Additionally, rows could be expanded and collapsed by using the expand and collapse methods:
var parentGrid = $("#hierarchicalGrid").igHierarchicalGrid("rootWidget");
var rowDomElement = parentGrid.rowAt(0);
$("#hierarchicalGrid").igHierarchicalGrid("expand", rowDomElement);
Furthermore, by setting editorType of a column to checkbox, clicking outside the checkbox does not change its value:
{
name: "Updating",
showDoneCancelButtons: false,
columnSettings: [
columnKey: "Available",
editorType: "checkbox",
}
]
Please let me know if you need any further information regarding this matter.
Regards, Monika Kirkova, Infragistics
Good afternoon Monika,
Thank you so much for your response. I could solve the problem of collapsing and uncollapsing rows. I could not solve the problem of checkboxes. Still if I click outside the box the value gets updated. Maybe there is something I am missing?
DataGridList.childGridSettings($('#dataGrid'), { features: [ { "name": "Resizing", "inherit": true, "columnSettings": [] }, { "name": "Selection", "activation": false, "mode": "row", "mouseDragSelect": false, "multipleSelection": true, "inherit": true, "columnSettings": [] }, { "name": "RowSelectors", "enableRowNumbering": false, "enableCheckBoxes": false, "inherit": true, "columnSettings": [] }, { name: "Updating", enableAddRow: false, editMode: "cell", enableDeleteRow: false, columnSettings: [ { columnKey: "Include", editorOptions: { type: "bool", disabled: false }, editorType: "checkbox" /*columnKey: "Include", editorType: "checkbox"*/ } ], editCellStarting: function (evt, ui) {
if ((ui.rowAdding == false) && (ui.columnKey == "ConceptName")) { return false; } } } ] });
I am glad you were able to achieve your requirement for expanding/collapsing rows.
Regarding clicking outside the checkbox, I have added your code in a small sample, however, the value of the checkbox is not updated if the click is outside.
Below I am attaching the sample, demonstrating the described behavior. Please test it on your side and let me know how it behaves. If this is not an accurate demonstration of what you are trying to achieve please feel free to modify it and send it back to me along with steps to reproduce. Alternatively, if the behavior cannot be replicated please feel free to provide your own sample. Remove any external dependencies and code that is not directly related to the issue, zip your application and attach in in this case.
Having a working sample on my side, which I can debug, is going to be very helpful in finding the root cause of this behavior.
Thank you for your cooperation.
Looking forward to hearing from you.
igHierarchicalGridUpdatingConfirmation.zip
Dear Monika, thank you so much for your time. Unfortunately, I cannot replicate the exact environment because I work with a huge framework. However, I built the grid just from js, as you did, but the problem still remains. It just doesn't seem to catch the editorType. Maybe it is a problem with the version? Or was it always available?
The data loaded is just some random rows which are displayed correctly.
UI.LoadGrid = function () {$("#dataGrid2").igHierarchicalGrid({width: "500px",initialDataBindDepth: 2,initialExpandDepth: 1,animationDuration: 0,dataSource: UI.ViewModel.DataForGrid(),dataSourceType: "json",responseDataKey: "d",
autoGenerateColumns: false,primaryKey: "CustomID",columns: [{ headerText: "CustomID", key: "CustomID", width: "150px", dataType: "number" },{ headerText: "Description", key: "Description", width: "150px", dataType: "string" }],autoGenerateLayouts: false,columnLayouts: [{key: "PricesOfReferenceConceptsList",width: "400px",responseDataKey: "",childrenDataProperty: "PricesOfReferenceConceptsList",renderCheckboxes: true,autoGenerateColumns: false,primaryKey: "CustomID",columns: [{ key: "CustomID", headerText: "CustomID", dataType: "number", width: "50px" },{ key: "ConceptName", headerText: "ConceptName", dataType: "string", width: "150px" },{ key: "Include", headerText: "Include", dataType: "bool", width: "50px" }],features: [{"name": "Resizing","inherit": true,"columnSettings": []},{"name": "Selection","activation": false,"mode": "row","mouseDragSelect": false,"multipleSelection": true,"inherit": true,"columnSettings": []},{"name": "RowSelectors","enableRowNumbering": false,"enableCheckBoxes": false,"inherit": true,"columnSettings": []},{name: "Updating",enableAddRow: false,editMode: "cell",enableDeleteRow: false,columnSettings: [{columnKey: "Include",editorOptions: {type: "bool",disabled: false},editorType: "checkbox"}],
}]}],features: [{name: "Updating",},]});}
After investigating this further, I determined that this behavior was fixed with version 15.2, when new Infragistics editors were introduced. What I could suggest is upgrading to the latest version of the product in order for all new features to be available.
Please keep in mind that according to our support policy Infragistics products have one year of product service releases and three years of developer support. This means that versions older than 18.2 are considered retired and are no longer eligible for Developer Support Services.
In the following topic you could find which versions we are supporting and when will their support expire.
Please let me know if you need additional information regarding this matter.