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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Radio buttons not work in template editor vue (not save)

Thread ID:

Created:

Updated:

Platform:

Replies:

144065 Apr 16,2019 04:53 PM UTC Apr 23,2019 11:15 AM UTC Vue 3
loading
Tags: Schedule
Marco
Asked On April 16, 2019 04:53 PM UTC

<template>
<table class="custom-event-editor" width="50%" cellpadding="5">
<tbody>
<tr>
<td class="e-textlabel">Asunto</td>
<td colspan="6">
<input id="Subject" class="e-field e-input" type="text" name="Subject" style="width: 100%" />
</td>
<td></td>
<td></td>
</tr>


<tr>

<td class="e-textlabel">Fecha inicio</td>
<td colspan="6">
<input id="StartTime" class="e-field" type="text" name="StartTime" />
</td>

<td class="e-textlabel">Fecha fin</td>
<td colspan="6">
<input id="EndTime" class="e-field" type="text" name="EndTime" />
</td>
</tr>


<tr>
<td class="e-textlabel">Consultorios</td>
<td colspan="6">
<input type="text" id="ConferenceId" name="ConferenceId" class="e-field" style="width: 100%" />
</td>
<td></td>
<td></td>
</tr>

<tr>
<td class="e-textlabel">Descripción</td>
<td colspan="6">
<textarea id="Description" class="e-field e-input" name="Description" rows="3" cols="50" style="width: 100%; height: 60px !important; resize: vertical"></textarea>
</td>
<td></td>
<td></td>
</tr>

<tr>
<td class="e-textlabel"></td>
<td colspan="6">
<input type="radio" class="e-field" name="pro_check2" @change="mostrarCamposExtra('registrado')" :checked="existePropietario == 'registrado'" > Propietario registrado
</td>
<td class="e-textlabel"></td>
<td colspan="6">
<input type="radio" class="e-field" name="pro_check2" @change="mostrarCamposExtra('nuevo')" :checked="existePropietario == 'nuevo'"> Propietario nuevo
</td>
</tr>


<tr>
<td class="e-textlabel">Propietario</td>
<td colspan="6">
<input type="text" class="e-field" id="pro_nombre" name="pro_nombre">
</td>
<td></td>
<td></td>
</tr>

<tr>
<td class="e-textlabel">Email</td>
<td colspan="6">
<input type="text" class="e-field" name="pro_email">
</td>
<td class="e-textlabel">Teléfono</td>
<td colspan="6">
<input type="text" class="e-field" name="pro_telefono">
</td>
</tr>
<tr>
<td class="e-textlabel">Paciente</td>
<td colspan="6">
<input type="text" class="e-field" name="pro_paciente">
</td>
<td class="e-textlabel">Sexo</td>
<td colspan="6">
<input type="text" class="e-field" name="pro_sexo">
</td>
</tr>

<tr>
<td class="e-textlabel">Edad</td>
<td colspan="6">
<input type="text" class="e-field" name="pro_edad">
</td>
<td class="e-textlabel">Fecha de nacimiento</td>
<td colspan="6">
<input type="text" class="e-field" name="pro_nacimiento">
</td>
</tr>



</tbody>
</table>
</template>

<script lang='js'>
import Vue from "vue";
import { DateTimePickerPlugin } from '@syncfusion/ej2-vue-calendars';
import { DropDownListPlugin } from '@syncfusion/ej2-vue-dropdowns';
import { MultiSelectPlugin } from '@syncfusion/ej2-vue-dropdowns';
Vue.use(DropDownListPlugin);
Vue.use(DateTimePickerPlugin);
Vue.use(MultiSelectPlugin);
export default {
data() {
return {
val2: '',
existePropietario: ''
}
},
methods: {
mostrarCamposExtra(respuesta){
console.log("RESPUESTA")
console.log(respuesta)
if(respuesta === 'nuevo'){
this.existePropietario = 'nuevo'
console.log('nuevo propietario')
}else{
this.existePropietario = 'registrado'
console.log('ya existe el propietario')
}

}
},
}

</script>

<style lang="">
#Schedule_dialog_wrapper{
width: 578px !important;
}
</style>

Nevitha Ravi [Syncfusion]
Replied On April 22, 2019 03:24 PM UTC

Hi Marco, 

We have checked your code in which value is not defined and assigned properly which is the cause for the issue. Kindly refer the following sample for the same. 

            <tr> 
                <td colspan="6"> 
                <ejs-radiobutton ref="radioObj" label=" Propietario registrado" class="e-field" name="pro_check2" checked='true' value="Pro"></ejs-radiobutton></li> 
                </td> 
                <td class="e-textlabel"></td> 
                <td colspan="6"> 
                   <ejs-radiobutton ref="radioObj" label="Propietario nuevo" class="e-field" name="pro_check2" value="nuevo"></ejs-radiobutton></li> 
                </td> 
            </tr> 

onActionBegin: function(args) { 
      let scheduleObj = this.$refs.ScheduleObj; 
      if (args.requestType === "eventCreate" || args.requestType === "eventChange") { 
        let data; 
        if (args.requestType === "eventCreate") { 
          data = args.data[0]; 
        } else if (args.requestType === "eventChange") { 
          data = args.data; 
        } 
        let radioObj = document.querySelectorAll('.e-radio'); 
        radioObj.forEach((radio) => { 
          let myRadioObj = radio.ej2_instances[0]; 
            if (myRadioObj.checked) { 
              data.pro_check2 = myRadioObj.value; 
            } 
        }); 
    } 

Regards, 
Nevitha 
45

Marco
Replied On April 23, 2019 03:18 AM UTC

ERROR IN CONSOLE..... 

I download your example....
i make, npm install
and npm run dev.... 

vue.esm.js?efeb:628 [Vue warn]: Error in mounted hook: "TypeError: str.replace is not a function"

found in

--->
        at src/App.vue
         
warn @ vue.esm.js?efeb:628


Nevitha Ravi [Syncfusion]
Replied On April 23, 2019 11:15 AM UTC

Hi Marco, 

Sorry for the inconvenience caused. 

Can you please check the following sample link which works properly and revert us back if you need any further assistance. 

Regards, 
Nevitha. 


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