Skip to content

Commit 91eaadf

Browse files
BackiarajBackiaraj
committed
Prepared UG samples for Color Picker and ComboBox
1 parent 57e893b commit 91eaadf

File tree

351 files changed

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

351 files changed

+298831
-0
lines changed

‎ColorPicker/CustomColorPickerSample/CustomColorPickerSample.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/CustomColorPickerSample/CustomColorPickerSample.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}") = "CustomColorPickerSample", "CustomColorPickerSample.csproj", "{D3D650A6-2ABC-4F98-8571-2EDB954930F1}"
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+
{D3D650A6-2ABC-4F98-8571-2EDB954930F1}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
15+
{D3D650A6-2ABC-4F98-8571-2EDB954930F1}.Debug|Any CPU.Build.0 = Debug|Any CPU
16+
{D3D650A6-2ABC-4F98-8571-2EDB954930F1}.Release|Any CPU.ActiveCfg = Release|Any CPU
17+
{D3D650A6-2ABC-4F98-8571-2EDB954930F1}.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 = {53057735-768F-46BD-B0AD-ADF873CBC504}
24+
EndGlobalSection
25+
EndGlobal

‎ColorPicker/CustomColorPickerSample/Pages/CustomHandle.cshtml‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
@page
2+
@model CustomColorPickerSample.Pages.CustomHandleModel
3+
@{
4+
}
5+
<div class='wrap'>
6+
<h4>Choose color</h4>
7+
<ejs-colorpicker id="element" cssClass="e-custom-picker" value="#344aae" modeSwitcher="false" open="onOpen"></ejs-colorpicker>
8+
</div>
9+
10+
<script>
11+
// Triggers after the color picker popup open.
12+
function onOpen(args) {
13+
args.element.querySelector('.e-handler').classList.add('e-icons');
14+
}
15+
</script>
16+
17+
<style>
18+
.wrap {
19+
margin: 0 auto;
20+
width: 300px;
21+
text-align: center;
22+
}
23+
24+
/* To hide the handle balloon preview */
25+
.e-color-picker-tooltip.e-popup.e-popup-open {
26+
display: none;
27+
}
28+
29+
/* Handle customization styles */
30+
.e-custom-picker .e-container .e-hsv-container .e-handler {
31+
background: transparent url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIyLjEuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAxNiAxNiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTYgMTY7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDojRkZGRkZGO30KPC9zdHlsZT4KPGc+Cgk8cG9seWdvbiBjbGFzcz0ic3QwIiBwb2ludHM9IjE2LDYgMTAsNiAxMCwwIDYsMCA2LDYgMCw2IDAsMTAgNiwxMCA2LDE2IDEwLDE2IDEwLDEwIDE2LDEwIAkiLz4KPC9nPgo8cGF0aCBkPSJNMTAsNlYwSDZ2NkgwdjRoNnY2aDR2LTZoNlY2SDEweiBNMTUsOUg5djZIN1Y5SDFWN2g2VjFoMnY2aDZWOXoiLz4KPC9zdmc+Cg==');
32+
font-size: 16px;
33+
height: 16px;
34+
line-height: 16px;
35+
margin-left: -8px;
36+
margin-top: -8px;
37+
border: none;
38+
box-shadow: none;
39+
width: 16px;
40+
}
41+
</style>

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

