I am attempting to use the kendo-diagram control in a VueJS application. I have two data sources, one for the actual nodes/shapes, and one for the connections between the nodes.
The documentation is pretty sparse, and the sample that you provide only deals with a Hierarchical data source.
Based purely on a guess, I did the following:
<template>
<v-content>
<kendo-datasource
ref="nodes"
:data="dataSource">
</kendo-datasource>
<kendo-datasource
ref="connections"
:data="connectionsDataSource">
</kendo-datasource>
<kendo-diagram
:data-source-ref="'nodes'"
:connections-data-source-ref="'connections'">
</kendo-diagram>
</v-content>
</template>
<script>
import Vue from "vue";
import "@progress/kendo-ui";
import "@progress/kendo-theme-default/dist/all.css";
import {
DataSource,
DataSourceInstaller
} from "@progress/kendo-datasource-vue-wrapper";
import { Diagram, DiagramInstaller } from "@progress/kendo-diagram-vue-wrapper";
Vue.use(DataSourceInstaller);
Vue.use(DiagramInstaller);
export default {
data: function() {
return {
dataSource: [
{ id: "one", name: "One" },
{ id: "two", name: "Two" },
{ id: "five", name: "Five" }
],
connectionsDataSource: [
{ from: "one", to: "two", label: "plus one" },
{ from: "one", to: "five", label: "plus three" }
]
};
},
components: {
Diagram
}
};
</script>
I get the following error when running this page:
Error: Incorrect DataSource type. If a single dataSource instance is set to the diagram then it should be a HierarchicalDataSource. You should set only the options instead of an instance or a HierarchicalDataSource instance or supply connectionsDataSource as well.
What should I do in order to get both a data source, and connections data source bound to the diagram? Also, where can I find actual documentation for the VueJS implementation?
Thanks,
Stephan
5 Answers, 1 is accepted
The Kendo Diagram Vue component is just a plain wrapper of the Kendo Diagram widget. Therefore, for more documentation on how Diagram works you can refer to this references:
https://demos.telerik.com/kendo-ui/diagram/index
https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/diagram
https://docs.telerik.com/kendo-ui/controls/diagrams-and-maps/diagram/overview
Generally, the DataSource instance cannot be used with the Diagram. You should always use the HierarchicalDataSource. That said, in order to use a Vue component for that, you should use the kendo-hierarchicaldatasource one. You can find out more about it here: https://www.telerik.com/kendo-vue-ui/components/datasource/hierarchicaldatasource/.
Regards,
Ianko
Progress Telerik
Rank 1
Hi Ianko,
Ok, so my problem is this:
1) The kendo documentation lists dataSource as a property on the diagram. In the VueJS implementation, you use data-source-ref... this is undocumented.
2) The kendo documentation also lists connectionsDataSource as a property on the diagram. The same "implied" naming convention does not work on the VueJS implementation, and neither does a direct reference (i.e. connectionsDataSource)
3) I am unable to use a HierarchicalDataSource, as this requires heavy lifting on my side to restructure data that is stored as nodes/connections into nodes->children, and many nodes share connections, meaning my data becomes super large to render, since I'll be duplicating payloads and also very complicated.
It is great that there is complete documentation, and I've used the kendo controls in a few other projects over the years, so I am quite capable of working with the existing documentation to achieve my goals. What I have a problem with is that the VueJS implementation doesn't follow the standard set out by the native jQuery implementation, and there is literally no documentation on the "wrapper" (i.e. hyphenated properties for bindings).
Is this forcing me to do everything in javascript? Are you saying bindings are impossible?
Indeed, the documentation is not complete. And this is why for the next release we have an ongoing task to improve it so to match the available documentation for the Kendo UI widgets.
The data-source-ref prop is documented here: https://www.telerik.com/kendo-vue-ui/components/datasource/.
As for a connections-data-source-ref equivalent, there is no such prop and this is an emission in the Diagram component. I logged this and you can monitor its progress from here: https://github.com/telerik/kendo-ui-core/issues/4312.
However, connections-data-source prop is available and you can bind it to an array accordingly. You can check out this sandbox example here: https://codesandbox.io/s/6zo8ox24jr.
If you are to use the kendo-hierarchicaldatasource component with the :data prop bound to some data, yes, you will need to have the data processed. This is the idea behind the data option of the HierarchicalDataSource widget in the first place. And the same stands for the widget as well, not only for the Vue wrapper.
If you need the data to be processed from a linear structure, you should use the :data-source and :connections-data-source props. Just like documented for the Kendo Diagram widget and shown in the sandbox example sent.
Note that the Vue components are using the Kendo widgets behind the scenes and the props are there only to pass the data to the options to initialize the widget. There are no native Vue components and that approach for include Kendo UI in Vue project comes with the limitation that not everything will be possible by using just components. Some JavaScript code will be always needed in order to achieve exactly what you need.
However, as you mentioned that you have experience with the Kendo UI widget you should be able to accomplish everything you could with the Kendo Vue components by translating the options of the widgets to props by converting the JS camel casing to the Vue kebab casing. You can also check out this article here: https://www.telerik.com/kendo-vue-ui/components/framework/configuration/.
Regards,
Ianko
Progress Telerik
Rank 1
Hi Ianko,
Thanks for the prompt reply. I am happy with it, and having had a brief look at the attached code sandbox, it is exactly what I require. I will revert to this as soon as I have a chance, hopefully in the next 24 hours.
If there is still something I don't understand I will do a follow up post.
Regards,
Stephan
Glad to see that this helped you out.
Regards,
Ianko
Progress Telerik