Kendo DropDownList triggering Select Event Programatically

I struggled trying to select an item in a Kendo dropdownlist programmatically and firing the corresponding select event.


Here's the solution.  Specifying .trigger("select") would fire the event, but the select function parameter "e" had no values.  To reconcile pass in the selected list item, using this syntax:

 dl.trigger("select", { item: $("li.k-state-selected", $("#dlTableNames-list")) }  

 @(Html.Kendo().DropDownListFor(model => model)  
        .DataSource(source =>  
        {  
          source.Read(read =>  
          {  
            read.Action("GetTableList", "Lists");  
          });  
        })  
        .DataTextField("DisplayName")  
        .DataValueField("id")  
             //.DataValueField("ANAPatternDesc")  
             //.SelectedIndex(0)  
        .Name("dlTableNames")  
        .OptionLabel("- Please select -")  
        .Events(e => {  
          e.Select("TableSelected");  
          // e.Change("TableSelected");  
          // e.Cascade("TableSelected");  
        })  
        .ValuePrimitive(true)  
        .HtmlAttributes(new { style = "width:400px" })  
        )  
 <script>  
 var dl = $("#dlTableNames").data("kendoDropDownList");  
 //Select an item by Value:  
 dl.value(5);  
           dl.trigger("select", { item: $("li.k-state-selected", $("#dlTableNames-list")) }  
 function TableSelected(e) {  
     var item = e.item;  
     //The display text (not value) of the selected drop down list item:  
     var text = item.text();  
     //Reference the kendo dropdownlist:  
     var dl = $("#dlTableNames").data("kendoDropDownList").dataSource;  
     var dataItem = this.dataItem(e.item.index());  
     //The id of the selected drop down list item:  
     var dataId = this.dataItem(e.item).id;  
     //Name used for parent div , also used for subdiv (prefixed with "subdiv"xxx):  
     var divid = text.replace(/\s+/g, '').replace(/\//g, '').replace(/\(/g, '').replace(/\)/g, '') + '_' + dataId;  
     //Create the parent level div, to which checkboxes will be added to via function => createCheckBox:  
     createSubElementDiv(divid, text);  
     //Remove the selected item from the dropdownlist, so the user won't have duplicates:  
     dl.remove(dl.at(e.item.index()));  
     //Via ajax, Get sublist of items and render to div as checkboxes:  
     var link = "@Url.Action("GetSubLists", "Lists", new { id = -1 })";  
     //Replace -1 with the id of the selected item, input parameter of the controller action method:  
     link = link.replace("-1", dataId);  
     $.ajax({  
       cache: false,  
       type: "GET",  
       dataType: "json",  
       contentType: "application/json; carset=utf-8",  
       url: link,  
       data: { "id": text },  
       success: function (data) {  
         name = data;  
         // For each line in json object, create a checkbox:  
         $.each(data, function (key, value) {  
           createCheckBox('subdiv' + divid, value.id, value.Text);  
         });  
       },  
       error: function (xhr, ajaxOptions, thrownError) {  
         customMsg('An error occurred loading data. The Administrator has been notified.' + thrownError);  
       }  
     });  
     //Collapse the drop down list:  
     $("#dlTableNames").data("kendoDropDownList").close();  
     return false;  
   }  
 </script>