How to set default component options by myself

[Wei]

I want to change the default options for some components, e.g all the window component in my app should to 400px width and 400px max-height. The way I use now is to create a component wrapper the kendo-window, but I must repeatedly define lots of kendo props in my component.

I also try to use Vue mixin like this

Vue.use(WindowInstaller,{
    title:'untitled'
})

But failed.

Any methods to be simpler? 

[Neli]

Hello Wei,

For setting width and max-height to the Window I would suggest you to use CSS. Below is an example where the 'k-window' class is used for setting width:

<style>
  .k-window{
    width: 500px !important;
    max-height: 400px;
  }
</style>

I am afraid that properties like 'title' could not be configured for multiple widgets at once. For example it is not possible to set the title of two Window widgets at the same time. 

Regards,
Neli
Progress Telerik

[Rich]

Make your own window component with the kendo ui window component in it. Add custom props to your component for everything in the component you want to set when you use it. But inside your component set all the kendo props to the defaults you want.

Then in your app's components always use your own custom component instead of the kendo ui window component directly.

[Neli]

Hello Rich,

Below is an article that will be helpful for creating custom widget:
- https://docs.telerik.com/kendo-ui/intro/widget-basics/create-custom-kendo-widget

Regards,
Neli
Progress Telerik

[Rich]

Hi Neli,

I'm not suggesting making a kendo ui jquery widget. I am suggesting making a simple Vue component that wraps the Window component. Something like this:

<template>
    <kendo-window :width="width"
                  :height="height"
                  :title="title"
                  :visible="visible"
                  style="display:none">
        {{content}}
    </kendo-window>
</template>
<script>
export default {
    props: {
       height,
       width: { type: String, default: "300px" }
       title,
       content
        return {
     }
   }
}
<script>

 

Assuming the person is using single file components.. Either way the idea is the same. The wrapped component can then be used in another component like:

<template>

<my-kendo-window :height="'400'" :content="'Yeah my content!!!'"></my-kendo-window>

<template>
<script>
import MyKendoWindow from "@/path_to/MyKendoWindow .vue";

export default {
    components: {
        "my-kendo-window": MyKendoWindow
    }, ......... etc.

 

[Joana]

Hi Rich,

I apologize for the inaccurate information in the last reply.

Props could be assigned dynamically with v-bind. So, the respective code for the Kendo Window for Vue will looks as follows:

https://stackblitz.com/edit/7j3dik

<div id="vueapp" class="vue-app">
    <kendo-window v-bind="props">
    </kendo-window>
</div>

new Vue({
    el: '#vueapp',
    data: {
        props: {
            width: "500px",
            height: "400px",
            title: "Test prop"
        }
    }
})

If you'd like to set global default options per component, I would suggest creating a custom Vue component with mixin Kendo Window and configure the default prop values. You could refer to the following forum thread which discusses similar scenario for the Grid widget - the implementation is analogical to the Window:

https://www.telerik.com/forums/setting-global-component-options

I hope this is what you have been looking for. Let me know if you have further questions.

Regards,
Joana
Progress Telerik