In reference too:
http://www.infragistics.com/community/forums/t/77361.aspx
[BUG] When using TABLE elements in a template, adding a new row to the grid does not create additional groups.
Hello Karthik,
Thank you for posting in our community.
I assume that the issue that you are experiencing is that when you have a grouped columns and add a new it is not going to the respective group. If this is the case what I can suggest is handling rowAdded event of the grid. n this event you could rebind the grid in order to ensure that changes arte accepted by the grid. For example:
$(function () { $('#table1').igGrid({ virtualization: false, autoCommit: true, autoGenerateColumns: false, width: '500px', height: '500px', columns: [ { headerText: "Product ID", key: "ProductID", width: "100px", dataType: "number" }, { headerText: "Units in Stock", key: "UnitsInStock", width: "150px", dataType: "number" }, { headerText: "Product Description", key: "ProductDescription", width: "150px", dataType: "string" }, { headerText: "htmlColumn", key: "htmlColumn", width: "100px", dataType: "string", unbound: true, unboundValues: ["<table><tr><td>I WILL FAIL</td></tr></table>", "<table><tr><td>I WILL FAIL</td></tr></table>", /*workaround*/"<DIV><p>I WILL NOT FAIL</p></DIV>"] } ], dataSource: namedData, primaryKey: "ProductID", features: [ { name: "GroupBy" }, { name: "Updating", rowAdded: function(evt, ui){ $('#table1').igGrid("dataBind"); } } ] }); });
I am attaching a small sample illustrating my suggestion for your reference.
If this is not the behavior that you are experiencing could you please modify my sample and send it back to me. Also, some clarifications are going to be highly appreciated and will help me identify the issue and investigate further.
I also checked the development issue mentioned in the referenced thread and I can confirm it is resolved in the latest versions of IgniteUI - 14.1, 14.2 and 15.1.
I hope you find this information helpful.
Please let me know if you need any further assistance with this matter.
The zip file didn't include the datasource.js.
Hello,
@Karthik, please let me know if you need any further assistance with this matter.
@Daniel, attached you wil find the dataSource.js file.
Performing a data bind causes this issue:
http://www.infragistics.com/community/forums/t/96076.aspx
As a user, they will collapse certain groups and whenever a new row is added the grid will reset the state of the groups that are collapsed. How do I preserve the state of the groups across data binds?
Persisting the expansion state is currently not provided out of the box. What I can suggest as a workaround is saving this expansion state before binding and restoring it after data is bound. Saving could be achieved by looping trough the grouped rows collection and storing every item`s data-state attribute. Afterwards, for restoring the state this collection is looped again and states are compared. If they are different a click is triggered for this row. For example:
.. { name: "Updating", rowAdded: function(evt,ui){ saveState($("#grid1").data("igGrid")); $("#grid1").igGrid("dataBind"); restoreState($("#grid1").data("igGrid")); } } .. function saveState($grid) { $grid._groupState = {}; var $el; $grid.element.find("tr.ui-iggrid-groupedrow").each(function (ix, el) { $el = $(el); $grid._groupState[$el.data("id")] = $el.attr("data-state"); }); } function restoreState($grid) { for(rowId in $grid._groupState) { var $row = $grid.element.find("tr[data-id=" + rowId + "]"); if ($row.attr("data-state") !== $grid._groupState[rowId]) { $row.find("td.ui-iggrid-expandcolumn").mousedown(); } } }
..
{ name: "Updating", rowAdded: function(evt,ui){ saveState($("#grid1").data("igGrid")); $("#grid1").igGrid("dataBind"); restoreState($("#grid1").data("igGrid")); } }
function saveState($grid) { $grid._groupState = {}; var $el; $grid.element.find("tr.ui-iggrid-groupedrow").each(function (ix, el) { $el = $(el); $grid._groupState[$el.data("id")] = $el.attr("data-state"); }); }
function restoreState($grid) { for(rowId in $grid._groupState) { var $row = $grid.element.find("tr[data-id=" + rowId + "]"); if ($row.attr("data-state") !== $grid._groupState[rowId]) { $row.find("td.ui-iggrid-expandcolumn").mousedown(); } } }
I am also attaching a small sample illustrating my suggestion for your reference.
Additionally, I would suggest you logging a product idea on our product ideas web site - http://ideas.infragistics.com
Steps to create your idea:
- Log into the Infragistics Product Ideas site at: http://ideas.infragistics.com
- Navigate to the product of your choice.
- Add your product idea and be sure to be specific and provide us as much details as possible.
Explain the context in which a feature would be used. Remember that for your suggestion to be successful, you need other members of the community to vote for it.
Include link to this forum thread in your idea.
I hope this helps.