Trying to select an item in kendogrid kendoDropDownList using Excel VBA - excel

Question

I'm trying to select an item on a dropdown list on an internal company web page. I am able to set text entry items and get the dropdownlist to open, but I' having a hard time figuring out how to make a selection
In other area I'm able to make a selection using the ID and td/tr tags, but this routine doesn't have any tr/td tags with entry names.
Here'a couple of things I've tried so far:
These two items perform the same function and work fine for opening the first dropdown
ie.Document.getElementById("FromDistrict").Click
ie.Document.parentWindow.execScript "$('#FromDistrict').kendoDropDownList('open');"
I've tried several variations of these:
ie.Document.parentWindow.execScript "$('#FromDistrict').data('kendoGrid').dataItem($('transport').data('kendoDropDownList').select('KILGORE'));"
ie.Document.parentWindow.execScript "$('#FromDistrict').data('kendoGrid').data('kendoDropDownList').select('KILGORE'));"
ie.Document.parentWindow.execScript "$('#FromDistrict').data('kendoGrid').data('kendoDropDownList').select('eq:0'));"
ie.Document.parentWindow.execScript "$('#FromDistrict').data('kendoDropDownList').select('KILGORE'));"
ie.Document.parentWindow.execScript "$('#FromDistrict').select('KILGORE'));"
Viewing the source code for this particular segment is:
</div>
<form action="/TransferLoad/Add" method="post"><input name="__RequestVerificationToken" _
type="hidden" value="IP80d5XM-Qi0XQ1-IgGKGmhLVNGdtDAyM-r7lJ6yQCI1RIdJJph0uPnz-DzEHx12_booO4xwvcWg6EUWPiLnHv7ww6PD-aqfhiVxPcy-VYm6mnBRHsba3H7Hembliybo0" /> _
<div class="k-block k-info-colored">
<div class="k-header">
<span>Add Transfer Load Details</span>
</div>
<div class="k-content">
<div class="infocontainer">
<table>
<tr>
<td class="columnLabel">
<label for="From_District:">From District:</label>
</td>
<td class="columnData">
<input id="FromDistrict" name="FromDistrict" style="width: 200px" type="text" />
<script>
jQuery(function(){jQuery("#FromDistrict").kendoDropDownList({"dataSource" _
:{"transport":{"read": {"url":"/DistrictProfiles/GetUserDistricts","data": _
function() { return kendo.ui.DropDownList.requestData(jQuery("#FromDistrict")); }}, _
"prefix":""}, "serverFiltering":true,"filter":[],"error":OnError, _
"schema": {"errors":"Errors"}}, "dataTextField":"DistrictName","autoBind":true, _
"dataValueField":"DistrictCode", "optionLabel":"Select District..."});});
</script>
</td>
<td class="columnLabel"> 'Next dropdown section starts here
<label for="To_District:">To District:</label>
</td>
When the dropdown opens, it has 2 items to choose from, but nowhere in the code can I find those 2 items listed, so I'm assuming they're pulled from this line: return kendo.ui.DropDownList.requestData(jQuery("#FromDistrict")) , but I'm not sure. Can someone point out what I'm missing here ?
I did not post the "view element" because of the difficulty in copying it. All selections dynamically change other selection options.

Answer 1

IN the browser DOM explorer (which shows the markup 'computed/sanitized' by the rendering engine) you should see that
<input id="FromDistrict" name="FromDistrict" style="width: 200px" type="text" />
has been changed to include the datalist attribute. eg.
<input id="FromDistrict" name="FromDistrict" style="width: 200px" type="text" datalist="DistrictName" />
..... and further down the DOM, you should see the datalist element that has been injected into the DOM by the Kendo code.
<datalist id="DistrictName">
<option value="Kent">Kent</option>
<option value="Surry">Surry</option>
</datalist>
You should be able to automate the field, by just assigning a valid comma-separated list to the FromDistrict.
eg. FromDistrict.value='Kent, Surry';

Answer 2

I was able to accomplish what I wanted in a crude sort of way by using the following, but I'm working on a better more efficient way.
'Choose the FROM district
ie.Document.parentWindow.execScript "$('#FromDistrict').kendoDropDownList('open');"
Dim FrDist, li
Set FrDist = ie.Document.getElementById("FromDistrict-list").getElementsByTagName("li")
Dim fd
fd = 0
For Each li In FrDist
'MsgBox ("li.innertext is - " & li.innerText & " fd value is: " & fd)
If li.innerText Like "*KILGORE*" Then
FrDist(fd).Click
Else
'Do Nothing
End If
fd = fd + 1
'Application.Wait (Now + TimeValue("0:00:02"))
Next
Application.Wait (Now + TimeValue("0:00:02"))
'Choose the TO district
ie.Document.parentWindow.execScript "$('#ToDistrict').kendoDropDownList('open');"
Dim ToDist
Set ToDist = ie.Document.getElementById("ToDistrict-list").getElementsByTagName("li")
Dim tod
tod = 0
For Each li In ToDist
'MsgBox ("li.innertext is - " & li.innerText & " tod value is: " & tod)
If li.innerText Like "*KILGORE*" Then
ToDist(tod).Click
Else
'Do Nothing
End If
tod = tod + 1
Next