This is a migrated thread and some comments may be shown as answers.

Combobox OnSelect in jQuery ready function

3 Answers 263 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Atlas
Top achievements
Rank 1
Atlas asked on 04 Sep 2013, 05:27 PM
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.



3 Answers, 1 is accepted

Sort by
0
Kiril Nikolov
Telerik team
answered on 05 Sep 2013, 10:42 AM
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!
0
Atlas
Top achievements
Rank 1
answered on 06 Sep 2013, 04:10 PM
That doesn't appear to work. The OnSelect event needs to be bound to the combobox. How would using window.OnSelect accomplish that?
0
Kiril Nikolov
Telerik team
answered on 10 Sep 2013, 08:33 AM
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!
Tags
ComboBox
Asked by
Atlas
Top achievements
Rank 1
Answers by
Kiril Nikolov
Telerik team
Atlas
Top achievements
Rank 1
Share this question
or