Kendo UI Color picker crashes on close when data-bind attribute added

Question

I'm trying to use Kendo UI Color Picker with Kendo binding and run into problem.

Kendo UI Color picker crashes when you click apply button on popup when data-bind attribute added.

When I click on apply button it throws an error:

Uncaught TypeError: Cannot read property 'attr' of null

You can see example here:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <link href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.common.min.css" rel="stylesheet">
</head>
<body>
  
  <div id="variables">
    <div class="variables-grid">
      <div data-template="variable-template" data-bind="source: variables">
      </div>
    </div>
  </div>
  
  <script id="variable-template" type="text/x-kendo-template">
    # var templateId = getTemplateId(Type); #
    <div class="variable">
        <div data-template="#=templateId#" data-bind="source: this"></div>
    </div>
  </script>
  
  <script id="color-variable-template" type="text/x-kendo-template">
    <input class="k-input" data-bind="value: Value" id="color-picker-#=Id#" name="color-picker-#=Id#" type="color" /><script>
 jQuery(function(){jQuery("\#color-picker-#=Id#").kendoColorPicker({});});
    <\/script>
  </script>
    
</script>


</body>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js"></script>
  
  <script>
    
    function getTemplateId(typeId) {
      switch(typeId) {
        case 'color':
          return "color-variable-template";
      }
    }
    
    var viewModel = kendo.observable({
      variables: [
        {"Id": "abc-color", "Type": "color", "Name": "Color", "Value": "#ffffff"}
      ]
    });


    kendo.bind($("#variables"), viewModel); 
  </script>
</html>

When I remove data-bind attribute it works as should.

score 0 · Answer 1 · answered Jun 30 '17 at 20:57

It seems to me like variables isn't created correctly.

HERE is a Telerik Dojo link with the correction made.

All I did was change

<div id="variables">
    <div class="variables-grid">
      <div data-template="variable-template" data-bind="source: variables">
      </div>
    </div>
</div>

to

<div id="variables">
  <div class="variables-grid">
    <div>
      <input data-role="colorpicker"
             data-bind="visibile: isVisible,
                        enabled: isEnabled,
                        value: selectedColor,
                        events: { change: onChange}">
    </div>
  </div>
</div>

Let me know if that doesn't solve your problem.

HERE is a link to the demo I used to make the correction.

Thank you for your response, but that solution doesn't solve my problem because it changes logic of rendering templates. I need to use different templates for different types of variables. — Yahor Ramanenka, Jul 03 '17 at 14:05

Kendo UI Color picker crashes on close when data-bind attribute added

1 Answers1