asked on

Dropdownlist not working properly

Thank you in advance for any feedback.

I have the following code in this url: http://dojo.telerik.com/@rbordavol/UTIfu

$('#kdlResponsibleOffice').data('kendoDropDownList') this part of the code returns Unable to get property 'value' of undefined or null reference , so I can not do a bind or a initial assigment:

 $('#kdlResponsibleOffice').data('kendoDropDownList') .value("Off2");

Open in new window

===============================================================================================================

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

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

  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script src="http://kendo.cdn.telerik.com/2015.3.1111/js/angular.min.js"></script>
  <script src="http://kendo.cdn.telerik.com/2015.3.1111/js/jszip.min.js"></script>
  <script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.all.min.js"></script></head>
<body>
  <input id="kdlResponsibleOffice" data-role="dropdownlist" data-text-field="FullName" data-value-field="ShortName" data-bind="source:offices, value: responsibleOffice" style="width:550px" />
  
<script>   
    
    //constructor, members initialization
var    sysInfoId = 13001; 
var InventorySystemInfoEditor = function (sysInfoId) {
    this.sysInfoId = sysInfoId;
    this.sysInfo = null;
    this.lnk = null;
};
    
    
InventorySystemInfoEditor.prototype = function(){
  	  var sie = this;
      load = function() {
        debugger;
        loadDDL.call(sie);
      }
      ,
      loadDDL = function() {
          $(function() {
            var offices = [
              { FullName: "Office 1", ShortName: "Off1" },
              { FullName: "Office 2", ShortName: "Off2" },
              { FullName: "Office 3", ShortName: "Off3" }
            ];

            var vmOffices = kendo.observable({offices: offices, responsibleOffice: offices[2]});

            kendo.bind($('#kdlResponsibleOffice'), vmOffices);

            $('#kdlResponsibleOffice').data('kendoDropDownList').bind('change', function () {
              alert(1);
            });

            $('#kdlResponsibleOffice').data('kendoDropDownList').value("Off2");
          });
      }
      ;
      
      return {
        load: load
      };
    }();
    
    inventorySysInfoEditor.load();
  </script>
</body>
</html>

Open in new window

Chris Ashcraft

I think the problem is that you need to put this line...

inventorySysInfoEditor.load();

...inside a $.ready() method to make sure it executes after the DOM is fully loaded.

https://api.jquery.com/ready/

$.ready(function() {
  inventorySysInfoEditor.load();
}

Open in new window

window.onload would also work.

rborda

ASKER

micropc1: that did not solve the problem, thanks for the suggestion.

Julian Hansen

I don't understand what you are trying to do

This line

$('#kdlResponsibleOffice').data('kendoDropDownList')

Open in new window

implies you have an element ID=kdlResponsibleOffice that has a custom data element data-kendoDropDownList.

In your code #kdlResponsibleOffice is an input element but it has no custom data element kendoDropDownList.

Then assuming the custom data does exist then this does not make sense

$('#kdlResponsibleOffice').data('kendoDropDownList').value("Off2");

Open in new window

what is .value() doing - did you mean .val("Off2") - and binding it to the the data() call which returns a string is not going to work.

Maybe explain what you are trying to do and we can take it from there.

ASKER CERTIFIED SOLUTION

rborda

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

rborda

ASKER

This resolved the issue to the problem I was looking for.