Skip to content

Commit b6617b6

Browse files
rajendranr-5483rajendranr-5483
authored
Merge pull request SyncfusionExamples#1 from Backiaraj/UG
Prepared Accordion samples
2 parents 9f0d112 + d69de58 commit b6617b6

File tree

89 files changed

+74970
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

89 files changed

+74970
-0
lines changed

‎Accordion/AccordionUGSamples/AccordionUGSamples.csproj‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<Project Sdk="Microsoft.NET.Sdk.Web">
2+
3+
<PropertyGroup>
4+
<TargetFramework>net6.0</TargetFramework>
5+
<Nullable>enable</Nullable>
6+
<ImplicitUsings>enable</ImplicitUsings>
7+
</PropertyGroup>
8+
9+
<ItemGroup>
10+
<PackageReference Include="Syncfusion.EJ2.AspNet.Core" Version="20.1.0.58" />
11+
</ItemGroup>
12+
13+
</Project>

‎Accordion/AccordionUGSamples/AccordionUGSamples.sln‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
2+
Microsoft Visual Studio Solution File, Format Version 12.00
3+
# Visual Studio Version 17
4+
VisualStudioVersion = 17.0.32112.339
5+
MinimumVisualStudioVersion = 10.0.40219.1
6+
Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "AccordionUGSamples", "AccordionUGSamples.csproj", "{7372EB13-5AE2-43BA-91F9-EBA2A98FB9E1}"
7+
EndProject
8+
Global
9+
GlobalSection(SolutionConfigurationPlatforms) = preSolution
10+
Debug|Any CPU = Debug|Any CPU
11+
Release|Any CPU = Release|Any CPU
12+
EndGlobalSection
13+
GlobalSection(ProjectConfigurationPlatforms) = postSolution
14+
{7372EB13-5AE2-43BA-91F9-EBA2A98FB9E1}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
15+
{7372EB13-5AE2-43BA-91F9-EBA2A98FB9E1}.Debug|Any CPU.Build.0 = Debug|Any CPU
16+
{7372EB13-5AE2-43BA-91F9-EBA2A98FB9E1}.Release|Any CPU.ActiveCfg = Release|Any CPU
17+
{7372EB13-5AE2-43BA-91F9-EBA2A98FB9E1}.Release|Any CPU.Build.0 = Release|Any CPU
18+
EndGlobalSection
19+
GlobalSection(SolutionProperties) = preSolution
20+
HideSolutionNode = FALSE
21+
EndGlobalSection
22+
GlobalSection(ExtensibilityGlobals) = postSolution
23+
SolutionGuid = {39299BDC-1CFB-4B6E-BBAE-87B2FFDC1392}
24+
EndGlobalSection
25+
EndGlobal

‎Accordion/AccordionUGSamples/Pages/AccordionwithDatasource.cshtml‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
@page
2+
@model AccordionUGSamples.Pages.AccordionwithDatasourceModel
3+
@{
4+
}
5+
6+
<div id='element'></div>
7+
8+
<script>
9+
var itemsData = [];
10+
var mapping = { header: 'FirstName', content: 'Notes' };
11+
12+
const SERVICE_URI = 'https://services.odata.org/V4/Northwind/Northwind.svc/Employees';
13+
14+
new ej.data.DataManager({ url: SERVICE_URI, adaptor: new ej.data.ODataV4Adaptor })
15+
.executeQuery(new ej.data.Query().range(4, 7)).then(function (e) {
16+
17+
var result = e.result;
18+
19+
for (var i = 0; i < result.length; i++) {
20+
itemsData.push({ header: result[i][mapping.header], content: result[i][mapping.content] });
21+
}
22+
23+
//Initialize Accordion component
24+
var accordion = new ej.navigations.Accordion({
25+
items: itemsData
26+
});
27+
28+
//Render initialized Accordion component
29+
accordion.appendTo('#element');
30+
});
31+
</script>
32+
33+
<style>
34+
.accordion-control-section {
35+
margin: 0 10% 0 10%;
36+
}
37+
38+
@@media screen and (max-width: 768px) {
39+
.accordion-control-section {
40+
margin: 0;
41+
}
42+
}
43+
</style>

