Search results

Getting Started

This section briefly explains about how to create a default ColorPicker in your ASP.NET Core application. You can refer ASP.NET Core Getting Started documentation page for introduction part of the system requirements and configure the common specifications.

Add ColorPicker to the project

To create default ColorPicker add the ejs-colorpicker tag with id attribute as element in your Index.cshtml page.

tagHelper
default.cs
@*To render ColorPicker.*@
<ejs-colorpicker id="element"></ejs-colorpicker>
public ActionResult Index()
    {
            return View();
    }

Output be like the below.

ColorPicker Sample

Run the application

After successful compilation of your application, simply press F5 to run the application.

The following example shows a default rendering of ColorPicker.

tagHelper
default.cs
<div class='wrap'>
    <h4>Choose color</h4>
    <ejs-colorpicker id="element"></ejs-colorpicker>
</div>

<style>
    .wrap {
        margin: 0 auto;
        width: 300px;
        text-align: center;
    }
</style>
public ActionResult Default()
    {
            return View();
    }

Inline type

By default, the ColorPicker will be rendered using SplitButton and open the pop-up to access the ColorPicker. To render the ColorPicker container alone and to access it directly, render it as inline. It can be achieved by setting the inline property to true.

The following sample shows the inline type rendering of ColorPicker.

tagHelper
inline.cs
<div class='wrap'>
    <h4>Choose color</h4>
    <ejs-colorpicker id="element" inline="true"></ejs-colorpicker>
</div>

<style>
    .wrap {
        margin: 0 auto;
        width: 300px;
        text-align: center;
    }
</style>
public ActionResult Inline()
    {
            return View();
    }

The showButtons property is disabled in this sample because the control buttons are not needed for inline type. To know about the control buttons functionality, refer to the showButtons sample.