Filter Menu Trigger Function

6 posts, 1 answers
  1. Furkan
    Furkan avatar
    18 posts
    Member since:
    Mar 2020

    Posted 22 May 2020 Link to this post

    Is there a filter menu trigger function for?

    I try to use onExpandChange but not calls it.

    I need a function that trigger when filter menu open and close. 

    onCloseMenu function works only when I click Clear button but I need a function when filter menu show and hide

  2. Stefan
    Admin
    Stefan avatar
    3039 posts

    Posted 25 May 2020 Link to this post

    Hello, Furkan,

    If we need an event when the filter will be expanded/collapses the event onExpandChange will be fired as expected.

    If we need an event that will be triggered when the entire ColumnMenu is opened and close, we can use its component did mount event for open and the component will unmount for the close.

    https://stackblitz.com/edit/react-ijpid6?file=app/columnMenu.jsx


    Regards,
    Stefan
    Progress Telerik

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
  3. Furkan
    Furkan avatar
    18 posts
    Member since:
    Mar 2020

    Posted 25 May 2020 in reply to Stefan Link to this post

    Hi Stefan,

    ComponentDidMount is not proper for me. Because I want to use setState method but I get "Maximum update depth exceeded componentdidmount" error

  4. Silviya
    Admin
    Silviya avatar
    442 posts

    Posted 27 May 2020 Link to this post

    Hi Furkan,

    In React many components do no have onOpen events (or in this case onOpenMenu event), as they are similar to the React lifecycle methods. It is not an anti-pattern to call setState in componentDidMount method. But you should make sure that there is a break condition that prevents updating the state every time you component updates.

    React keeps count on how many renders are triggered in a row and if you exceed the maximum count (maximum update depth), then it will throw this error and assume you have an infinite render loop problem.

    Best Regards,
    Silviya
    Progress Telerik

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
  5. Furkan
    Furkan avatar
    18 posts
    Member since:
    Mar 2020

    Posted 27 May 2020 in reply to Silviya Link to this post

    I think you don't understand me.

    Here is my problem:

    https://stackblitz.com/edit/react-ibseaj?embed=1&file=app/main.jsx

    How will you update the toggleBool state?

    As you can see when you click a filter it will give you error maximum update depth

  6. Answer
    Stefan
    Admin
    Stefan avatar
    3039 posts

    Posted 28 May 2020 Link to this post

    Hello, Furkan,

    Thank you for the additional details.

    This occurs as the columnMenu is set as an inline function and React, does not keep references to inline functions in the render. This is why, when we update the toggle on component did mount, the parent component is updated, and as the reference is not kept we call component did mount again of the columnMenu and we go into an endless loop.

    The same will happen if we have an onOpen event and set the same logic there.

    We have two options in this case:

    1) Set the column menu to a function outside of render, this way updating the toggle state will not re-initialize the column menu:

    https://stackblitz.com/edit/react-rj8b8s?file=app/main.jsx

    2) Pass the current toggle value to the column menu component and only update it to true only if it is still false, to ensure we will not make the same update multiple times. 

    We can even combine both approaches to ensure a more stable solution.

    Regards,
    Stefan
    Progress Telerik

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
Back to Top