Setting a Fade on Window as well as outer click close

[Danny]

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>}

 

[Danny]

meant to add </Fade> at end

Thanks

[Stefan]

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