Group By - Add New Row with TABLE elements in a template

1175

Karthik Thiagarajan posted over 9 years ago

In reference too:

http://es.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.

Parents

17590

Offline Vasya Kacheshmarova posted over 9 years ago

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.

igGridAddNewRowGrouping.zip

2745

Offline Daniel Dority posted over 9 years ago in reply to Vasya Kacheshmarova

The zip file didn't include the datasource.js.
Cancel
Reply

Cancel

Reply

17590

Offline Vasya Kacheshmarova posted over 9 years ago in reply to Daniel Dority

Hello,

@Karthik, please let me know if you need any further assistance with this matter.

@Daniel, attached you wil find the dataSource.js file.

dataSource.zip
Cancel
Reply

Cancel

Children

17590

Suggested Answer
Offline Vasya Kacheshmarova posted over 9 years ago in reply to Karthik Thiagarajan
Hello Karthik,

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();
   }
  }
}

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.
igGridGroupBy_save_expanded_state.zip
Cancel
Reply

Reject Answer

Cancel
1175

Offline Karthik Thiagarajan posted over 9 years ago in reply to Vasya Kacheshmarova

Performing a data bind causes this issue:

http://es.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?
Cancel
Reply

Cancel