how open 3 window in one page by id or ref

2 posts, 0 answers
  1. saeed
    saeed avatar
    1 posts
    Member since:
    Mar 2018

    Posted 06 Apr 2018 Link to this post

    hi..

    I use react-kendo for ui .

    How to open 2 or 3 windows in a file and point them to them using the ID and Ref ??

    ```

    class LayoutsContainer extends React.Component {

    openwin1() {
    $("[data-role='window']").each(function (index) { $(this).data('kendoWindow').open()});
    }

    openwin2() {
    $("[data-role='window']").each(function (index) { $(this).data('kendoWindow').open()});
    }

      render() {

    return (

    <div>

    <Window id="win1">

    hi

    </Window>

    <Window id="win2">
    Hello
    </Window>

    <span id="undo1" className="k-button" onClick={this.openwin1}>Click here to open the Window1</span>

    <span id="undo2" className="k-button" onClick={this.openwin2}>Click here to open the Window2</span>

    </div>

    ); } }

    ```

    this code not working...

    please help me

  2. Stefan
    Admin
    Stefan avatar
    2913 posts

    Posted 09 Apr 2018 Link to this post

    Hello, Saeed,

    When the Kendo UI for React wrappers are used we recommend placing same type widgets in different containers in order to easily select them as the ID attribute is not directly passed to the new component.

    <div>
    <div id="win1">
    <Window >
     
    hi
     
    </Window>
    </div>
    <div id="win2">
    <Window id="win2">
    Hello
    </Window>
    </div>
    <span id="undo1" className="k-button" onClick={this.openwin1}>Click here to open the Window1</span>
     
    <span id="undo2" className="k-button" onClick={this.openwin2}>Click here to open the Window2</span>
     
    </div>


    openwin1() {
    $(#win1 "[data-role='window']").data('kendoWindow').open();
    }
     
    openwin2() {
    $(#win2 "[data-role='window']").data('kendoWindow').open();
    }

    I hope this is helpful.

    Regards,
    Stefan
    Progress Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top