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.
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
to
Let me know if that doesn't solve your problem.
HERE is a link to the demo I used to make the correction.