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

I want to add accordion in my Application

Thread ID:

Created:

Updated:

Platform:

Replies:

140943 Nov 15,2018 10:02 AM UTC Nov 21,2018 09:56 AM UTC Angular - EJ 2 3
loading
Tags: Accordion
Muthukumar
Asked On November 15, 2018 10:02 AM UTC

Hi Team,

        I am Developing Web Application using Angular4 with typescript.I have tried ej accordion in my application and its not working for our application.
        Please help me to implement accordion in our application.
        Herewith I attach the Html code for your reference.

            <form #SafetyIncident="ngForm" ng-submit="addIncident(SafetyIncident)">
                 <ej-accordion>
                    <div class="row mfg-top panel panel-default">
                        <div class="panel-heading">Incident Details</div>
                        <div class="panel-body">
                            <ng-container *ngIf="showIncidentNumber">
                                <div class="row">
                                    <div class="col-lg-12 mfg-top div-marleft">
                                        <div class="row">
                                            <div class="col-lg-3 col-md-3">
                                                <label class="label_size">Incident Number</label>
                                            </div>
                                            <div class="col-lg-4">
                                                <label class="label_size">{{safetyInfo.incidentNumber}}</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </ng-container>

                            <div class="row mrgn_btm">
                                <div class="col-lg-6 col-md-6 mfg-top">
                                    <div class="row">
                                        <div class="col-lg-3 col-md-3">
                                            <label class="label_size">Incident Type </label><span class="validation"> *</span>
                                        </div>

                                        <div class="col-lg-4 col-md-4">
                                            <div class='' style="cursor:pointer">
                                                <input type="text" [(ngModel)]='safetyInfo.incidentTypeID' name="incidenttype" id="ddpincidenttype" #nameIncidentType="ngModel" ej-dropdownlist [dataSource]="safetytypeValues" [fields]="safetytypefieldsvalues" watermarkText="Select a Incident Type"
                                                       required autocomplete="off" width="320px" (ngModelChange)="onIncidentTypeChange($event)">
                                                <span *ngIf="nameIncidentType?.touched && !nameIncidentType.valid" class="validationmessage" style="color:red">
                                                    Incident Type is Required!
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
 <div class="col-lg-6 mfg-top  div-marleft">
                                    <div class="row">
                                        <div class="col-lg-4 col-md-4">
                                            <label class="label_size">Lost Workday Case<span class="validation"> *</span></label>
                                        </div>
                                        <div class="col-lg-2 col-md-2 radio-top">
                                            <div class="radio radio-info radio-inline">
                                                <input type="radio" id="LostRestricted1" [disabled]="safetyInfo.Workdaycasedisable" (click)="ClickWorkdaycase('Yes')" value="Yes" name="LostRestricted" [(ngModel)]="safetyInfo.workDayCase" (checked)="safetyInfo.workDayCase">
                                                <label for="LostRestricted1" class="label-radio" style="padding-left:0px !important;">Yes</label>
                                            </div>
                                        </div>

                                        <div class="col-lg-2 col-md-2 radio-top">
                                            <div class="radio radio-info radio-inline" style="margin-left:-3px;">
                                                <input type="radio" id="LostRestricted2" value="No" [disabled]="safetyInfo.Workdaycasedisable" (click)="ClickWorkdaycase('No')" name="LostRestricted1" [(ngModel)]="safetyInfo.workDayCase" (checked)="safetyInfo.workDayCase">
                                                <label for="LostRestricted2" class="label-radio" style="padding-left:0px !important;">No</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
Kindly check it and get back to us with a quick solution/

Regards,
Muthu

Prince Oliver [Syncfusion]
Replied On November 16, 2018 07:28 AM UTC

Hi Muthukumar, 

Thank you for contacting Syncfusion support. 

We have checked your shared code snippet, it seems that you have passed ngModel to the template reference in the input element. So, the compilation issue has occurred in your end. Refer to the below code. 

<div class="col-lg-4 col-md-4"> 
    <div class='' style="cursor:pointer"> 
        <input type="text" [(ngModel)]='safetyInfo.incidentTypeID' name="incidenttype" id="ddpincidenttype" #nameIncidentType="ngModel" ej-dropdownlist [dataSource]="safetytypeValues" [fields]="safetytypefieldsvalues" watermarkText="Select a Incident Type" 
                required autocomplete="off" width="320px" (ngModelChange)="onIncidentTypeChange($event)"> 
        <span *ngIf="nameIncidentType?.touched && !nameIncidentType.valid" class="validationmessage" style="color:red"> 
            Incident Type is Required! 
        </span> 
    </div> 
</div> 

We have attached the modified sample for your reference please find the sample at the following location: http://www.syncfusion.com/downloads/support/forum/140943/ze/accordion2145759864 

Regards, 
Prince 


Muthukumar
Replied On November 21, 2018 06:34 AM UTC

Hai Team,

        I have so many problems in syncfusion components.Shall we have a call today.Please provide your flexible time to discuss our issues.For the past few days we don't get any responses from your side.Please support us soon.



Regards,
Muthu

Prince Oliver [Syncfusion]
Replied On November 21, 2018 09:56 AM UTC

Hi Muthukumar,  

Thank you for your update.  

We have created a new incident under your direct trac for your requirement. For more clarification on your request, Kindly follow on that incident. 


Regards,  
Prince 


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.

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

;