Window with input text is read-only

[K]

Hello,

I am getting into web development for the first time and definitely have alot to catch-up on.  I have been able to use some of the KendoUI controls which are pretty cool, so kudos there! 

I am now in the process of using a kendoWindow control, which is just a window to allow a user to enter a value in a textbox and to click a button in the same window and it has functionality to check if the pswd is correct, etc.  The window does open but somehow the textbox is always read-only.  Can somebody please let me know if I maybe missing an attribute or something else?  I am not sure if it is because I am using the html in the code to render the window with the label, textbox, and button vs using the .content when initializing the kendoWindow.

Any help would be greatly appreciated!

HTML:

<div id="window">

            Please provide an override password.

            <br />

            <br />

            <div>

                <label id="lblPswd">Password: </label>

                <input id="txtOverride" type="text"/>

            </div>

            <br />

            <div style="text-align:center;">

                    <input id="Text1" type="text"/>

                    <button class="k-button" id="btnOverride" style="width: 125px" >OK</button>

            </div>

        </div>

jQuery:

//Window to allow users to add a password to override and approve.

var overrideWindow = $("#window").kendoWindow({                

                 height: "200px",

                 title: "Override Workflow Access",

                 visible: false,

                 modal: true,

                 width: "300px"

             }).data("kendoWindow");

 

//Another button on the page so that when users click it, the window opens and checks if they have access to approve. There is other functionality which I have removed for simplicity. Just need to make the input textbox editable. Btn in window works.

$("#btnApprove").click(function () {

var window = $("#window").data("kendoWindow");

                 window.center();

                 window.open();

})

I did see an example online and was testing it out. It opens another aspx page in my project which has the same functionality as what I am trying to do, but the textbox is editable. I am not sure if it is because the content: attribute is used.  I would prefer to use the method above instead of going to another page.

// create the window ON THE FLIES

         $("<div></div>").kendoWindow({

             visible: true,

             title: "Creates Window Out Of Thin Air",

             modal: true,

             width: "400px",

             content: { url: "TestKendoWindow.aspx"

             },

             deactivate: function () {

                 this.element.closest(".k-widget").remove();

             }

         }).data("kendoWindow")

         // set the content of the window

        //.content("<h1>Acheivement UNLOCKED!</h1>")                   

        .center()

        .open();

Thanks in advance,
K

[K]

I totally forgot that I had added functionality so that the textboxes were read-only depending on the form status.  So I was using this below:

$(':input').attr('readonly', 'readonly');

Therefore, my textbox on the window open was read-only.  DOH!!!!  It's odd how grabbing some lunch and heading back to your desk can clear you head :)

Thanks!