1. Home
  2. Forum
  3. Blazor
  4. Disabling Expand/Collapse animation on Row Detail View

Disabling Expand/Collapse animation on Row Detail View

Hello team

Unless I'm mistaken there is no property allowing to disable the animation in the SfGrid component (such as the Animation property in SfTab or SfListView), when the details view is expanded.

The animation can be especially annoying when trying to automatically re-open details upon table refresh, using the various techniques the support team has provided in this forum (example: https://www.syncfusion.com/forums/169338/keep-detailtemplate-open-after-grid-refresh)

The animation greatly delay the rendering of the grid when it's refreshed.

Hence I would like to know if there's a way (using CSS or Javascript) to disable such animations for the child detail template of a SfGrid please?

Could an AnimationSettings property be added to the SfGrid in a later version of the component for that purpose?


Thank you very much for your valuable help!


11 Replies 1 reply marked as answer
RS Renjith Singh Rajendran Syncfusion Team April 15, 2022 12:59 PM UTC

Hi Kareem,


Greetings from Syncfusion support.


We have analyzed your query and we need the following details to further proceed on this scenario. Kindly share with us the following details for better assistance.


  1. Share a video demo showing the detailed explanation of the problem or your complete requirement.
  2. Share the details regarding the Animation in grid which you are referring.


Please get back to us if you need further assistance.


Regards,

Renjith R


KA Kareem Abdul-Jabbar April 18, 2022 08:50 AM UTC

Hi Renjith


I really thought clicking on a row to open its detail view was associated with an animation, but your answer has let me guess I was wrong.


I cannot install a screen recording software on my corporate workstation, but I can use the camera of my smartphone. I used the slow motion feature to highlight what I thought was a deliberate animation.


Actually it looks like it's due to the way the details view is rendered. The details view contains a SfTab containing an SfGrid. The tabs header row being rendered before the grid in the tab contents made me think it was an animation.


I couldn't attach the mp4 video so here's a link to a video sharing platform


https://streamable.com/wkvqdv


Is there a way to change the way the view is rendered to avoid this animation feeling? Maybe by forcing the tab contents and header being rendered at the same time? Or someway to speed up the rendering?


I guess the impression could be reduced by using paging, but paging in the grid is not something my users want.


You'll find attached the source code of my demo application


Thanks much


Attachment: DemoApplication_d9b94bc5.zip

MS Monisha Saravanan Syncfusion Team April 19, 2022 02:31 PM UTC

Hi Kareem,


Greetings from Syncfusion support.


Currently we are validating your query at our end and we will update further details within two business days on or before (21.04.2022). Until then we appreciate your patience.


Regards,

Monisha


MS Monisha Saravanan Syncfusion Team April 21, 2022 04:03 AM UTC

Hi Kareem,


Thanks for the patience.


We have checked your query and we suggest you to use OverflowMode as MultiRow to render SfTab header and content at the same time. Kindly refer the attached code snippet for your reference.


<SfGrid DataSource="Orders" @ref="mainGrid">

    <GridEvents TValue="Order"

        OnActionComplete="OnActionComplete"

        OnRecordClick="RecordClickHandler"

        DetailDataBound="DetailDataBound"

        DataBound="DataBound"/>

    <GridTemplates>

        <DetailTemplate>

            @{

                var order = context as Order;

                <SfTab OverflowMode="OverflowMode.MultiRow">

                    <TabAnimationSettings>

                        <TabAnimationPrevious Effect="AnimationEffect.None"></TabAnimationPrevious>

                        <TabAnimationNext Effect="AnimationEffect.None"></TabAnimationNext>

                    </TabAnimationSettings>

                    <TabItems>

…

                    </TabItems>

                </SfTab>

            }

        </DetailTemplate>

    </GridTemplates>

</SfGrid>

 


Kindly get back to us if you have further queries.


Regards,

Monisha


KA Kareem Abdul-Jabbar April 22, 2022 08:07 AM UTC

Hi Monisha,

Great support, this is way much better, thank you very much!

Looking at this new result in slow motion showed something remained: the padding around the detail row was rendered before the row itself, but I easily fixed it through CSS by zeroing the padding.


<style>

    .e-grid .e-detailcell {

        padding: 0 !important;

    }

</style>


Please note the CSS class "e-detailcell" is not documented (https://blazor.syncfusion.com/documentation/datagrid/how-to/grid-styling), should I be concerned about this CSS class being renamed/deleted?


May I ask one more question about this result?

To get an even smoother result, I wish I could re-expand previously expanded rows a little sooner. I currently do this when the OnActionComplete callback is raised with RequestType == Action.Refresh. Is there a smarter way to do this please?


Thanks again!


MS Monisha Saravanan Syncfusion Team April 25, 2022 03:00 PM UTC

Hi Kareem,


Thanks for the update.


Query: “ Looking at this new result in slow motion showed something remained: the padding around the detail row was rendered before the row itself, but I easily fixed it through CSS by zeroing the padding.”


We are glad to hear that the provided solution was helpful in achieving your requirement and you have resolved your query on your own.


Query: “To get an even smoother result, I wish I could re-expand previously expanded rows a little sooner. I currently do this when the OnActionComplete callback is raised with RequestType == Action.Refresh. Is there a smarter way to do this please?”


We have checked your query with your provided sample but we are quite unclear about the exact requirement. We suspect that you are trying to expand/collapse row in ActionComplete event. Kindly share the below details to validate further about your requirement.


  1. Share us more information regarding your query.
  2. Share us the video demonstration explaining your query.
  3. Share us the reason why you are handling the Expand/Collapse externally. Are you facing any issues with inbuilt support.
  4. When detailed expand icon is clicked every time all the expanded rows  are collapsed and reopened again. Is this your expected behavior?


The above-requested details will be very helpful for us to validate the reported query at our end and provide the solution as early as possible.


Regards,

Monisha


KA Kareem Abdul-Jabbar April 25, 2022 05:49 PM UTC

Hi Monisha

In my setup, the datagrid is updated (rows are added) by a timer callback, as I did in my sample.

Problem is, whenever a new row is added, all previously expanded rows are collapsed.

Therefore, I need to keep track of the expanded rows to re-expand them when the grid is refreshed.

I'm definitely open to any other smarter solution that would allow my users to keep their expanded rows always open, even after the addition of a new row.

My main concern is, as explained above, to keep expanded rows despite new rows being added to the grid. I've understood the expanded rows are collapsed upon grid refresh by design. Therefore I need the visually smoothest workaround for my users.

Here's a small video clip of the sample application updated thanks to your guidance

https://streamable.com/860epn


As you can see, problem is, there are still a few tenths of seconds where the user can see the grid with all rows collapsed before the rows are expanded again. I wish I could reduce this time period with collapsed rows to a minimum.


Thank you very much for your valuable help!


MS Monisha Saravanan Syncfusion Team April 26, 2022 01:51 PM UTC

Hi Kareem,


Thanks for the update.


We are currently checking the reported query from our end and we will update the further details within two business days. Until then we appreciate your patience.


Regards,

Monisha


MS Monisha Saravanan Syncfusion Team April 28, 2022 02:14 PM UTC

Hi Kareem,


Thanks for the patience.


We have checked your query and your solution seems fine to us. We suspect that you are facing timedelay when calling DetailExpandCollapseRow  inside Action complete event. So we suggest you to use it inside DataBound event by using an flag variable which is set as true on OnAfterRendered method. Kindly refer the attached code snippet and sample for your reference.


 

    private async Task DataBound()

    {

         if(IsRendered)

        {

            foreach (var order in expandedOrders)

            {

                await mainGrid.DetailExpandCollapseRow(order);

            }

        }

        if (timerSet)

        {

            return;

        }

 

        timer = new Timer(TimerCallback, null, TimeSpan.Zero, TimeSpan.FromSeconds(10));

        timerSet = true;

 

      

    }

    public bool IsRendered = false;

    protected override void OnAfterRender(bool firstRender)

    {

        if(!firstRender)

        {

           IsRendered = true;

 

        }

        base.OnAfterRender(firstRender);

    }

 

 



Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/DEMOAP~1-783224879.zip


Kindly get back to us if you have further queries.


Regards,

Monisha


Marked as answer
KA Kareem Abdul-Jabbar April 28, 2022 02:51 PM UTC

Hi Monisha,

It seems it's slightly better now indeed.

Of course, the solution is not perfect, but it's now quick enough to be bearable!

Thank you very much for your support!


MS Monisha Saravanan Syncfusion Team April 29, 2022 10:26 AM UTC

Hi Kareem,


Thanks for the update. We suspect that the reported issue has been resolved. Kindly get back to us if you have further queries.


Regards,

Monisha


Loader.
Up arrow icon