Setting a Fade on Window as well as outer click close

3 posts, 0 answers
  1. Danny
    Danny avatar
    5 posts
    Member since:
    Mar 2020

    Posted 30 Mar 2020 Link to this post

    Hello,

    I am trying to implement a Fade component on to my Window Dialog component as well as make it so when the user clicks outside of the Window it closes it. Kind of like other UI Modals.

          <span className="k-icon k-i-zoom" onClick={toggleWindow}></span>

          <Fade>
          {visible &&
            <Window
              modal={true}
              onClose={toggleWindow}
              initialHeight={420} 
              initialWidth={700}
              initialLeft={300}
              initialTop={130}
            >
              {props.flag === 'bond' && 
              <Input
                name={'Search Bond'}
                label={'Search Bond'}
                onChange={searchChanged}
                className="bond-input"
              />}
              <Grid
                className="bond-grid"
                reorderable
                sortable
                data={bonds}
                rowRender={rowRender}
              >
                <GridColumn field="cusip" title="Cusip" width="98px" headerClassName="bond-header" />
                <GridColumn field="issuer_short_name" title="Name" width="200px" headerClassName="bond-header" />
                <GridColumn field="maturity" title="Maturity" width="100px" headerClassName="bond-header" />
                <GridColumn field="coupon" title="Coupon" width="80px" text="align-right" headerClassName="bond-header" />
                <GridColumn field="bbg_ticker" title="BBG Ticker" width="150px" headerClassName="bond-header" />
              </Grid>
            </Window>}

     

  2. Danny
    Danny avatar
    5 posts
    Member since:
    Mar 2020

    Posted 30 Mar 2020 in reply to Danny Link to this post

    meant to add </Fade> at end

    Thanks
  3. Stefan
    Admin
    Stefan avatar
    3008 posts

    Posted 31 Mar 2020 Link to this post

    Hello, Danny,

    There are specific when applying an animation to the Window component.

    Please check the following GitHub issue that has more information on this and a runnable example:

    https://github.com/telerik/kendo-react/issues/326

    I hope this is helpful.

    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