Skip to content

Commit 2afe6f6

Browse files
rajendranr-5483rajendranr-5483
authored
Merge pull request SyncfusionExamples#9 from Backiaraj/UG
Prepared UG samples for Color Picker and ComboBox
2 parents 59dad07 + 91eaadf commit 2afe6f6

File tree

536 files changed

+448427
-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.

536 files changed

+448427
-0
lines changed

‎ColorPicker/ColorPickerSample/ColorPickerSample.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.2.0.43" />
11+
</ItemGroup>
12+
13+
</Project>

‎ColorPicker/ColorPickerSample/ColorPickerSample.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}") = "ColorPickerSample", "ColorPickerSample.csproj", "{9821D396-136B-4706-B7C7-45FA9FCBD08A}"
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+
{9821D396-136B-4706-B7C7-45FA9FCBD08A}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
15+
{9821D396-136B-4706-B7C7-45FA9FCBD08A}.Debug|Any CPU.Build.0 = Debug|Any CPU
16+
{9821D396-136B-4706-B7C7-45FA9FCBD08A}.Release|Any CPU.ActiveCfg = Release|Any CPU
17+
{9821D396-136B-4706-B7C7-45FA9FCBD08A}.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 = {F922BE4E-AF62-4D02-A650-0310B20EA251}
24+
EndGlobalSection
25+
EndGlobal

‎ColorPicker/ColorPickerSample/Pages/Accessibility.cshtml‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
@page
2+
@model ColorPickerSample.Pages.AccessibilityModel
3+
@{
4+
}
5+
<div class='wrap'>
6+
<h4>Choose Color</h4>
7+
<ejs-colorpicker id="element"></ejs-colorpicker>
8+
</div>
9+
10+
11+
<style>
12+
.wrap {
13+
margin: 0 auto;
14+
width: 300px;
15+
text-align: center;
16+
}
17+
</style>

‎ColorPicker/ColorPickerSample/Pages/Accessibility.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 ColorPickerSample.Pages
5+
{
6+
public class AccessibilityModel : PageModel
7+
{
8+
public void OnGet()
9+
{
10+
}
11+
}
12+
}

‎ColorPicker/ColorPickerSample/Pages/ColorValue.cshtml‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
@page
2+
@model ColorPickerSample.Pages.ColorValueModel
3+
@{
4+
}
5+
<div class='wrap'>
6+
<h4>Choose Color</h4>
7+
<ejs-colorpicker id="element" value="035a" modeSwitcher="false"></ejs-colorpicker>
8+
</div>
9+
10+
<style>
11+
.wrap {
12+
margin: 0 auto;
13+
width: 300px;
14+
text-align: center;
15+
}
16+
</style>

‎ColorPicker/ColorPickerSample/Pages/ColorValue.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 ColorPickerSample.Pages
5+
{
6+
public class ColorValueModel : PageModel
7+
{
8+
public void OnGet()
9+
{
10+
}
11+
}
12+
}

