How do I get the keyup event of a ComboBox?

3 posts, 1 answers
  1. Brent
    Brent avatar
    4 posts
    Member since:
    Oct 2012

    Posted 22 Mar 2013 Link to this post

    The ComboBox is done in Razor:
    @Html.Kendo().ComboBox()
      .Name(id)
      .Filter("contains")
      .DataTextField("ChoiceValue").DataValueField("ChoiceValue")
      .BindTo(inputs.Choices)
      .HtmlAttributes(new { @class = classText, data_validation = inputs.Validation })
    If I use inline javascript, it works:
    var input = $('#id').data('kendoComboBox').input;
    input.bind({ keyup: function () { doStuff('test'); } });
    But if I reference a separate file, I get this error: Uncaught TypeError: Cannot read property 'input' of undefined

    How can I get this to work using a separate .js file?


  2. Answer
    Jayesh Goyani
    Jayesh Goyani avatar
    2732 posts
    Member since:
    May 2010

    Posted 23 Mar 2013 Link to this post

    Hello,

    May be you are trying to access input element before it was created that's why you get null/undefined in varibale 'input'. (because first js file loaded and executed before creating the input element).

    Page life cycle in Kendo ui Grid
    1.  Load the JS File  (because we generally add JS file reference in HEAD Tag)
    2.  Create Input element
    3.  Convert this input into kendo ui combobox.

    Thanks,
    Jayesh Goyani
  3. Kendo UI is VS 2017 Ready
  4. Brent
    Brent avatar
    4 posts
    Member since:
    Oct 2012

    Posted 25 Mar 2013 Link to this post

    Yes, I see that you are correct. Thanks for the info on the page life cycle.

    I was able to get the keyup event like this:

    $('input.k-input.comboBox').each(function () {
        $(this).keyup(function () { });
    });

    It was confusing to me that the same inline js code used in HTML cannot be used when imported from a separate .js file.

Back to Top