Open multiple Kendo Window React wrappers - reactjs

Question

I'm using the Kendo Window React wrapper component in my react app, if you look at the docs, the way to open the window is:
$("[data-role='window']").each(function (index) {
$(this).data('kendoWindow').open()
});
But this will open every window on the page. How can I open a single window when multiple windows controls are used?

Answer 1

You're quite right, it will open every window on the page. When using Kendo React wrappers, a recommended approach for dealing with same type widgets is to place them in different containers to help you locate them:
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
I've modified the basic sample which I assume you were working from to demonstrate this:
class LayoutsContainer extends React.Component {
open() {
$("#win1 [data-role='window']").data('kendoWindow').open();
}
onOpen(){
console.log('Open event was triggered!');
}
onClose(){
console.log('Close event was triggered!');
}
onDragStart(){
console.log('DragStart event was triggered!');
}
onDragEnd(){
console.log('DragEnd event was triggered!');
}
render() {
return (
<div id="win1">
<Window open={this.onOpen} close={this.onClose} dragstart={this.onDragStart} dragend={this.onDragEnd} title={"About Alvar Aalto"} width={"640px"}>
<p>Alvar Aalto is one of the greatest names in modern architecture and design. Glassblowers at the iittala factory still meticulously handcraft the legendary vases that are variations on one theme, fluid organic shapes that let the end user decide the use. Interpretations of the shape in new colors and materials add to the growing Alvar Aalto Collection that remains true to his original design.</p>
<p>Born Hugo Alvar Henrik Aalto (February 3, 1898 - May 11, 1976) in Kuortane, Finland, was noted for his humanistic approach to modernism. He studied architecture at the Helsinki University of Technology from 1916 to 1921. In 1924 he married architect Aino Marsio.</p>
<p>Alvar Aalto was one of the first and most influential architects of the Scandinavian modern movement, and a member of the Congres Internationaux d'Architecture Moderne. Major architectural works include the Finlandia Hall in Helsinki, Finland, and the campus of Helsinki University of Technology.</p>
</Window>
<span id="undo" className="k-button" onClick={this.open}>Click here to open the Window</span>
</div>
);
}
}
ReactDOM.render(
<LayoutsContainer />,
document.querySelector('my-app')
);