‎ColorPicker/ColorPickerSample/Pages/CustomNoColor.cshtml‎

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
@page
2+
@model ColorPickerSample.Pages.CustomNoColorModel
3+
@{
4+
List<object> custom = new List<object>();
5+
custom.Add(new
6+
{
7+
Custom1 = new string[] {"#f44336", "#e91e63", "#9c27b0", "#673ab7", "#2196f3", "#03a9f4", "#00bcd4",
8+
"#009688", "#8bc34a", "#cddc39", "#ffeb3b", "#ffc107"}
9+
});
10+
11+
var customColors = custom[0];
12+
}
13+
<div class='wrap'>
14+
<ul id="target" tabindex="0">
15+
<li class="e-item e-palette-item">
16+
<ejs-colorpicker id="element" mode="Palette" modeSwitcher="false" inline="true" showButtons="false" columns="4" presetColors="@customColors" beforeTileRender="tileRender" change="onChange" created="onCreated"></ejs-colorpicker>
17+
</li>
18+
<li class="e-item" id="no-color" tabindex="-1">
19+
<span class="e-menu-icon e-nocolor"></span>
20+
No color
21+
</li>
22+
</ul>
23+
<div id="preview"></div>
24+
<h4>Select color</h4>
25+
<ejs-splitbutton id="splitbtn" iconCss="e-cp-icons e-picker-icon" target="#target"></ejs-splitbutton>
26+
</div>
27+
28+
<script>
29+
var preview;
30+
function onCreated() {
31+
preview = document.getElementById("preview");
32+
// Initially set the default color and value to preview.
33+
preview.style.backgroundColor = "#f44336";
34+
preview.textContent = "#f44336";
35+
36+
// Binding click event for no color li.
37+
document.getElementById('no-color').onclick = function () {
38+
// sets color picker value property to null.
39+
ej.base.getInstance(document.getElementById("element"), ejs.inputs.ColorPicker).setProperties({ 'value': "" }, true);
40+
document.querySelector('.e-split-btn .e-picker-icon').style.borderBottomColor = "transparent";
41+
preview.textContent = "No color"
42+
preview.style.backgroundColor = "transparent";
43+
}
44+
}
45+
// Triggers while selecting colors from palette.
46+
function onChange(args) {
47+
var splitBtnInst = ej.base.getInstance(document.getElementById('splitbtn'), ejs.splitbuttons.SplitButton);
48+
document.querySelector(".e-split-btn .e-picker-icon").style.borderBottomColor = args.currentValue.hex;
49+
preview.style.backgroundColor = args.currentValue.hex;
50+
preview.textContent = args.currentValue.hex;
51+
if (splitBtnInst.element.getAttribute("aria-expanded")) {
52+
splitBtnInst.toggle();
53+
splitBtnInst.element.focus();
54+
}
55+
}
56+
// Triggers before rendering each palette tile.
57+
function tileRender(args) {
58+
args.element.classList.add("e-custom-tile");
59+
}
60+
</script>
61+
62+
<style>
63+
/* Preview area styles */
64+
#preview {
65+
border: 1px solid;
66+
font-family: 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif';
67+
font-size: 14px;
68+
height: 40px;
69+
line-height: 40px;
70+
width: 100%;
71+
}
72+
73+
.wrap {
74+
margin: 0 auto;
75+
width: 300px;
76+
text-align: center;
77+
}
78+
79+
@@font-face {
80+
font-family: 'paint';
81+
src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMj0gSRIAAAEoAAAAVmNtYXDnEOdVAAABiAAAADZnbHlmIZD+uwAAAcgAAADMaGVhZBKhhHQAAADQAAAANmhoZWEHjANrAAAArAAAACRobXR4B+j/8wAAAYAAAAAIbG9jYQBmAAAAAAHAAAAABm1heHABDgBKAAABCAAAACBuYW1ln6hzswAAApQAAAINcG9zdEkLMmUAAASkAAAANgABAAADUv9qAFoEAP/z//4D6gABAAAAAAAAAAAAAAAAAAAAAgABAAAAAQAAAZfc6F8PPPUACwPoAAAAANfSn9kAAAAA19Kf2f/z//wD6gPhAAAACAACAAAAAAAAAAEAAAACAD4AAgAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQP0AZAABQAAAnoCvAAAAIwCegK8AAAB4AAxAQIAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5wDnAANS/2oAWgPhAJYAAAABAAAAAAAABAAAAAPo//MAAAACAAAAAwAAABQAAwABAAAAFAAEACIAAAAEAAQAAQAA5wD//wAA5wD//wAAAAEABAAAAAEAAAAAAAAAZgAAAAL/8//8A+oD4QAKAD0AAAEWBgceATc1JiQHJTMmNjceARcVJx4BBx4BFQ4BIiYnNDY3PgEvAS4BIw4BBwEGHgI3AT4BLwE1LgEnDgEDeiRlCgulCxP+8RT+GyYDQFxOZQwTBQEDDxEBJzonAREOCQkPJQ4cDBcdAf6oG1a3nx8BWQ4RHKADeG1oWwHTLHVwYVmL6Kx1BHEqfwYFqWUHEx4tDAocEx0nJx0RHgoVUDQpDgsBFAH+px2guFUaAVkNOiCgCXnhCAWOAAAAAAAAEgDeAAEAAAAAAAAAAQAAAAEAAAAAAAEABQABAAEAAAAAAAIABwAGAAEAAAAAAAMABQANAAEAAAAAAAQABQASAAEAAAAAAAUACwAXAAEAAAAAAAYABQAiAAEAAAAAAAoALAAnAAEAAAAAAAsAEgBTAAMAAQQJAAAAAgBlAAMAAQQJAAEACgBnAAMAAQQJAAIADgBxAAMAAQQJAAMACgB/AAMAAQQJAAQACgCJAAMAAQQJAAUAFgCTAAMAAQQJAAYACgCpAAMAAQQJAAoAWACzAAMAAQQJAAsAJAELIHBhaW50UmVndWxhcnBhaW50cGFpbnRWZXJzaW9uIDEuMHBhaW50Rm9udCBnZW5lcmF0ZWQgdXNpbmcgU3luY2Z1c2lvbiBNZXRybyBTdHVkaW93d3cuc3luY2Z1c2lvbi5jb20AIABwAGEAaQBuAHQAUgBlAGcAdQBsAGEAcgBwAGEAaQBuAHQAcABhAGkAbgB0AFYAZQByAHMAaQBvAG4AIAAxAC4AMABwAGEAaQBuAHQARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAdQBzAGkAbgBnACAAUwB5AG4AYwBmAHUAcwBpAG8AbgAgAE0AZQB0AHIAbwAgAFMAdAB1AGQAaQBvAHcAdwB3AC4AcwB5AG4AYwBmAHUAcwBpAG8AbgAuAGMAbwBtAAAAAAIAAAAAAAAACgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgECAQMADHBhaW50LWJ1Y2tldAAAAAA=) format('truetype');
82+
font-weight: normal;
83+
font-style: normal;
84+
}
85+
86+
.e-cp-icons {
87+
font-family: 'paint' !important;
88+
speak: none;
89+
font-size: 55px;
90+
font-style: normal;
91+
font-weight: normal;
92+
font-variant: normal;
93+
text-transform: none;
94+
line-height: 1;
95+
-webkit-font-smoothing: antialiased;
96+
-moz-osx-font-smoothing: grayscale;
97+
}
98+
/* ColorPicker customization */
99+
.e-dropdown-popup ul#target {
100+
padding: 0;
101+
}
102+
103+
.e-dropdown-popup ul .e-item.e-palette-item {
104+
height: auto;
105+
padding: 0;
106+
}
107+
108+
.e-btn-icon.e-picker-icon {
109+
border-bottom-color: #f44336;
110+
border-bottom-style: solid;
111+
border-bottom-width: 3px;
112+
}
113+
/* Picker icon */
114+
.e-btn-icon.e-picker-icon::before {
115+
content: '\e700';
116+
}
117+
/* No color li styles */
118+
.e-dropdown-popup ul .e-item .e-menu-icon.e-nocolor {
119+
height: 22px;
120+
margin-top: 8px;
121+
width: 22px;
122+
background: transparent url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNnB4IiBoZWlnaHQ9IjZweCIgdmlld0JveD0iMCAwIDYgNiIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggNTAgKDU0OTgzKSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5Hcm91cCA5PC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9Ikdyb3VwLTkiPgogICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTExIiBmaWxsPSIjRTBFMEUwIiB4PSIwIiB5PSIwIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIj48L3JlY3Q+CiAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMTEtQ29weS0yIiBmaWxsPSIjRkZGRkZGIiB4PSIwIiB5PSIzIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIj48L3JlY3Q+CiAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMTEtQ29weSIgZmlsbD0iI0ZGRkZGRiIgeD0iMyIgeT0iMCIgd2lkdGg9IjMiIGhlaWdodD0iMyI+PC9yZWN0PgogICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTExLUNvcHktMyIgZmlsbD0iI0UwRTBFMCIgeD0iMyIgeT0iMyIgd2lkdGg9IjMiIGhlaWdodD0iMyI+PC9yZWN0PgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+');
123+
}
124+
/* Tile customization */
125+
.e-container .e-palette .e-tile.e-custom-tile {
126+
height: 24px;
127+
width: 24px;
128+
margin: 4px;
129+
}
130+
</style>

