CODEWITHSUNDEEP
javascriptjquerykendo-ui
Sadaf Khan
Sadaf Khan

Reputation: 13

Create kendo dropdown dynamically in one method and assign datasource in another method

I have to create kendo dropdownlist dynamically based on number of id's I received.I have created one method in which i am looping on id and creating dropdown with that id. It is not like that all dropdown will created at the same time dropdown are created on change of parent dropdown. Datasource of this dropdown are same...so how can i assign datasource to dropdown currently i am getting datasource of undefined error. Also I am assigning datasource in another methid not same. Any help is appreciable.

Upvotes: 0

Views: 1043

Answers (1)

DontVoteMeDown
DontVoteMeDown

Reputation: 21465

You can use setDataSource() to set a dataSource to an initialized Kendo widget.

$('#myDropDown').kendoDropDownList({
    // options
}); 

let dataSource = new kendo.data.DataSource({ 
    // options
});

$('#myDropDown').data('kendoDropDownList').setDataSource(dataSource);

Demo:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Untitled</title>

  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.1.330/styles/kendo.common.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.1.330/styles/kendo.rtl.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.1.330/styles/kendo.default.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.1.330/styles/kendo.mobile.all.min.css">

  <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2021.1.330/js/angular.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2021.1.330/js/jszip.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2021.1.330/js/kendo.all.min.js"></script></head>
<body>
  <script>
    for (let i = 0; i < 10; i++) {
      $('<select class="dropdown"></select>')
        .appendTo($('body'))
        .kendoDropDownList();
    }
    
    let dataSource = new kendo.data.DataSource({
      data: ['Opt 1']
    });
    
    $('select.dropdown').each((i, el) => {
      $(el).data('kendoDropDownList').setDataSource(dataSource);
    });
  </script>
</body>
</html>

Dojo

Upvotes: 1

Related Questions