This is a migrated thread and some comments may be shown as answers.

How to set default component options by myself

5 Answers 48 Views
This is a migrated thread and some comments may be shown as answers.
Wei
Top achievements
Rank 1
Wei asked on 16 Sep 2018, 11:37 AM

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? 

5 Answers, 1 is accepted

Sort by
0
Neli
Telerik team
answered on 18 Sep 2018, 02:33 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Rich
Top achievements
Rank 1
answered on 19 Sep 2018, 09:21 PM

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.

0
Neli
Telerik team
answered on 20 Sep 2018, 01:58 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Rich
Top achievements
Rank 1
answered on 20 Sep 2018, 02:34 PM

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

    },

    data() {

        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.

 

0
Joana
Telerik team
answered on 24 Sep 2018, 10:19 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Asked by
Wei
Top achievements
Rank 1
Answers by
Neli
Telerik team
Rich
Top achievements
Rank 1
Joana
Telerik team
Share this question
or