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. Image for the cookie policy date
close icon

Pass data/props to component used in dialog template

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


5 Replies

SP Sureshkumar P Syncfusion Team 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 



MB Miles Benson 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



SP Sureshkumar P Syncfusion Team 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 



MB Miles Benson 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



GA Gurunathan A Syncfusion Team November 14, 2019 06:58 AM UTC

Hi Miles, 

Thanks for the update.  

Regards, 
Gurunathan  


Loader.
Live Chat Icon For mobile
Up arrow icon