‎ColorPicker/ColorPickerSample/Pages/CustomNoColor.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 ColorPickerSample.Pages
5+
{
6+
public class CustomNoColorModel : PageModel
7+
{
8+
public void OnGet()
9+
{
10+
}
11+
}
12+
}

‎ColorPicker/ColorPickerSample/Pages/DefaultNoColor.cshtml‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
@page
2+
@model ColorPickerSample.Pages.DefaultNoColorModel
3+
@{
4+
}
5+
<div class='wrap'>
6+
<div id="preview"></div>
7+
<h4>Select color</h4>
8+
<ejs-colorpicker id="element" mode="Palette" noColor="true" value="#ba68c8" created="onCreated" modeSwitcher="false" showButtons="false" change="onChange"></ejs-colorpicker>
9+
</div>
10+
11+
<script>
12+
var preview;
13+
function onCreated() {
14+
preview = document.getElementById("preview");
15+
// Initially set the default color and value to preview.
16+
preview.style.backgroundColor = "#ba68c8";
17+
preview.textContent = "#ba68c8";
18+
}
19+
// Triggers while selecting colors from palette.
20+
function onChange(args) {
21+
preview.style.backgroundColor = args.currentValue.hex;
22+
preview.textContent = args.currentValue.hex ? args.currentValue.hex : 'No color';
23+
}
24+
</script>
25+
26+
<style>
27+
.wrap {
28+
margin: 0 auto;
29+
width: 300px;
30+
text-align: center;
31+
}
32+
33+
#preview {
34+
border: 1px solid;
35+
font-family: 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif';
36+
font-size: 14px;
37+
height: 40px;
38+
line-height: 40px;
39+
}
40+
</style>

‎ColorPicker/ColorPickerSample/Pages/DefaultNoColor.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 ColorPickerSample.Pages
5+
{
6+
public class DefaultNoColorModel : PageModel
7+
{
8+
public void OnGet()
9+
{
10+
}
11+
}
12+
}

0 commit comments

Comments
 (0)