Bind MVVM To Telerik TextBox

[Joe]

I've successfully used the Telerik MVVM with stand HTML form field elements, but how do I bind a viewModel property to a Telerik MVC Textbox?  I'm assuming through the .HTMLAttributes method, but I don't know the syntax to use... Where would I put the data-bind?

@(Html.Kendo().TextBox()
    .Name("docketNumber")
    .HtmlAttributes(new { placeholder = "Docket Number", required = "required", validationmessage = "Enter {0}" })
}

[Joe]

While I have your attention, why can I not find any legitimate documentation for the Kendo TextBox?  I realize it's a simple text input field, but it is a valid component of the Telerik MVC controls, and yet I cannot seem to find any documentation nor examples for it.  I tried to add an .Events() to it so I can register a change to the text box, but I'm told 

'TextBoxBuilder<string>' does not contain a definition for 'Events' and no extension method 'Events' accepting a first argument of type 'TextBoxBuilder<string>' could be found (are you missing a using directive or an assembly reference?)

 

 which just really makes no sense at all...

[Joe]

I really hope someone comes along and can help me out on this...So I believe I've figured out the syntax for MVVM binding on the Kendo version of TextBox, except I cannot actually get it to work.  Here is the text box code:

<div id="uploadForm" style="width: 45%">
    @(Html.Label("HRP Docket Number: "))
    @(Html.Kendo().TextBox()
        .Name("docketNumber")
        .HtmlAttributes(new { placeholder = "Docket Number", required = "required", validationmessage = "Enter {0}", data_bind = "value: DocketNumber, events: { change: onChange }" })
    )
    <span class="k-invalid-msg" data-for="clientID"></span>
    <br />

    <div class="k-content">
        <input type="file" id="FileUpload1" style="width: 75%;" />
        <span class="k-invalid-msg" data-for="files"></span>
    </div>
</div>

 

The file upload component is disabled until they enter a Docket number.  Here is the observable declaration and binding statements in the javascript:

var viewModel = kendo.observable({
        DocketNumber: "",
        onChange: function() {
            if (viewModel.get("DocketNumber") !== "") {
                $("#FileUpload1").data("kendoUpload").setOptions({ enabled: true });
            }
        }
    });

    $(document).ready(function() {
        var ALLOWED_EXTENSIONS = [".pdf"];
        kendo.bind($("#uploadForm", viewModel));

        $("#FileUpload1").kendoUpload({
            enabled: false,
            async: {
                saveUrl: "@Url.Action("UploadFile", "Document")"
            },
            upload: function(e) {
                e.data = {
                    docketNumber: viewModel.get("DocketNumber")
                }
            },
            multiple: false,
            localization: {
                "select": "Select file to import..."
            },
            select: function (e) {
                var extension = e.files[0].extension.toLowerCase();
                if (ALLOWED_EXTENSIONS.indexOf(extension) === -1) {
                    alert("Please, select a supported file format");
                    e.preventDefault();
                    return;
                }
            },
            success: function (e) {
            }
        });
    });
});

The text box's change event never fires, so the file upload component never enables.  I really need a solution for this otherwise I'm going to have to scrap everything, and start over with a completely different way to accomplish this, which I do not relish.

[Joe]

Disregard everything here, I've done figured it out...

[Richard]

Joe:

In a community forum it's always good karma to give some small explanation of a self answered question. "I done figured it out" doesn't help those of use who haven't done so.

I know if I posted a question and someone replied 'I know the answer' I would feel that was an incomplete conversation.

[Joe]

"I know if I posted a question and someone replied 'I know the answer' I would feel that was an incomplete conversation."

Except the only person having a discussion in this particular thread it me, to myself.  So no, it is not at all like your example.

As far as the event not firing, it was a misplaced parenthesis.