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

Accessing DropDownList data from inline DataSource's transport read

4 Answers 216 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
Matthew
Top achievements
Rank 1
Matthew asked on 06 Nov 2018, 07:53 PM

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

Sort by
0
Eyup
Telerik team
answered on 07 Nov 2018, 05:25 PM
Hello Matt,

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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Matthew
Top achievements
Rank 1
answered on 07 Nov 2018, 05:56 PM
Thank you for yoru response, Eyup.  I am confused by where your block of code would go in my example, though.  Are you able to provide the Dojo sample?
0
Matthew
Top achievements
Rank 1
answered on 08 Nov 2018, 06:22 PM

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
                    }
                }
            }
        }
    });
 });
});

 

0
Eyup
Telerik team
answered on 09 Nov 2018, 07:20 AM
Hi Matthew,

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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
DropDownList
Asked by
Matthew
Top achievements
Rank 1
Answers by
Eyup
Telerik team
Matthew
Top achievements
Rank 1
Share this question
or