Bind MVVM To Telerik TextBox

6 posts, 0 answers
  1. Joe
    Joe avatar
    173 posts
    Member since:
    May 2012

    Posted 24 Jan Link to this post

    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}" })
    }
  2. Joe
    Joe avatar
    173 posts
    Member since:
    May 2012

    Posted 24 Jan Link to this post

    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...

  3. Joe
    Joe avatar
    173 posts
    Member since:
    May 2012

    Posted 25 Jan Link to this post

    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.

  4. Joe
    Joe avatar
    173 posts
    Member since:
    May 2012

    Posted 25 Jan Link to this post

    Disregard everything here, I've done figured it out...
  5. RichardAD
    RichardAD avatar
    116 posts
    Member since:
    Feb 2012

    Posted 29 Jan in reply to Joe Link to this post

    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.

  6. Joe
    Joe avatar
    173 posts
    Member since:
    May 2012

    Posted 29 Jan in reply to RichardAD Link to this post

    "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.

Back to Top