‎Accordion/AccordionUGSamples/Pages/AccordionwithDatasource.cshtml.cs‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
using Microsoft.AspNetCore.Mvc;
2+
using Microsoft.AspNetCore.Mvc.RazorPages;
3+
4+
namespace AccordionUGSamples.Pages
5+
{
6+
public class AccordionwithDatasourceModel : PageModel
7+
{
8+
public void OnGet()
9+
{
10+
}
11+
}
12+
}

‎Accordion/AccordionUGSamples/Pages/CreateWizard.cshtml‎

Lines changed: 276 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,276 @@
1+
@page
2+
@model AccordionUGSamples.Pages.CreateWizardModel
3+
@{
4+
}
5+
6+
<div class="accordion-control-section">
7+
<div class="accordion-control-section">
8+
<div class='template_title'> Online Shopping Payment Module</div>
9+
<ejs-accordion id="element" created="created" expanding="expand">
10+
<e-content-template>
11+
<div>
12+
<div>
13+
Sign In
14+
</div>
15+
<div>
16+
<div id="Sign_In_Form" style="padding:10px">
17+
<form id="formId">
18+
<div class="form-group">
19+
<div class="e-float-input">
20+
<input type="text" id="email" name="Email" required="" />
21+
<span class="e-float-line"></span>
22+
<label class="e-float-text" for="email">Email</label>
23+
</div>
24+
<div class="e-float-input">
25+
<input class="e-input" id="password" type="password" name="Password" required="" />
26+
<span class="e-float-line"></span>
27+
<label class="e-float-text" for="password">Password</label>
28+
</div>
29+
</div>
30+
</form>
31+
<div style="text-align: center">
32+
<button class='e-btn' id="Continue_Btn">Continue</button>
33+
<div id="err1">* Please fill all fields</div>
34+
</div>
35+
</div>
36+
</div>
37+
</div>
38+
<div>
39+
<div>
40+
Delivery Address
41+
</div>
42+
<div>
43+
<div id="Address_Fill" style="padding:10px">
44+
<form id="formId_Address">
45+
<div class="form-group">
46+
<div class="e-float-input">
47+
<input type="text" id="name" name="Name" required="" />
48+
<span class="e-float-line"></span>
49+
<label class="e-float-text" for="name">Name</label>
50+
</div>
51+
</div>
52+
<div class="form-group">
53+
<div class="e-float-input">
54+
<input type="text" id="address" name="Address" required="" />
55+
<span class="e-float-line"></span>
56+
<label class="e-float-text" for="address">Address</label>
57+
</div>
58+
</div>
59+
<div class="form-group">
60+
<ejs-numerictextbox id="mobile" placeholder="Mobile" floatLabelType="Auto" format=0 showSpinButton="false"></ejs-numerictextbox>
61+
</div>
62+
</form>
63+
<div style="text-align: center">
64+
<button class='e-btn' id="Continue_BtnAdr">Continue</button>
65+
<div id="err2">* Please fill all fields</div>
66+
</div>
67+
</div>
68+
</div>
69+
</div>
70+
<div>
71+
<div>
72+
Card Details
73+
</div>
74+
<div>
75+
<div id="Card_Fill" style="padding:10px">
76+
<div class="col-xs-6 col-sm-6 col-lg-6 col-md-6">
77+
<div class="form-group">
78+
<ejs-numerictextbox id="cardNo" placeholder="Card No" floatLabelType="Auto" format=0 showSpinButton="false"></ejs-numerictextbox>
79+
</div>
80+
</div>
81+
<div class="col-xs-6 col-sm-6 col-lg-6 col-md-6">
82+
<div class="form-group">
83+
<div class="e-float-input">
84+
<input type="text" id="cardHolder" name="cardHolder" required="" />
85+
<span class="e-float-line"></span>
86+
<label class="e-float-text" for="cardHolder">CardHolder Name</label>
87+
</div>
88+
</div>
89+
</div>
90+
<div class="col-xs-6 col-sm-6 col-lg-6 col-md-6">
91+
<ejs-datepicker id="expiry" width="100%" placeholder="Expiry Date" format="MM/yyyy" readonly="false"></ejs-datepicker>
92+
</div>
93+
<div class="col-xs-6 col-sm-6 col-lg-6 col-md-6">
94+
<div class="form-group">
95+
<ejs-numerictextbox id="CVV" placeholder="CVV" floatLabelType="Auto" format=0 showSpinButton="false"></ejs-numerictextbox>
96+
</div>
97+
</div>
98+
</div>
99+
<div style="text-align: center">
100+
<button class='e-btn' id="Back_Btn">Back</button>
101+
<button class='e-btn' id="Save_Btn">Save</button>
102+
<div id="err3">* Please fill all fields</div>
103+
</div>
104+
</div>
105+
</div>
106+
</e-content-template>
107+
</ejs-accordion>
108+
</div>
109+
<div>
110+
<ejs-dialog id="alertDialog" header="Alert" target="#element" showCloseIcon="true" width="250" isModal="true" created="dlgCreated" content="" visible="false"></ejs-dialog>
111+
</div>
112+
</div>
113+
114+
<style>
115+
.accordion-control-section {
116+
margin: 0 10% 0 10%;
117+
}
118+
119+
@@media screen and (max-width: 768px) {
120+
.accordion-control-section {
121+
margin: 0;
122+
}
123+
}
124+
125+
#err1, #err2, #err3 {
126+
display: none;
127+
color: red;
128+
margin-top: 10px;
129+
font-weight: 500;
130+
}
131+
132+
#err1.show,
133+
#err2.show,
134+
#err3.show {
135+
display: block;
136+
}
137+
138+
.e-dialog {
139+
max-height: 300px !important;
140+
}
141+
142+
.template_title {
143+
text-align: center;
144+
padding: 10px 0;
145+
margin: 20px 0;
146+
text-overflow: ellipsis;
147+
font-weight: bold;
148+
font-size: 16px;
149+
}
150+
</style>
151+
152+
<script>
153+
var success = 'Your payment successfully processed';
154+
var email_alert = 'Enter valid email address';
155+
var mobile_alert = 'Mobile number length should be 10';
156+
var card_alert = 'Card number length should be 16';
157+
var cvv_alert = 'CVV number length should be 3';
158+
var alertDlg;
159+
var acrdnObj;
160+
function dlgCreated() {
161+
alertDlg = document.getElementById("alertDialog").ej2_instances[0];
162+
alertDlg.buttons = [{
163+
buttonModel: { content: "Ok", isPrimary: true },
164+
click: function () {
165+
alertDlg.hide();
166+
if (acrdnObj.expandedIndices[0] === 2 && alertDlg.content === success) {
167+
acrdnObj.enableItem(0, true);
168+
acrdnObj.enableItem(1, false);
169+
acrdnObj.enableItem(2, false);
170+
acrdnObj.expandItem(true, 0);
171+
}
172+
}
173+
}];
174+
alertDlg.dataBind();
175+
alertDlg.hide();
176+
}
177+
function checkMail(mail) {
178+
if (/^\w+([\.-]?\w+)*@@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(mail)) {
179+
return (true);
180+
} else {
181+
alertDlg.content = email_alert;
182+
alertDlg.show();
183+
return (false);
184+
}
185+
}
186+
function checkMobile(mobile) {
187+
if (mobile.match(/^\d{10}$/)) {
188+
return (true);
189+
} else {
190+
alertDlg.content = mobile_alert;
191+
alertDlg.show();
192+
return (false);
193+
}
194+
}
195+
function checkCardNo(cardNo) {
196+
if (cardNo.match(/^\d{16}$/)) {
197+
return (true);
198+
} else {
199+
alertDlg.content = card_alert;
200+
alertDlg.show();
201+
return (false);
202+
}
203+
}
204+
function checkCVV(cvv) {
205+
if (cvv.match(/^\d{3}$/)) {
206+
return (true);
207+
} else {
208+
alertDlg.content = cvv_alert;
209+
alertDlg.show();
210+
return (false);
211+
}
212+
}
213+
function created(e) {
214+
acrdnObj = document.getElementById("element").ej2_instances[0];
215+
acrdnObj.enableItem(1, false);
216+
acrdnObj.enableItem(2, false);
217+
}
218+
function expand(e) {
219+
if (e.name === 'expanding' && (e.index === 0)) {
220+
document.getElementById('Continue_Btn').onclick = (e) => {
221+
var email = document.getElementById('email');
222+
var password = document.getElementById('password');
223+
if (email.value !== '' && password.value !== '') {
224+
if (checkMail(email.value)) {
225+
email.value = password.value = '';
226+
acrdnObj.enableItem(1, true);
227+
acrdnObj.enableItem(0, false);
228+
acrdnObj.expandItem(true, 1);
229+
}
230+
document.getElementById('err1').classList.remove('show');
231+
} else {
232+
document.getElementById('err1').classList.add('show');
233+
}
234+
};
235+
} else if (e.name === 'expanding' && (e.index === 1)) {
236+
document.getElementById('Continue_BtnAdr').onclick = (e) => {
237+
var name = document.getElementById('name');
238+
var address = document.getElementById('address');
239+
var mobile = document.getElementById('mobile');
240+
if ((name.value !== '') && (address.value !== '') && (mobile.value !== '')) {
241+
if (checkMobile(mobile.value)) {
242+
acrdnObj.enableItem(2, true);
243+
acrdnObj.enableItem(1, false);
244+
acrdnObj.expandItem(true, 2);
245+
}
246+
document.getElementById('err2').classList.remove('show');
247+
} else {
248+
document.getElementById('err2').classList.add('show');
249+
}
250+
};
251+
} else if (e.name === 'expanding' && (e.index === 2)) {
252+
document.getElementById('Back_Btn').onclick = (e) => {
253+
acrdnObj.enableItem(1, true);
254+
acrdnObj.enableItem(2, false);
255+
acrdnObj.expandItem(true, 1);
256+
};
257+
document.getElementById('Save_Btn').onclick = (e) => {
258+
var cardHolder = document.getElementById('cardHolder');
259+
var expiry = document.getElementById('expiry');
260+
var cardNo = document.getElementById('cardNo');
261+
var cvv = document.getElementById('CVV');
262+
if ((cardNo.value !== '') && (cardHolder.value !== '') && (expiry.value !== '') && (cvv.value !== '')) {
263+
if (checkCardNo(cardNo.value)) {
264+
if (checkCVV(cvv.value)) {
265+
alertDlg.content = success;
266+
alertDlg.show();
267+
}
268+
}
269+
document.getElementById('err3').classList.remove('show');
270+
} else {
271+
document.getElementById('err3').classList.add('show');
272+
}
273+
};
274+
}
275+
}
276+
</script>

‎Accordion/AccordionUGSamples/Pages/CreateWizard.cshtml.cs‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
using Microsoft.AspNetCore.Mvc;
2+
using Microsoft.AspNetCore.Mvc.RazorPages;
3+
4+
namespace AccordionUGSamples.Pages
5+
{
6+
public class CreateWizardModel : PageModel
7+
{
8+
public void OnGet()
9+
{
10+
}
11+
}
12+
}

0 commit comments

Comments
 (0)