Skip to content

Commit b5ddc6c

Browse files
SaravanaPriya31SaravanaPriya31
SaravanaPriya31
authored and
SaravanaPriya31
committed
Merge branch '875662-hotfix' of https://github.com/syncfusion-content/ej2-asp-core-mvc-docs into 875662-hotfix
2 parents 7bb94d1 + 4adc8ef commit b5ddc6c

Some content is hidden

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

42 files changed

+1832
-9
lines changed
Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
public ActionResult ContextualTab()
2+
{
3+
return View();
4+
}
Lines changed: 153 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
@using Syncfusion.EJ2.Ribbon
2+
@using Syncfusion.EJ2.Navigations
3+
4+
@{
5+
List<RibbonContextualTab> contextTabs = new List<RibbonContextualTab>()
6+
{
7+
new RibbonContextualTab
8+
{
9+
Visible = true,
10+
Tabs = new List<RibbonTab>()
11+
{
12+
new RibbonTab()
13+
{
14+
Id="ShapeFormat", Header = "Shape Format" ,
15+
Groups = new List<RibbonGroup>()
16+
{
17+
new RibbonGroup()
18+
{
19+
Header="Text decoration",
20+
ShowLauncherIcon=true,
21+
Collections = new List<RibbonCollection>()
22+
{
23+
new RibbonCollection()
24+
{
25+
Items = new List<RibbonItem>()
26+
{
27+
new RibbonItem()
28+
{
29+
Type = RibbonItemType.Button,
30+
ButtonSettings = new RibbonButtonSettings
31+
{
32+
Content = "Text Header",
33+
IconCss = "e-icons e-text-header"
34+
}
35+
},
36+
new RibbonItem()
37+
{
38+
Type = RibbonItemType.Button,
39+
ButtonSettings = new RibbonButtonSettings
40+
{
41+
Content = "Text Wrap",
42+
IconCss = "e-icons e-text-wrap"
43+
}
44+
},
45+
new RibbonItem()
46+
{
47+
Type = RibbonItemType.Button,
48+
ButtonSettings = new RibbonButtonSettings
49+
{
50+
Content = "Text Annotation",
51+
IconCss = "e-icons e-text-annotation"
52+
}
53+
}
54+
}
55+
}
56+
}
57+
},
58+
new RibbonGroup()
59+
{
60+
Header="Accessibility",
61+
Collections = new List<RibbonCollection>()
62+
{
63+
new RibbonCollection()
64+
{
65+
Items = new List<RibbonItem>()
66+
{
67+
new RibbonItem()
68+
{
69+
Type = RibbonItemType.Button,
70+
AllowedSizes = RibbonItemSize.Large,
71+
ButtonSettings = new RibbonButtonSettings
72+
{
73+
Content = "Alt Text",
74+
IconCss = "e-icons e-text-alternative"
75+
}
76+
}
77+
}
78+
}
79+
}
80+
},
81+
new RibbonGroup()
82+
{
83+
Header="Arrange",
84+
ShowLauncherIcon=true,
85+
Collections = new List<RibbonCollection>()
86+
{
87+
new RibbonCollection()
88+
{
89+
Items = new List<RibbonItem>()
90+
{
91+
new RibbonItem()
92+
{
93+
Type = RibbonItemType.Button,
94+
ButtonSettings = new RibbonButtonSettings
95+
{
96+
Content = "Bring Forward",
97+
IconCss = "e-icons e-bring-forward"
98+
}
99+
},
100+
new RibbonItem()
101+
{
102+
Type = RibbonItemType.Button,
103+
ButtonSettings = new RibbonButtonSettings
104+
{
105+
Content = "Send Backward",
106+
IconCss = "e-icons e-send-backward"
107+
}
108+
},
109+
new RibbonItem()
110+
{
111+
Type = RibbonItemType.Button,
112+
ButtonSettings = new RibbonButtonSettings
113+
{
114+
Content = "Selection Pane",
115+
IconCss = "e-icons e-show-hide-panel"
116+
}
117+
}
118+
}
119+
}
120+
}
121+
}
122+
}
123+
}
124+
}
125+
}
126+
};
127+
}
128+
129+
@Html.EJS().Ribbon("ribbon").ContextualTabs(contextTabs).Tabs(tab =>
130+
{
131+
tab.Header("Home").Groups(groups =>
132+
133+
{
134+
groups.Header("Clipboard").GroupIconCss("e-icons e-paste").ShowLauncherIcon(true).Id("lipboardGroup").Collections(collection =>
135+
{
136+
collection.Items(items =>
137+
{
138+
items.Type(RibbonItemType.Button).ButtonSettings(button =>
139+
{
140+
button.IconCss("e-icons e-cut").Content("Cut");
141+
}).Add();
142+
items.Type(RibbonItemType.Button).ButtonSettings(button =>
143+
{
144+
button.IconCss("e-icons e-copy").Content("Copy");
145+
}).Add();
146+
items.Type(RibbonItemType.Button).ButtonSettings(button =>
147+
{
148+
button.IconCss("e-icons e-format-painter").Content("Format Painter");
149+
}).Add();
150+
}).Add();
151+
}).Add();
152+
}).Add();
153+
}).Render()
Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
@using Syncfusion.EJ2.Ribbon
2+
@using Syncfusion.EJ2.Navigations
3+
4+
<ejs-ribbon id="ribbon">
5+
<e-ribbon-tabs>
6+
<e-ribbon-tab header="Home">
7+
<e-ribbon-groups>
8+
<e-ribbon-group header="Clipboard" id="clipboardGroup" groupIconCss="e-icons e-paste" showLauncherIcon=true>
9+
<e-ribbon-collections>
10+
<e-ribbon-collection>
11+
<e-ribbon-items>
12+
<e-ribbon-item type="Button">
13+
<e-ribbon-buttonsettings iconCss="e-icons e-cut" content="Cut"></e-ribbon-buttonsettings>
14+
</e-ribbon-item>
15+
<e-ribbon-item type="Button">
16+
<e-ribbon-buttonsettings iconCss="e-icons e-copy" content="Copy"></e-ribbon-buttonsettings>
17+
</e-ribbon-item>
18+
<e-ribbon-item type="Button">
19+
<e-ribbon-buttonsettings iconCss="e-icons e-format-painter" content="Format Painter"></e-ribbon-buttonsettings>
20+
</e-ribbon-item>
21+
</e-ribbon-items>
22+
</e-ribbon-collection>
23+
</e-ribbon-collections>
24+
</e-ribbon-group>
25+
</e-ribbon-groups>
26+
</e-ribbon-tab>
27+
</e-ribbon-tabs>
28+
<e-ribbon-contextual-tabs>
29+
<e-ribbon-contextual-tab visible=true>
30+
<e-ribbon-tabs>
31+
<e-ribbon-tab header="Shape Format" id="ShapeFormat">
32+
<e-ribbon-groups>
33+
<e-ribbon-group header="Text decoration" id="Textdecoration" showLauncherIcon=true>
34+
<e-ribbon-collections>
35+
<e-ribbon-collection>
36+
<e-ribbon-items>
37+
<e-ribbon-item type="Button">
38+
<e-ribbon-buttonsettings iconCss="e-icons e-text-header" content="Text Header"></e-ribbon-buttonsettings>
39+
</e-ribbon-item>
40+
<e-ribbon-item type="Button">
41+
<e-ribbon-buttonsettings iconCss="e-icons e-text-wrap" content="Text Wrap"></e-ribbon-buttonsettings>
42+
</e-ribbon-item>
43+
<e-ribbon-item type="Button">
44+
<e-ribbon-buttonsettings iconCss="e-icons e-text-annotation" content="Text Annotation"></e-ribbon-buttonsettings>
45+
</e-ribbon-item>
46+
</e-ribbon-items>
47+
</e-ribbon-collection>
48+
</e-ribbon-collections>
49+
</e-ribbon-group>
50+
<e-ribbon-group header="Accessibility">
51+
<e-ribbon-collections>
52+
<e-ribbon-collection>
53+
<e-ribbon-items>
54+
<e-ribbon-item type="Button" allowedSizes=Large>
55+
<e-ribbon-buttonsettings iconCss="e-icons e-text-alternative" content="Alt Text"></e-ribbon-buttonsettings>
56+
</e-ribbon-item>
57+
</e-ribbon-items>
58+
</e-ribbon-collection>
59+
</e-ribbon-collections>
60+
</e-ribbon-group>
61+
<e-ribbon-group header="Arrange" showLauncherIcon=true>
62+
<e-ribbon-collections>
63+
<e-ribbon-collection>
64+
<e-ribbon-items>
65+
<e-ribbon-item type="Button">
66+
<e-ribbon-buttonsettings iconCss="e-icons e-bring-forward" content="Bring Forward"></e-ribbon-buttonsettings>
67+
</e-ribbon-item>
68+
<e-ribbon-item type="Button">
69+
<e-ribbon-buttonsettings iconCss="e-icons e-send-backward" content="Send Backward"></e-ribbon-buttonsettings>
70+
</e-ribbon-item>
71+
<e-ribbon-item type="Button">
72+
<e-ribbon-buttonsettings iconCss="e-icons e-show-hide-panel" content="Selection Pane"></e-ribbon-buttonsettings>
73+
</e-ribbon-item>
74+
</e-ribbon-items>
75+
</e-ribbon-collection>
76+
</e-ribbon-collections>
77+
</e-ribbon-group>
78+
</e-ribbon-groups>
79+
</e-ribbon-tab>
80+
</e-ribbon-tabs>
81+
</e-ribbon-contextual-tab>
82+
</e-ribbon-contextual-tabs>
83+
</ejs-ribbon>
Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
public ActionResult ContextualTab()
2+
{
3+
return View();
4+
}
Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
@using Syncfusion.EJ2.Ribbon
2+
@using Syncfusion.EJ2.Navigations
3+
4+
@{
5+
List<RibbonContextualTab> contextTabs = new List<RibbonContextualTab>()
6+
{
7+
new RibbonContextualTab
8+
{
9+
Tabs = new List<RibbonTab>()
10+
{
11+
new RibbonTab()
12+
{
13+
Header = "Arrange & View",
14+
Id = "ArrangeView",
15+
Groups = new List<RibbonGroup>()
16+
{
17+
new RibbonGroup()
18+
{
19+
Header="Arrange",
20+
ShowLauncherIcon=true,
21+
Collections = new List<RibbonCollection>()
22+
{
23+
new RibbonCollection()
24+
{
25+
Items = new List<RibbonItem>()
26+
{
27+
new RibbonItem()
28+
{
29+
Type = RibbonItemType.Button,
30+
ButtonSettings = new RibbonButtonSettings
31+
{
32+
Content = "Bring Forward",
33+
IconCss = "e-icons e-bring-forward"
34+
}
35+
},
36+
new RibbonItem()
37+
{
38+
Type = RibbonItemType.Button,
39+
ButtonSettings = new RibbonButtonSettings
40+
{
41+
Content = "Send Backward",
42+
IconCss = "e-icons e-send-backward"
43+
}
44+
},
45+
new RibbonItem()
46+
{
47+
Type = RibbonItemType.Button,
48+
ButtonSettings = new RibbonButtonSettings
49+
{
50+
Content = "Selection Pane",
51+
IconCss = "e-icons e-show-hide-panel"
52+
}
53+
}
54+
}
55+
}
56+
}
57+
}
58+
}
59+
}
60+
}
61+
}
62+
};
63+
}
64+
<div>
65+
<button class="e-btn" id="show-contextual"> Show tab </button>
66+
<button class="e-btn" id="hide-contextual"> Hide tab </button>
67+
</div>
68+
@Html.EJS().Ribbon("ribbon").ContextualTabs(contextTabs).Created("ribbonCreated").Tabs(tab =>
69+
{
70+
tab.Header("Home").Groups(groups =>
71+
72+
{
73+
groups.Header("Clipboard").GroupIconCss("e-icons e-paste").ShowLauncherIcon(true).Id("lipboardGroup").Collections(collection =>
74+
{
75+
collection.Items(items =>
76+
{
77+
items.Type(RibbonItemType.Button).ButtonSettings(button =>
78+
{
79+
button.IconCss("e-icons e-cut").Content("Cut");
80+
}).Add();
81+
items.Type(RibbonItemType.Button).ButtonSettings(button =>
82+
{
83+
button.IconCss("e-icons e-copy").Content("Copy");
84+
}).Add();
85+
items.Type(RibbonItemType.Button).ButtonSettings(button =>
86+
{
87+
button.IconCss("e-icons e-format-painter").Content("Format Painter");
88+
}).Add();
89+
}).Add();
90+
}).Add();
91+
}).Add();
92+
}).Render()
93+
94+
<script>
95+
var ribbon;
96+
function ribbonCreated() {
97+
ribbon = document.getElementById('ribbon').ej2_instances[0];
98+
}
99+
document.getElementById('show-contextual').onclick = () => {
100+
ribbon.showTab('ArrangeView', true);
101+
}
102+
document.getElementById('hide-contextual').onclick = () => {
103+
ribbon.hideTab('ArrangeView', true);
104+
}
105+
</script>
106+
107+
<style>
108+
#ribbon {
109+
margin-top: 20px;
110+
}
111+
</style>

0 commit comments

Comments
 (0)