I have a number of Drop Downs on a page, each representing a separate asset with their own identifier. The drop down options for each of these lists should be populated using an AJAX call to a service page that I have written which expects to be sent the identifier in the request. Here is a stripped down version of the code:
<script language="JavaScript">$(document).ready(function() { $(".id_select").kendoDropDownList({ dataTextField: "name", dataValueField: "my_id", dataSource: { transport: { read: { url: "service_page.cfm", data: { identifier: ???? } } } }});}); </script><html><input name="id_ABC" id="id_ABC" data-identifier="ABC" class="id_select"></input><input name="id_DEF" id="id_DEF" data-identifier="DEF" class="id_select"></input><input name="id_GHI" id="id_GHI" data-identifier="GHI" class="id_select"></input><input name="id_JKL" id="id_JKL" data-identifier="JKL" class="id_select"></input> </html>
So what I want is when each input is instantiated as a KendoDropDownList for the DataSource's Read to be executed for each of the inputs with class "id_select" and sent the value of that input's particular "data-identifier" value (where I have put the ????'s in the example above). However I don't see any way to reference the data for the particular input from within the inline DataSource.
I have tried making the transport.read a function, using a parameterMap and anything else I could think of to throw at this. I'm beginning to wonder whether this is possible at all.
Thank you,
Matt
4 Answers, 1 is accepted
You can use the each method to achieve this requirement:
http://api.jquery.com/jquery.each/
It will look something similar to this: $(".id_select").each(function(i){var identifier=$(this).attr("data-identifier");}) and then you will be able to pass this identifier variable within the read->data object.
Give it a try and let me know if it works for you. If you prefer, I can send you a full dojo sample as well.
Regards,
Eyup
Progress Telerik
Rank 1
Rank 1
I changed the kendoDropDownList instantiation from using a class selector to an id selector and put it INSIDE of the .each() loop, appending the identifier onto the selector as shown below and it seems to be working. Was this what you meant, or is there a different approach?
$(document).ready(function() { $(".id_select").each(function(i){ var identifier=$(this).attr("data-identifier"); $("#id_select_" + identifier).kendoDropDownList({ dataTextField: "name", dataValueField: "my_id", dataSource: { transport: { read: { url: "service_page.cfm", data: { identifier: identifier } } } } }); });});
Yes, you are correct. Sorry for not being specific enough.
Here is a slightly modified version of the approach:
https://dojo.telerik.com/UGAsOmOQ/8
Regards,
Eyup
Progress Telerik