‎ColorPicker/CustomColorPickerSample/Pages/CustomPrimaryButton.cshtml‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
@page
2+
@model CustomColorPickerSample.Pages.CustomPrimaryButtonModel
3+
@{
4+
}
5+
<div class='wrap'>
6+
<h4>Choose color</h4>
7+
<ejs-colorpicker id="element" cssClass="e-custom-icon" change="onChange"></ejs-colorpicker>
8+
</div>
9+
10+
<script>
11+
var iconPreview;
12+
window.onload = function () {
13+
iconPreview = document.querySelector('.e-custom-icon .e-selected-color');
14+
iconPreview.classList.add("e-icons");
15+
}
16+
function onChange(args) {
17+
iconPreview.style.borderBottomColor = args.currentValue.rgba;
18+
}
19+
</script>
20+
21+
<style>
22+
.wrap {
23+
margin: 0 auto;
24+
width: 300px;
25+
text-align: center;
26+
}
27+
28+
/* Icon customization */
29+
.e-custom-icon.e-colorpicker-wrapper .e-split-btn-wrapper .e-split-btn .e-selected-color {
30+
background: none;
31+
border-bottom-style: solid;
32+
border-bottom-width: 3px;
33+
width: 14px;
34+
margin: 0px 2px;
35+
border-bottom-color: #008000;
36+
}
37+
38+
.e-custom-icon.e-colorpicker-wrapper .e-split-btn-wrapper .e-split-btn .e-selected-color .e-split-preview {
39+
display: none;
40+
}
41+
42+
.e-custom-icon.e-colorpicker-wrapper .e-split-btn-wrapper .e-split-btn .e-selected-color::before {
43+
content: '\e35c';
44+
}
45+
</style>

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

