igGrid Resizing column does not save edited row changes

Not Answered This post has 0 verified answers | 10 Replies | 3 Followers Thread's RSS feed.

Lisa
Points 105
Replied On: Mon, Aug 14 2017 4:56 PM Reply

We are using the 2016.2 version but can also reproduce this with the latest (2017.1).  We have long column names and users who like to resize columns

Steps to reproduce:

1. Click the first column and change the text - I changed "Sales Representative" in the first record for Nancy to "Test"

2. Resize the first column so you can see the full column name.

Expected results: EditRowEnding event will show ui.update = true and will detect the changed values (in this example - I expected to see Sales Representative in the old values and Test in the new values 
Actual Results: EditRowEnding event does NOT detect the changed values - ui.update is false and the old values are the same as the new values even though I changed them prior to the row losing focus

I have included an example below:

https://jsfiddle.net/egnLm435/1/

  • Post Points: 20

All Replies

[Infragistics]Tsanna
Points 14,930
Infragistics Employee
Replied On: Tue, Aug 15 2017 9:08 AM Reply

Hello Lisa,

Changes after editing are saved when you either press Enter button or click on another record in the grid. Losing focus by clicking to resize the column header or clicking outside the grid doesn't apply the changes made previously, therefore ui.update will be false and the new value will be equal to the old value. 

If you have further questions, please let me know.

Regards,

Tsanna

Associate Software Developer

  • Post Points: 35
Lisa
Points 105
Replied On: Tue, Aug 15 2017 9:35 AM Reply

Hi Tsanna,

What would you suggest as a workaround for us? 

I ask because this functionality was previously available to us in 2015.2 - in the past we were able to put the code below on the "iggridresizingcolumnresizing" event as a workaround and this allowed us to save changes, however this workaround no longer behaves the same in 2016.2 

// save row edits before resizing
          if ($("#grid").igGridUpdating("isEditing")) {
              $("#grid").igGridUpdating("endEdit"truetrue);
          }
I've modified the fiddle to use 2015.2 to demonstrate how this worked for us previously.  Is our only option to downgrade to 2015.2 and lose the new features in 2016.2?
Please advise.
Thanks,
Lisa
  • Post Points: 5
Lisa
Points 105
Replied On: Tue, Aug 15 2017 10:45 AM Reply

This is the updated fiddle showing the workaround that we used in the past in 2015.2 but are unable to use in 2016.2 (and 2017.1).  Is there a similar workaround that will work for us in the newer versions?

https://jsfiddle.net/egnLm435/9/

  • Post Points: 20
[Infragistics]Tsanna
Points 14,930
Infragistics Employee
Replied On: Wed, Aug 16 2017 7:24 AM Reply

Hello Lisa,

You could use the same approach with a little difference. By calling endEdit API you should add update parameter with "true" value in order the edit process to accept the current changes. For example: $("#grid").igGridUpdating("endEdit", true);

Here is also the updated version of the jsFiddle for your reference: https://jsfiddle.net/egnLm435/10/

Please let me know if this works for your requirement.

Regards,
Tsanna

Associate Software Developer

  • Post Points: 20
Lisa
Points 105
Replied On: Thu, Aug 17 2017 4:50 PM Reply

Hi Tsanna,

The behavior in the example is exactly what we want!  However I'm having a difficult time implementing this suggestion into our larger project. 

When I debug the example, the resizing event happens before the edit row ending event, however when I debug our larger project, the edit row ending event happens first (and ui.update is always false). 

Is there a setting or property to control the order the grid events are detected in?  I'm trying to determine what could be causing the edit row ending event to be triggered first in our larger project but the resizing event to be triggered first in the example?

Thanks,
Lisa

  • Post Points: 20
[Infragistics]Tsanna
Points 14,930
Infragistics Employee
Replied On: Fri, Aug 18 2017 7:40 AM Reply

Hello Lisa,

In order to address your issue correctly I have the following questions to you:

- what is the exact version including build version in your project

- are you sure that your project doesn't include code that triggers the updating before resizing?

Please let me know if you need further assistance.

Regards,

Tsanna

Associate Software Developer

  • Post Points: 20
Lisa
Points 105
Replied On: Mon, Aug 21 2017 3:00 PM Reply

Hi Tsanna,

We are using 16.2.20162.2114 (this is the latest available via NuGet package manager).  

We are using the same events as in the sample (iggridupdatingeditrowending and iggridresizingcolumnresizing).  We are also using the group by, paging, sorting, filtering, and column moving options, but even when I remove those options from our code, the edit row ending event always occurs first in our code, however in the fiddle example, the resizing event occurs first. 

Is there a way to force one event to trigger first? Or is there a way to prevent a user from resizing the columns if the row is in edit mode?  I've tried returning false in the resizing event but this does not work for me as the edit row ending event always occurs first and ui.update is false (like in my original example)

Thanks,
Lisa

  • Post Points: 20
[Infragistics]Tsanna
Points 14,930
Infragistics Employee
Replied On: Tue, Aug 22 2017 5:03 AM Reply

Hello Lisa,

There is an API that checks if the grid is in edit mode: https://www.igniteui.com/help/api/2016.2/ui.iggridupdating#methods:isEditing You may try using it in resizing event.

Also please send me an isolated version of your project that reproduces your issue, so that I can test it on my side.

If you need further assistance, please let me know.

Regards,

Tsanna

Associate Software Developer

  • Post Points: 20
Lisa
Points 105
Replied On: Thu, Aug 24 2017 10:26 AM Reply

Hi Tsanna,

I am still having issues with column resizing.

For the other grid features such as paging, group by, sorting, the isEditing method works perfectly! 

iggridpagingpagesizechanging
iggridpagingpageindexchanging
iggridgroupbygroupedcolumnschanging
iggridsortingcolumnsorting

These all work very well and I'm able to return false to force the user to stay in edit mode until they have clicked done or cancel and this behavior is actually what our users prefer. 

However, I am unable to return false in the iggridresizingcolumnresizing event in my project and I am able to reproduce this in the fiddle below:

https://jsfiddle.net/egnLm435/22/

To reproduce:
Edit a column - I edited Sales Representative to Sales Manager
Expand the "This is a very long title" column so you can see the full column

Expected results: grid will remain in edit mode with user's changed text visible
Actual results: edit mode ends and users's changes are lost

It is odd because with other events (paging, group by, sorting) - those events work perfectly!
Steps to reproduce expected behavior with other events:
Edit a column - I edited Sales Representative to Sales Manager
Click the column name to sort
Click the show 5 records dropdown
Drag a column into the group by section
Click the select columns link

Expected results: grid will remain in edit mode with user's changed text visible
Actual results: as expected

What can I do to make the columnresizing event detect that the grid is editing and remain in edit mode the way all of these other events do?

I'd appreciate any advice or help you can provide on this.

Thank you,
Lisa

  • Post Points: 20
Stamen Stoychev
Points 5,243
Infragistics Employee
Replied On: Fri, Aug 25 2017 9:38 AM Reply

Hello Lisa,

This works if immediate propagation is stopped as in this version of the fiddle: https://jsfiddle.net/egnLm435/23/

The reason the events work differently is that Updating stops editing for different reasons. Paging, Sorting, GroupBy, Filtering are features that cause rerendering of data as they produce new data views. Updating recognizes this by handling rendering-related events produced by the grid. These never happen if you cancel the underlying feature-specific events.

With columnResizing editing stops because of the same event that you want to cancel but the cancellation is only recognized by the Resizing feature. Calling stopImmedatePropagation solves this. We stop editing in this case because of how Updating editors are positioned and sized causing column resizing to produce pretty nasty results otherwise.

I hope this helps! Please, let me know if you have any other questions or concerns!

Best regards,

Stamen Stoychev

  • Post Points: 5
Page 1 of 1 (11 items) | RSS