Combobox OnSelect in jQuery ready function

4 posts, 0 answers
  1. Atlas
    Atlas avatar
    97 posts
    Member since:
    Jun 2009

    Posted 04 Sep 2013 Link to this post

    I have a kendo combobox with an OnSelect method defined on the page, but would like to move it to the jQuery ready function. How do I do that?
    Right now, the code looks like this:
    <%= Html.Kendo().ComboBox()
        .Name("contactsAc")
        .Filter("startswith")
        .Placeholder("Select a Contact")
        .MinLength(3)
        .HtmlAttributes(new { style = "width:250px;" })
        .DataSource(source => source.Read(read => read.Action("ContactSelect", "TrainingSchedule")
        .Data("onAdditionalData"))
        .ServerFiltering(true))
        .DataTextField("Name")
        .DataValueField("Id")
        .AutoBind(false)
        .Events(e => e.Select("onSelect"))
    %>
    <script language="javascript" type="text/javascript">
        function onSelect(e) {
            var dataItem = this.dataItem(e.item.index());
            var contact = new Object();
            contact.ContactId = dataItem.Id;
            contact.ContactName = dataItem.Name;
            vm.assignedContacts.push(contact);
            kendo.bind($(document.body), vm);
        }
    </script>
    I want to place it within :
    $(function () {
        $("#startDate").kendoDatePicker();
        $("#endDate").kendoDatePicker();
     
        $("#detailForm").kendoWindow({
            height: "450px",
            title: "Training Schedule Detail",
            visible: false,
            width: "600px"
        }).data("detailForm");
     
        $grid.data = $("#grid").data("kendoGrid");
     
        $("#detailForm").submit(function () {
            if (validateData()) {
                formSubmit();
            }
            return false;
        });
    The ready function is in an external JavaScript file that gets loaded at the bottom of the page.



  2. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2566 posts

    Posted 05 Sep 2013 Link to this post

    Hi Atlas,

    What you can do in your case is to attach the onSelect() function to the global window scope. This way you will be able to access the function from outside of your closure using window.onSelect. So it should be something like this:

    $(function () {
      window.onSelect = function onSelect(e) {
      var dataItem = this.dataItem(e.item.index());
      var contact = new Object();
      contact.ContactId = dataItem.Id;
      contact.ContactName = dataItem.Name;
      vm.assignedContacts.push(contact);
      kendo.bind($(document.body), vm);
      }
    });

    Using the above declaration you expose the onSelect() function to the global scope.

    I would also like to remind you that this question is not directly related to Kendo UI and its components, so please do not open support requests for questions not included in the standard support services.

    Regards,
    Kiril Nikolov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Atlas
    Atlas avatar
    97 posts
    Member since:
    Jun 2009

    Posted 06 Sep 2013 Link to this post

    That doesn't appear to work. The OnSelect event needs to be bound to the combobox. How would using window.OnSelect accomplish that?
  5. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2566 posts

    Posted 10 Sep 2013 Link to this post

    Hi Atlas,

    Functions that are declared in a closure (the ready function) are not accessible outside of its scope. So attaching them to the window object of the browser, will make them available outside of the closure. I though that this is what you are looking for?

    As I said in my previous post - this question is not related directly to Kendo UI, so please take a look at other resources like StackOverflow for example. Thank you in advance for your understanding.
     
    Regards,
    Kiril Nikolov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready