We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Pass data/props to component used in dialog template

Thread ID:

Created:

Updated:

Platform:

Replies:

148803 Nov 5,2019 10:54 AM UTC Nov 14,2019 06:58 AM UTC Vue 5
loading
Tags: Dialog
Miles Benson
Asked On November 5, 2019 10:54 AM UTC

Hi,

I see this example 


Is there a way to pass props or data into the template components used for the content/header/footer etc?

Thanks
Miles


Sureshkumar P [Syncfusion]
Replied On November 6, 2019 06:53 AM UTC

Hi Miles, 
 
Greetings from Syncfusion support.

 
Yes, you can pass props to template components used in dialog content/header/footer. 
 
Please find the steps to configure the sample and pass data to dialog’s content template alone 
 
 
1.     Create content template with props 
<template> 
    <div> 
        <span>{{contentProp}}</span> 
    </div> 
</template> 
 
<script> 
    export default { 
        name: "ContentTemplate", 
        props: ["contentProp"] 
    }; 
</script> 
 
 
2.     import the content template vue file in App.vue file and configure propsData with same name is used in content template file. 
 
<script> 
    import ContentTemplate from "./components/Content"; 
    export default { 
        data: function () { 
            return { 
                contentTemplate: function () { 
                    return () => { 
                        return { 
                            template: { 
                                extends: ContentTemplate, 
                                propsData: { contentProp: "Dialog Content" } 
                            } 
                        }; 
                    }; 
                } 
            }; 
        } 
    }; 
</script> 
 
 
3.     Then bind content template into dialog content property with props variable as arguments. 
 
contentTemplate(contentProp) 
 
<template> 
    <ejs-dialog :content="contentTemplate(contentProp)"></ejs-dialog> 
</template> 
 
 
Note:  Same way we explained in above, you can pass props to the header, footer template 
 
  
 
We have prepared a sample to meet your requirement, please view it in the below link 
 
 
Regards, 
Sureshkumar P 


Miles Benson
Replied On November 8, 2019 06:49 PM UTC

Hi,

Thank you for that.  Very helpful.

Are you able to see this sandbox?


In there I have added a click handler to the footer button and set it to emit a "close-event".

Then in the App.vue I added @close-event="onCloseEvent" to the ejs-dialog declaration, and defined the onCloseEvent method.

However, I can see using the Vue tools that the event is emitted, but it's not caught by the App.vue handler.

Is there something I'm missing/doing wrong here?

Adding: I see that the footer component of the dialog has no $parent - presumably this is what is stopping any event being passed upwards?

Thanks
Miles


Sureshkumar P [Syncfusion]
Replied On November 11, 2019 01:08 PM UTC

Hi Miles,

 
@close-event binding works with component here we used function template, so it won’t work. 
 
So, we suggest you, use Event Bus approach to the emit event , which used to catch by any of component in the application without parent child limitation.  
 

we modified a sample based on your requirement. please refer the sample here: https://codesandbox.io/s/vue-template-gze5m  
 
Regards, 
Sureshkumar P 


Miles Benson
Replied On November 13, 2019 01:11 PM UTC

Hi,

Thanks for that.  Yes, I'm familiar with the event bus concept - that seems like a good way forward.

Thanks
Miles


Gurunathan A [Syncfusion]
Replied On November 14, 2019 06:58 AM UTC

Hi Miles, 

Thanks for the update.  

Regards, 
Gurunathan  


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon