Skip to content

Commit d1c542d

Browse files
Nevitha-RaviNevitha-Ravi
committed
Schedule, Accordion, Tab, Toolbar samples committed
1 parent ddf494f commit d1c542d

File tree

10 files changed

+143
-208
lines changed

10 files changed

+143
-208
lines changed

‎ej2-blazor-samples/Pages/Navigations/Accordion/DefaultFunctionalities.razor‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@
3838
}
3939
</style>
4040

41-
@functions{
41+
@code{
4242

4343

4444
}

‎ej2-blazor-samples/Pages/Navigations/Accordion/Icons.razor‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -204,7 +204,7 @@
204204
}
205205
</style>
206206

207-
@functions{
207+
@code{
208208

209209
}
210210

‎ej2-blazor-samples/Pages/Navigations/Tab/DefaultFunctionalities.razor‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -27,13 +27,13 @@
2727

2828
<div class="col-lg-12 control-section">
2929
<div class="e-sample-resize-container">
30-
@*<EjsTab id="defaultTab" Items="@TabItems">
30+
@*<EjsTab ID="defaultTab" Items="@TabItems">
3131
</EjsTab>*@
3232
<EjsTab ID="defaultTab">
3333
<TabItems>
34-
<TabItem Header="@header1" Content="@content1"></TabItem>
35-
<TabItem Header="@header2" Content="@content2"></TabItem>
36-
<TabItem Header="@header3" Content="@content3"></TabItem>
34+
<TabItem Header="@Header1" Content="@Content1"></TabItem>
35+
<TabItem Header="@Header2" Content="@Content2"></TabItem>
36+
<TabItem Header="@Header3" Content="@Content3"></TabItem>
3737
</TabItems>
3838
</EjsTab>
3939
</div>
@@ -75,25 +75,25 @@
7575
}
7676
</style>
7777

78-
@functions{
78+
@code{
7979

80-
public object header1 = new { text = "Twitter", iconCss = "e-twitter" };
81-
public object header2 = new { text = "Facebook", iconCss = "e-facebook" };
82-
public object header3 = new { text = "Whatsapp", iconCss = "e-whatsapp" };
80+
public object Header1 = new { text = "Twitter", iconCss = "e-twitter" };
81+
public object Header2 = new { text = "Facebook", iconCss = "e-facebook" };
82+
public object Header3 = new { text = "Whatsapp", iconCss = "e-whatsapp" };
8383

84-
public string content1 = "witter is an online social networking service that enables users to send and read short 140-character" +
84+
public string Content1 = "witter is an online social networking service that enables users to send and read short 140-character" +
8585
"messages called tweets.Registered users can read and post tweets, but those who are unregistered can only read" +
8686
"them.Users access Twitter through the website interface, SMS or mobile device app Twitter Inc. is based in San" +
8787
"Francisco and has more than 25 offices around the world.Twitter was created in March 2006 by Jack Dorsey," +
8888
"Evan Williams, Biz Stone, and Noah Glass and launched in July 2006. The service rapidly gained worldwide popularity," +
8989
"with more than 100 million users posting 340 million tweets a day in 2012.The service also handled 1.6 billion" +
9090
"search queries per day.";
91-
public string content2 = "Facebook is an online social networking service headquartered in Menlo Park, California. Its website was" +
91+
public string Content2 = "Facebook is an online social networking service headquartered in Menlo Park, California. Its website was" +
9292
"launched on February 4, 2004, by Mark Zuckerberg with his Harvard College roommates and fellow students Eduardo" +
9393
"Saverin, Andrew McCollum, Dustin Moskovitz and Chris Hughes.The founders had initially limited the websites" +
9494
"membership to Harvard students, but later expanded it to colleges in the Boston area, the Ivy League, and Stanford" +
9595
"University.It gradually added support for students at various other universities and later to high - school students.";
96-
public string content3 = "WhatsApp Messenger is a proprietary cross-platform instant messaging client for smartphones that operates" +
96+
public string Content3 = "WhatsApp Messenger is a proprietary cross-platform instant messaging client for smartphones that operates" +
9797
"under a subscription business model.It uses the Internet to send text messages, images, video, user location and" +
9898
"audio media messages to other users using standard cellular mobile numbers. As of February 2016, WhatsApp had a user" +
9999
"base of up to one billion,[10] making it the most globally popular messaging application.WhatsApp Inc., based in" +

‎ej2-blazor-samples/Pages/Navigations/Toolbar/DefaultFunctionalities.razor‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@
4444

4545
<div class="col-lg-12 control-section">
4646
<div class="e-sample-resize-container">
47-
@*<EjsToolbar id="defaultToolbar" Items="@ToolbarItems">
47+
@*<EjsToolbar ID="defaultToolbar" Items="@ToolbarItems">
4848
</EjsToolbar>*@
4949

5050
<EjsToolbar ID="defaultToolbar">
@@ -227,7 +227,7 @@
227227
}
228228
</style>
229229

230-
@functions{
230+
@code{
231231

232232
}
233233

‎ej2-blazor-samples/Pages/Navigations/Toolbar/Popup.razor‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -57,27 +57,27 @@
5757
<div class="col-lg-12 control-section">
5858
<div class="e-sample-resize-container">
5959

60-
<EjsToolbar id="popup" OverflowMode="@mode">
60+
<EjsToolbar ID="popup" OverflowMode="@Mode">
6161
<ToolBarItems>
6262
<ToolBarItem PrefixIcon="e-cut-icon tb-icons" TooltipText="Cut" Text="Cut"></ToolBarItem>
6363
<ToolBarItem PrefixIcon="e-copy-icon tb-icons" TooltipText="Copy" Text="Copy"></ToolBarItem>
6464
<ToolBarItem PrefixIcon="e-paste-icon tb-icons" TooltipText="Paste" Text="Paste"></ToolBarItem>
65-
<ToolBarItem type="@type"></ToolBarItem>
65+
<ToolBarItem Type="@Type"></ToolBarItem>
6666
<ToolBarItem PrefixIcon="e-bold-icon tb-icons" TooltipText="Bold" Text="Bold"></ToolBarItem>
6767
<ToolBarItem PrefixIcon="e-underline-icon tb-icons" TooltipText="Underline" Text="Underline"></ToolBarItem>
6868
<ToolBarItem PrefixIcon="e-italic-icon tb-icons" TooltipText="Italic" Text="Italic"></ToolBarItem>
69-
<ToolBarItem type="@type"></ToolBarItem>
69+
<ToolBarItem Type="@Type"></ToolBarItem>
7070
<ToolBarItem PrefixIcon="e-bullets-icon tb-icons" TooltipText="Bullets" Text="Bullets"></ToolBarItem>
7171
<ToolBarItem PrefixIcon="e-numbering-icon tb-icons" TooltipText="Numbering" Text="Numbering"></ToolBarItem>
72-
<ToolBarItem type="@type"></ToolBarItem>
72+
<ToolBarItem Type="@Type"></ToolBarItem>
7373
<ToolBarItem PrefixIcon="e-undo-icon tb-icons" TooltipText="Undo" Text="Undo"></ToolBarItem>
7474
<ToolBarItem PrefixIcon="e-redo-icon tb-icons" TooltipText="Redo" Text="Redo"></ToolBarItem>
75-
<ToolBarItem type="@type"></ToolBarItem>
75+
<ToolBarItem Type="@Type"></ToolBarItem>
7676
<ToolBarItem PrefixIcon="e-alignleft-icon tb-icons" TooltipText="Align-Left" Text="Left"></ToolBarItem>
7777
<ToolBarItem PrefixIcon="e-alignright-icon tb-icons" TooltipText="Align-Right" Text="Right"></ToolBarItem>
7878
<ToolBarItem PrefixIcon="e-aligncenter-icon tb-icons" TooltipText="Align-Center" Text="Center"></ToolBarItem>
7979
<ToolBarItem PrefixIcon="e-alignjustify-icon tb-icons" TooltipText="Align-Justify" Text="Justify"></ToolBarItem>
80-
<ToolBarItem type="@type"></ToolBarItem>
80+
<ToolBarItem Type="@Type"></ToolBarItem>
8181
<ToolBarItem PrefixIcon="e-radar-icon tb-icons" TooltipText="Radar Chart" Text="Radar"></ToolBarItem>
8282
<ToolBarItem PrefixIcon="e-line-icon tb-icons" TooltipText="Line Chart" Text="Line"></ToolBarItem>
8383
<ToolBarItem PrefixIcon="e-doughnut-icon tb-icons" TooltipText="Doughnut Chart" Text="Doughnut"></ToolBarItem>
@@ -309,10 +309,10 @@
309309
}
310310
</style>
311311

312-
@functions{
312+
@code{
313313

314-
public OverflowMode mode { get; set; } = OverflowMode.Popup;
314+
public OverflowMode Mode { get; set; } = OverflowMode.Popup;
315315

316-
public ItemType type { get; set; } = ItemType.Separator;
316+
public ItemType Type { get; set; } = ItemType.Separator;
317317

318318
}

‎ej2-blazor-samples/Pages/Schedule/Schedule/Agenda.razor‎

Lines changed: 6 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -38,21 +38,15 @@
3838

3939
<div class="col-lg-12 control-section">
4040
<div class="schedule-wrapper">
41-
<EjsSchedule id="schedule" width="100%" height="650px" selectedDate="new DateTime(2019, 1, 10)" EventSettings="@ScheduleData">
42-
<ScheduleViews>
43-
<ScheduleView option="@agenda" allowVirtualScrolling="false"></ScheduleView>
44-
</ScheduleViews>
41+
<EjsSchedule ID="schedule" Width="100%" Height="650px" SelectedDate="new DateTime(2019, 1, 10)">
42+
<ScheduleViews>
43+
<ScheduleView Option="View.Agenda" AllowVirtualScrolling="false"></ScheduleView>
44+
</ScheduleViews>
45+
<ScheduleEventSettings DataSource="@Data.GetScheduleData()"></ScheduleEventSettings>
4546
</EjsSchedule>
4647
</div>
4748
</div>
4849

4950
@functions{
50-
static ScheduleData data = new ScheduleData();
51-
private object viewList { get; set; } = new string[] { "Agenda" };
52-
[Parameter]
53-
private object ScheduleData { get; set; } = new
54-
{
55-
dataSource = data.GetScheduleData()
56-
};
57-
public View agenda = View.Agenda;
51+
static ScheduleData Data = new ScheduleData();
5852
}

‎ej2-blazor-samples/Pages/Schedule/Schedule/Default.razor‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -89,16 +89,12 @@
8989

9090
<div class="col-lg-12 control-section">
9191
<div class="schedule-wrapper">
92-
<EjsSchedule id="schedule" width="100%" height="650px" selectedDate="new DateTime(2019, 1, 10)" EventSettings="@ScheduleData">
92+
<EjsSchedule ID="schedule" Width="100%" Height="650px" SelectedDate="new DateTime(2019, 1, 10)">
93+
<ScheduleEventSettings DataSource="@Data.GetScheduleData()"></ScheduleEventSettings>
9394
</EjsSchedule>
9495
</div>
9596
</div>
9697

9798
@functions{
98-
static ScheduleData data = new ScheduleData();
99-
[Parameter]
100-
private object ScheduleData { get; set; } = new
101-
{
102-
dataSource = data.GetScheduleData()
103-
};
99+
static ScheduleData Data = new ScheduleData();
104100
}

‎ej2-blazor-samples/Pages/Schedule/Schedule/Group.razor‎

Lines changed: 67 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,20 @@
4747
<div class="schedule-demo-heading">
4848
Flight timings between Barcelona and Los Angeles
4949
</div>
50-
<EjsSchedule id="schedule" width="100%" height="650px" selectedDate="new DateTime(2018, 3, 4)" Group="@groupData" Resources="@resourceData" EventSettings="@eventSettingsFields">
50+
<EjsSchedule ID="schedule" Width="100%" Height="650px" SelectedDate="new DateTime(2018, 3, 4)">
51+
<ScheduleGroup Resources="@GroupData"></ScheduleGroup>
52+
<ScheduleResources>
53+
<ScheduleResource DataSource="@ResourceData" Field="AirlineId" Title="Airline Name" Name="Airlines" TextField="AirlineName" IdField="AirlineId" ColorField="AirlineColor" AllowMultiple="true"></ScheduleResource>
54+
</ScheduleResources>
55+
<ScheduleEventSettings DataSource="@GenerateEvents()">
56+
<ScheduleField>
57+
<FieldSubject Title="Travel Summary" Name="Subject"></FieldSubject>
58+
<FieldLocation Title="Place" Name="Location"></FieldLocation>
59+
<FieldDescription Title="Comments" Name="Description"></FieldDescription>
60+
<FieldStartTime Title="Departure Time" Name="StartTime"></FieldStartTime>
61+
<FieldEndTime Title="Arrival Time" Name="EndTime"></FieldEndTime>
62+
</ScheduleField>
63+
</ScheduleEventSettings>
5164
</EjsSchedule>
5265
</div>
5366
</div>
@@ -72,84 +85,58 @@
7285
}
7386
</style>
7487

75-
@functions{
76-
EjsSchedule scheduleObj;
77-
78-
public class AppointmentData
79-
{
80-
public int Id { get; set; }
81-
public string Subject { get; set; }
82-
public DateTime StartTime { get; set; }
83-
public DateTime EndTime { get; set; }
84-
public int AirlineId { get; set; }
85-
}
86-
87-
private static List<object> generateEvents()
88-
{
89-
var subjectCollection = new List<string> { "Barcelona to Los Angeles", "Los Angeles to Barcelona" };
90-
var collections = new List<object> { };
91-
var dataCollections = new List<int> { 1, 2, 3 };
92-
var id = 1;
93-
var no = 0;
94-
for (var i = 0; i < dataCollections.Count; i++)
95-
{
96-
var data = dataCollections[i];
97-
var startDate = new DateTime(2018, 3, 1);
98-
var lastDate = new DateTime(2018, 4, 1);
99-
for (var date = startDate; date.Ticks < lastDate.Ticks; date = date.AddHours(2))
100-
{
101-
var strDate = date;
102-
var endDate = strDate.AddHours(2);
103-
collections.Add(new AppointmentData
104-
{
105-
Id = id,
106-
Subject = subjectCollection[id % 2],
107-
StartTime = strDate,
108-
EndTime = endDate,
109-
AirlineId = data
110-
});
111-
no += 1;
112-
id += 1;
113-
date = date.AddHours(1);
114-
if (id % 8 == 0)
115-
{
116-
date = date.AddHours(1);
117-
}
118-
}
119-
}
120-
return collections;
121-
}
122-
123-
public object groupData { get; set; } = new
124-
{
125-
resources = new string[] { "Airlines" }
126-
};
127-
128-
[Parameter]
129-
private List<object> resourceData { get; set; } = new List<object> {
130-
new {
131-
field = "AirlineId", title = "Airline Name",
132-
name = "Airlines", allowMultiple = true,
133-
dataSource = new List<object>{
134-
new { AirlineName = "Airways 1", AirlineId = 1, AirlineColor = "#EA7A57", AirlineModel = "CRJ 700", AirlineSeats = 50 },
135-
new { AirlineName = "Airways 2", AirlineId = 2, AirlineColor = "#357cd2", AirlineModel = "Airbus A330", AirlineSeats = 75},
136-
new { AirlineName = "Airways 3", AirlineId = 3, AirlineColor = "#7fa900", AirlineModel = "ATR 72-600", AirlineSeats = 100}
137-
},
138-
textField = "AirlineName", idField = "AirlineId", colorField = "AirlineColor"
139-
}
140-
};
141-
142-
[Parameter]
143-
private object eventSettingsFields { get; set; } = new
144-
{
145-
dataSource = generateEvents(),
146-
fields = new
147-
{
148-
subject = new { title = "Travel Summary", name = "Subject" },
149-
location = new { title = "Source", name = "Location" },
150-
description = new { title = "Comments", name = "Description" },
151-
startTime = new { title = "Departure Time", name = "StartTime" },
152-
endTime = new { title = "Arrival Time", name = "EndTime" }
153-
}
88+
@code{
89+
public class AppointmentData
90+
{
91+
public int Id { get; set; }
92+
public string Subject { get; set; }
93+
public DateTime StartTime { get; set; }
94+
public DateTime EndTime { get; set; }
95+
public int AirlineId { get; set; }
96+
}
97+
98+
private static List<object> GenerateEvents()
99+
{
100+
System.Console.WriteLine("hello");
101+
var subjectCollection = new List<string> { "Barcelona to Los Angeles", "Los Angeles to Barcelona" };
102+
var collections = new List<object> { };
103+
var dataCollections = new List<int> { 1, 2, 3 };
104+
var id = 1;
105+
var no = 0;
106+
for (var i = 0; i < dataCollections.Count; i++)
107+
{
108+
var data = dataCollections[i];
109+
var startDate = new DateTime(2018, 3, 1);
110+
var lastDate = new DateTime(2018, 4, 1);
111+
for (var date = startDate; date.Ticks < lastDate.Ticks; date = date.AddHours(2))
112+
{
113+
var strDate = date;
114+
var endDate = strDate.AddHours(2);
115+
collections.Add(new AppointmentData
116+
{
117+
Id = id,
118+
Subject = subjectCollection[id % 2],
119+
StartTime = strDate,
120+
EndTime = endDate,
121+
AirlineId = data
122+
});
123+
no += 1;
124+
id += 1;
125+
date = date.AddHours(1);
126+
if (id % 8 == 0)
127+
{
128+
date = date.AddHours(1);
129+
}
130+
}
131+
}
132+
return collections;
133+
}
134+
135+
public string[] GroupData = new string[] { "Airlines" };
136+
137+
private List<object> ResourceData { get; set; } = new List<object> {
138+
new { AirlineName = "Airways 1", AirlineId = 1, AirlineColor = "#EA7A57", AirlineModel = "CRJ 700", AirlineSeats = 50 },
139+
new { AirlineName = "Airways 2", AirlineId = 2, AirlineColor = "#357cd2", AirlineModel = "Airbus A330", AirlineSeats = 75},
140+
new { AirlineName = "Airways 3", AirlineId = 3, AirlineColor = "#7fa900", AirlineModel = "ATR 72-600", AirlineSeats = 100}
154141
};
155142
}

‎ej2-blazor-samples/Pages/Schedule/Schedule/Timeline.razor‎

Lines changed: 10 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -29,29 +29,19 @@
2929

3030
<div class="col-lg-12 control-section">
3131
<div class="schedule-wrapper">
32-
<EjsSchedule id="schedule" height="650px" selectedDate="new DateTime(2019, 1, 10)" EventSettings="@ScheduleData">
33-
<ScheduleViews>
34-
<ScheduleView option="@timelineDay" allowVirtualScrolling="false"></ScheduleView>
35-
<ScheduleView option="@timelineWeek" allowVirtualScrolling="false"></ScheduleView>
36-
<ScheduleView option="@timelineWorkWeek" allowVirtualScrolling="false"></ScheduleView>
37-
<ScheduleView option="@timelineMonth" allowVirtualScrolling="false"></ScheduleView>
38-
<ScheduleView option="@agenda" allowVirtualScrolling="false"></ScheduleView>
39-
</ScheduleViews>
32+
<EjsSchedule ID="schedule" Width="100%" Height="650px" SelectedDate="new DateTime(2019, 1, 10)">
33+
<ScheduleViews>
34+
<ScheduleView Option="View.TimelineDay"></ScheduleView>
35+
<ScheduleView Option="View.TimelineWeek"></ScheduleView>
36+
<ScheduleView Option="View.TimelineWorkWeek"></ScheduleView>
37+
<ScheduleView Option="View.TimelineMonth"></ScheduleView>
38+
<ScheduleView Option="View.Agenda"></ScheduleView>
39+
</ScheduleViews>
40+
<ScheduleEventSettings DataSource="@Data.GetScheduleData()"></ScheduleEventSettings>
4041
</EjsSchedule>
4142
</div>
4243
</div>
4344

4445
@functions{
45-
static ScheduleData data = new ScheduleData();
46-
private object viewList { get; set; } = new string[] { "TimelineDay", "TimelineWeek", "TimelineWorkWeek", "TimelineMonth", "Agenda" };
47-
[Parameter]
48-
private object ScheduleData { get; set; } = new
49-
{
50-
dataSource = data.GetScheduleData()
51-
};
52-
public View timelineDay = View.TimelineDay;
53-
public View timelineWeek = View.TimelineWeek;
54-
public View timelineWorkWeek = View.TimelineWorkWeek;
55-
public View timelineMonth = View.TimelineMonth;
56-
public View agenda = View.Agenda;
46+
static ScheduleData Data = new ScheduleData();
5747
}

0 commit comments

Comments
 (0)