‎ColorPicker/CustomColorPickerSample/Pages/CustomUI.cshtml‎

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
@page
2+
@model CustomColorPickerSample.Pages.CustomUIModel
3+
@{
4+
var Modalanimation = new Syncfusion.EJ2.Popups.DialogAnimationSettings { Effect = Syncfusion.EJ2.Popups.DialogEffect.Zoom };
5+
}
6+
<div class="wrap">
7+
<ul id="target" tabindex="0">
8+
<li class="e-item e-palette-item">
9+
<ejs-colorpicker id="palette" mode="Palette" inline="true" modeSwitcher="false" showButtons="false" change="onPaletteChange"></ejs-colorpicker>
10+
</li>
11+
<li class="e-item" tabindex="-1">
12+
<span class="e-menu-icon e-morecolors"></span>
13+
More colors...
14+
</li>
15+
</ul>
16+
<div>
17+
<ejs-colorpicker id="picker" inline="true" modeSwitcher="false" created="onPickerCreated" change="onPickerChange"></ejs-colorpicker>
18+
<h4>Select color</h4>
19+
<ejs-splitbutton id="splitbtn" iconCss="e-icons e-font-icon" created="onSplitBtnCreated" target="#target" open="onDdPopupOpen" beforeClose="onBeforeDdPopupClose"></ejs-splitbutton>
20+
<ejs-dialog id="picker-dialog" animationSettings="Modalanimation" cssClass="e-dlg-picker" created="onLoad" isModal="true" visible="false" overlayClick="closePickerDlg" content="<div class='dlgContent'></div>" width="270px" height="336px" target=".wrap"></ejs-dialog>
21+
</div>
22+
</div>
23+
24+
<script>
25+
var splitBtnIcon, dlg, picker;
26+
function onSplitBtnCreated() {
27+
splitBtnIcon = document.getElementById("splitbtn");
28+
}
29+
function onPickerCreated() {
30+
picker = document.getElementById("picker");
31+
}
32+
function onLoad() {
33+
dlg = document.getElementById("picker-dialog");
34+
picker.nextElementSibling.querySelector('.e-ctrl-btn .e-cancel').addEventListener('click', closePickerDlg);
35+
dlg.querySelector(".dlgContent").appendChild(picker.parentElement);
36+
}
37+
function onPickerChange(args) {
38+
onPaletteChange(args);
39+
closePickerDlg();
40+
}
41+
function onPaletteChange(args) {
42+
splitBtnIcon.querySelector('.e-font-icon').style.borderBottomColor = args.currentValue.rgba;
43+
}
44+
function onDdPopupOpen(args) {
45+
args.element.children[1].addEventListener('click', openPickerDlg);
46+
}
47+
function onBeforeDdPopupClose(args) {
48+
args.element.children[1].removeEventListener('click', openPickerDlg);
49+
}
50+
function openPickerDlg() {
51+
ej.base.getInstance(dlg, ejs.popups.Dialog).show();
52+
}
53+
function closePickerDlg() {
54+
ej.base.getInstance(dlg, ejs.popups.Dialog).hide();
55+
}
56+
</script>
57+
58+
<style>
59+
.wrap {
60+
margin: 0 auto;
61+
width: 100%;
62+
height: 100%;
63+
min-height: 350px;
64+
text-align: center;
65+
}
66+
67+
.e-btn-icon.e-font-icon {
68+
border-bottom-style: solid;
69+
border-bottom-width: 3px;
70+
}
71+
72+
.e-btn-icon.e-font-icon::before {
73+
content: '\e34c';
74+
}
75+
76+
.e-colorpicker-wrapper.e-hide-palette {
77+
display: none;
78+
}
79+
80+
.e-dropdown-popup ul .e-item:first-child.e-palette-item {
81+
height: auto;
82+
padding: 0;
83+
}
84+
85+
.e-dlg-picker.e-dialog .e-dlg-content {
86+
padding: 0;
87+
background-color: transparent;
88+
}
89+
90+
.e-dlg-picker.e-dialog {
91+
max-height: 336px !important;
92+
background-color: transparent;
93+
}
94+
95+
.e-dropdown-popup ul .e-item .e-menu-icon.e-morecolors {
96+
height: 24px;
97+
margin-top: 6px;
98+
width: 24px;
99+
background-image: linear-gradient(to bottom, #fff 0, #000 100%);
100+
background-color: #0450c2;
101+
}
102+
.e-dlg-container.e-dlg-center-center {
103+
z-index: 1!important;
104+
}
105+
</style>

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

‎ColorPicker/CustomColorPickerSample/Pages/Error.cshtml‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
@page
2+
@model ErrorModel
3+
@{
4+
ViewData["Title"] = "Error";
5+
}
6+
7+
<h1 class="text-danger">Error.</h1>
8+
<h2 class="text-danger">An error occurred while processing your request.</h2>
9+
10+
@if (Model.ShowRequestId)
11+
{
12+
<p>
13+
<strong>Request ID:</strong> <code>@Model.RequestId</code>
14+
</p>
15+
}
16+
17+
<h3>Development Mode</h3>
18+
<p>
19+
Swapping to the <strong>Development</strong> environment displays detailed information about the error that occurred.
20+
</p>
21+
<p>
22+
<strong>The Development environment shouldn't be enabled for deployed applications.</strong>
23+
It can result in displaying sensitive information from exceptions to end users.
24+
For local debugging, enable the <strong>Development</strong> environment by setting the <strong>ASPNETCORE_ENVIRONMENT</strong> environment variable to <strong>Development</strong>
25+
and restarting the app.
26+
</p>

‎ColorPicker/CustomColorPickerSample/Pages/Error.cshtml.cs‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
using Microsoft.AspNetCore.Mvc;
2+
using Microsoft.AspNetCore.Mvc.RazorPages;
3+
using System.Diagnostics;
4+
5+
namespace CustomColorPickerSample.Pages
6+
{
7+
[ResponseCache(Duration = 0, Location = ResponseCacheLocation.None, NoStore = true)]
8+
[IgnoreAntiforgeryToken]
9+
public class ErrorModel : PageModel
10+
{
11+
public string? RequestId { get; set; }
12+
13+
public bool ShowRequestId => !string.IsNullOrEmpty(RequestId);
14+
15+
private readonly ILogger<ErrorModel> _logger;
16+
17+
public ErrorModel(ILogger<ErrorModel> logger)
18+
{
19+
_logger = logger;
20+
}
21+
22+
public void OnGet()
23+
{
24+
RequestId = Activity.Current?.Id ?? HttpContext.TraceIdentifier;
25+
}
26+
}
27+
}

0 commit comments

Comments
 (0)