How to get kendo window content from input text

Question

I have a question about kendo window. I have a input like this

<div id="windowForAssign"></div>
<div>
    <p>Your name</p>
    <input type="text" id="name" >
    <button type="button" id="btnSend">Send</button>
</div>

And when I click on button, a window will pop-up. Here, I use Kendo window.

$('#btnSend').click(createAndShowPopup);
   var kendoWindowAssign = $("#windowForAssign");
   var title = "Sample title";
   var url = "";

   function createAndShowPopup(){
     kendoWindowAssign.kendoWindow({
       width: "650px",
       modal: true,
       height: '120px',
       iframe: true,
       resizable: false,
       title: title,
       content: null,
       visible: false
     });

     var popup = $("#windowForAssign").data('kendoWindow');
     popup.open();
     popup.center();
   }

But I don't know how to get data from input for content. Thank you for your help!

Answer 1

You can use the content method for this. From Telerik docs:

Gets or sets the content of a Window.

Just pass in the input's value by using popup.content($("#name").val());

Dojo example here

<div id="windowForAssign"></div>
<div>
  <p>Your name</p>
  <input type="text" id="name" />
  <button type="button" id="btnSend">Send</button>
</div>

<script>
  $(document).ready(function () {
    $('#btnSend').click(createAndShowPopup);
    var kendoWindowAssign = $("#windowForAssign");
    var title = "Sample title";
    var url = "";

    function createAndShowPopup(){
      kendoWindowAssign.kendoWindow({
        width: "650px",
        modal: true,
        height: '120px',
        iframe: true,
        resizable: false,
        title: title,
        content: null,
        visible: false
      });

      var popup = kendoWindowAssign.data('kendoWindow');
      popup.content($("#name").val());
      popup.open();
      popup.center();
    };
  });
</script>

Answer 2

To get the input value, you can use jQuery as follows:

$("#name").val();

Learn more about jQuery's .val() method here

This will get you the desired value from the input field that you require to set the content for your window.

Now, set your content property that you are specifying in your initialization parameters for your kendo window. Set the content property to following:

content: { template: kendo.template($("#name").val()) }

instead of: content: null that you have set.

Learn more about kendo.Window's content method here

This should get you the input value for your kendo window on button click event.

Here I am using kendo.template method that kendo has to set the content for the kendo window and you can read more about that here