v18.2.0.44
This commit is contained in:
SyncfusionInstall
Родитель
396c1ecee0
Коммит
4cfdcba7f6
|
|
@ -122,4 +122,4 @@ Refer the Syncfusion Essential JS 1 for ASP.NET Core Product Release Notes in [o
|
|||
|
||||
* To renew the subscription, click [here](https://www.syncfusion.com/sales/products?utm_source=github&utm_medium=listing) or contact our sales team at <salessupport@syncfusion.com>.
|
||||
|
||||
<p>Copyright © 2001-2019 Syncfusion, Inc. Updated on 2020-05-14 at precisely 10:55:14 EST.</p>
|
||||
<p>Copyright © 2001-2020 Syncfusion, Inc. Updated on 2020-07-07 at precisely 15:47:47 EST.</p>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,13 @@
|
|||
@section SampleHeading{
|
||||
<span class="sampleName">Autocomplete / Autofill</span>}
|
||||
@section MetaTags{
|
||||
<meta name="description" content="This example demonstrates how to fill the Syncfusion ASP.NET Core Autocomplete with the first matching item in the suggestion list based on the entered text.">
|
||||
}
|
||||
@section ControlsSection{
|
||||
<div class="frame">
|
||||
<div class="control">
|
||||
<ej-autocomplete id="selectFlower" width="100%" enable-auto-fill="true" datasource="ViewBag.datasource" watermark-text="Select a flower"> </ej-autocomplete>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
@section SampleHeading{
|
||||
<span class="sampleName">Autocomplete / Data Bining - Local Data</span>}
|
||||
@section MetaTags{
|
||||
<meta name="description" content="This example demonstrates how to bind local data to the Syncfusion ASP.NET Core Autocomplete component.">
|
||||
}
|
||||
@section ControlsSection{
|
||||
<div class="frame">
|
||||
<div class="control">
|
||||
<ej-autocomplete id="selectState" width="100%" datasource="ViewBag.datasource" watermark-text="Select a state">
|
||||
<e-autocomplete-fields text="countryName" key="index" />
|
||||
</ej-autocomplete>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
@section SampleHeading{
|
||||
<span class="sampleName">Autocomplete / Data Binding - Remote data</span>}
|
||||
@section MetaTags{
|
||||
<meta name="description" content="This example demonstrates how to bind remote data in the Syncfusion ASP.NET Core Autocomplete component.">
|
||||
}
|
||||
@section ControlsSection{
|
||||
<div class="frame">
|
||||
<div class="control">
|
||||
|
||||
<ej-autocomplete id="searchCustomer" query="ej.Query().from('Suppliers').select('SupplierID', 'ContactName')" width="100%" watermark-text="Search a customer">
|
||||
<e-datamanager url="//js.syncfusion.com/ejServices/wcf/NorthWind.svc/" cross-domain="true" offline="false"></e-datamanager>
|
||||
<e-autocomplete-fields text="ContactName" key="SupplierID" />
|
||||
</ej-autocomplete>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
@section SampleHeading{
|
||||
<span class="sampleName">Autocomplete / Default Functionalities</span>}
|
||||
@section MetaTags{
|
||||
<meta name="description" content="This example demonstrates how to create a Syncfusion ASP.NET Core Autocomplete component and display a suggestion list when text is entered.">
|
||||
}
|
||||
@section ControlsSection{
|
||||
<div class="frame">
|
||||
<div class="control">
|
||||
|
||||
<ej-autocomplete id="selectCar" width="100%" watermark-text="Select a car" datasource="ViewBag.datasource"></ej-autocomplete>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
@section SampleHeading{
|
||||
<span class="sampleName">Autocomplete / Events</span>}
|
||||
@section MetaTags{
|
||||
<meta name="description" content="This example demonstrates client-side events when particular operations are performed in the Syncfusion ASP.NET Core Autocomplete component.">
|
||||
}
|
||||
@section ControlsSection{
|
||||
<div class="frame">
|
||||
<div class="control">
|
||||
<ej-autocomplete id="selectColor" width="100%" datasource="ViewBag.datasource" create="onCreate" change="onChange" focus-in="onFocusIn" focus-out="onFocusOut" select="onSelect" open="onOpen" close="onClose" watermark-text="Choose a color"></ej-autocomplete>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
@section EventsDropdown{
|
||||
@{
|
||||
<ej-drop-down-list id="selectControls_input" target-id="evntname" show-checkbox="true" check-all="true" change="evtpropscheckedevent"></ej-drop-down-list>
|
||||
|
||||
}
|
||||
<div id="evntname">
|
||||
<ul>
|
||||
<li>focusIn</li>
|
||||
<li>focusOut</li>
|
||||
<li>select</li>
|
||||
<li>change</li>
|
||||
<li>open</li>
|
||||
<li>close</li>
|
||||
</ul>
|
||||
</div>
|
||||
}
|
||||
@section ScriptSection{
|
||||
<script type="text/javascript" class="jsScript">
|
||||
var autocompleteObj;
|
||||
function evtpropscheckedevent(args) {
|
||||
autocompleteObj = $("#selectColor").data("ejAutocomplete");
|
||||
if (args.isChecked) {
|
||||
switch (args.selectedText) {
|
||||
case "focusIn": autocompleteObj.option(args.selectedText, "onFocusIn"); break;
|
||||
case "focusOut": autocompleteObj.option(args.selectedText, "onFocusOut"); break;
|
||||
case "select": autocompleteObj.option(args.selectedText, "onSelect"); break;
|
||||
case "change": autocompleteObj.option(args.selectedText, "onChange"); break;
|
||||
case "open": autocompleteObj.option(args.selectedText, "onOpen"); break;
|
||||
case "close": autocompleteObj.option(args.selectedText, "onClose"); break;
|
||||
}
|
||||
}
|
||||
else autocompleteObj.option(args.selectedText, null);
|
||||
}
|
||||
// Client side Events
|
||||
function onCreate(args) {
|
||||
jQuery.addEventLog("Autocomplete has been <span class='eventTitle'>created</span>.");
|
||||
}
|
||||
function onFocusIn(args) {
|
||||
jQuery.addEventLog("Autocomplete is in <span class='eventTitle'>focus</span>. ");
|
||||
}
|
||||
function onFocusOut(args) {
|
||||
jQuery.addEventLog("Autocomplete is out of <span class='eventTitle'>focus</span>.");
|
||||
}
|
||||
function onSelect(args) {
|
||||
jQuery.addEventLog("The value '" + args.value + "' has been <span class='eventTitle'>selected</span>.");
|
||||
}
|
||||
function onChange(args) {
|
||||
jQuery.addEventLog("The value has been <span class='eventTitle'>changed</span> to '" + args.value + "'.");
|
||||
}
|
||||
function onOpen(args) {
|
||||
jQuery.addEventLog("Suggestion List has been <span class='eventTitle'>opened</span>.");
|
||||
}
|
||||
function onClose(args) {
|
||||
jQuery.addEventLog("Suggestion List has been <span class='eventTitle'>closed</span>.");
|
||||
}
|
||||
function onClear() {
|
||||
jQuery.clearEventLog();
|
||||
}
|
||||
</script>
|
||||
}
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
@section SampleHeading{
|
||||
<span class="sampleName">Autocomplete / Grouping</span>}
|
||||
@section MetaTags{
|
||||
<meta name="description" content="This example demonstrates grouping items in the Syncfusion ASP.NET Core Autocomplete and providing a header for each set of groups in the suggestion list.">
|
||||
}
|
||||
@section ControlsSection{
|
||||
<div class="frame">
|
||||
<div class="control">
|
||||
|
||||
<ej-autocomplete id="groupingCountry" datasource="ViewBag.datasource" items-count="7" width="100%" filter-type="@FilterOperatorType.Contains" highlight-search="true" watermark-text="Select a country">
|
||||
<e-autocomplete-fields group-by="category" />
|
||||
</ej-autocomplete>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
@section SampleHeading{
|
||||
<span class="sampleName">Autocomplete / Keyboard Interaction</span>}
|
||||
@section MetaTags{
|
||||
<meta name="description" content="This example demonstrates how to access the Syncfusion ASP.NET Core Autocomplete control functionalities using keyboard interactions.">
|
||||
}
|
||||
@section ControlsSection{
|
||||
<div class="frame">
|
||||
<div class="control">
|
||||
<ej-autocomplete id="keyboard" datasource="ViewBag.datasource" width="100%" watermark-text="Choose skills" multi-select-mode="@MultiSelectModeTypes.Delimiter"></ej-autocomplete>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
@section PropertiesSection{
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Alt + j
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
Focuses the control
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Up
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
Moves to previous item
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Down
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
Moves to next item
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Enter
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
Selects the focused item
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Esc
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
Closes the popup
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
@section ScriptSection{
|
||||
<script type="text/javascript" class="jsScript">
|
||||
$(function () {
|
||||
$("#sampleProperties").ejPropertiesPanel();
|
||||
$(document).on("keydown", function (e) {
|
||||
if (e.altKey && e.keyCode === 74) { // j- key code.
|
||||
$("#keyboard").focus();
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
}
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
@section SampleHeading{
|
||||
<span class="sampleName">Autocomplete / Methods</span>}
|
||||
@section MetaTags{
|
||||
<meta name="description" content="This example demonstrates how to disable and get the selected value in the Syncfusion ASP.NET Core Autocomplete component.">
|
||||
}
|
||||
@section ControlsSection{
|
||||
<div class="frame">
|
||||
<div class="control">
|
||||
|
||||
<ej-autocomplete id="selectCountry" datasource="ViewBag.datasource" width="100%" watermark-text="Select a country">
|
||||
<e-autocomplete-fields key="key" />
|
||||
</ej-autocomplete>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
@section PropertiesSection{
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<ej-toggle-button id="check21" width="105px" default-text="Disable" active-text="Enable"click="changeState"/>
|
||||
</div>
|
||||
<div class="col-md-12">
|
||||
<ej-button id="getValue" width="105px" text="Get value" click="btnClick"/>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
@section ScriptSection{
|
||||
<script type="text/javascript" class="jsScript">
|
||||
var autocomplete;
|
||||
$(function () {
|
||||
$("#sampleProperties").ejPropertiesPanel();
|
||||
autocomplete = $('#selectCountry').data("ejAutocomplete");
|
||||
});
|
||||
function changeState(args) {
|
||||
autocomplete = $('#selectCountry').data("ejAutocomplete");
|
||||
if (args.isChecked) autocomplete.disable();
|
||||
else autocomplete.enable();
|
||||
}
|
||||
function btnClick() {
|
||||
alert("Current value is : " + autocomplete.getValue());
|
||||
}
|
||||
</script>
|
||||
}
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
@section SampleHeading{
|
||||
<span class="sampleName">Autocomplete / Multiple Values</span>}
|
||||
@section MetaTags{
|
||||
<meta name="description" content="This example demonstrates using the Syncfusion ASP.NET Core Autocomplete component to select multiple values from the suggestion list.">
|
||||
}
|
||||
@section ControlsSection{
|
||||
<div class="frame">
|
||||
<div class="row">
|
||||
<div class="control">
|
||||
<span class="txt">Using Delimiter</span>
|
||||
|
||||
<ej-autocomplete id="delimit" datasource="ViewBag.datasource" width="100%" multi-select-mode="@MultiSelectModeTypes.Delimiter" show-popup-button="true"></ej-autocomplete>
|
||||
|
||||
</div>
|
||||
<div class="control">
|
||||
<span class="txt">Using VisualMode</span>
|
||||
<ej-autocomplete id="visualmode" datasource="ViewBag.datasource" width="100%" multi-select-mode="@MultiSelectModeTypes.VisualMode" show-popup-button="true"></ej-autocomplete>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
@section StyleSection{
|
||||
<style type="text/css">
|
||||
.frame
|
||||
{
|
||||
height: 150px;
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
.control
|
||||
{
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.control:first-child
|
||||
{
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.txt
|
||||
{
|
||||
display: block;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
</style>
|
||||
}
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
@section SampleHeading{
|
||||
<span class="sampleName">Autocomplete / Rtl</span>}
|
||||
@section MetaTags{
|
||||
<meta name="description" content="This example demonstrates how the suggestion list content is displayed from right to left in the Syncfusion ASP.NET Core Autocomplete component.">
|
||||
}
|
||||
@section ControlsSection{
|
||||
<div class="frame">
|
||||
<div class="control">
|
||||
<ej-autocomplete id="selectCar" width="100%" datasource="ViewBag.datasource" enable-rtl="true" watermark-text="Select a car"></ej-autocomplete>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
@section SampleHeading{
|
||||
<span class="sampleName">Autocomplete / Template</span>}
|
||||
@section MetaTags{
|
||||
<meta name="description" content="This example demonstrates the template support in the Syncfusion ASP.NET Core Autocomplete component for customizing the suggestion list.">
|
||||
}
|
||||
@section ControlsSection{
|
||||
<div class="frame">
|
||||
<div class="control">
|
||||
<ej-autocomplete id="selectCountry" width="100%" datasource="ViewBag.datasource" template="<div class='flag ${key}'></div><div class='txt'> ${text} </div>" watermark-text="Select a country"></ej-autocomplete>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
@section StyleSection{
|
||||
<link href="@Url.Content("~/css/Samples/AtcTemplate.css")" rel="stylesheet" />
|
||||
<style>
|
||||
.flag
|
||||
{
|
||||
background: url("../images/autocomplete/flags.png") no-repeat;
|
||||
float: left;
|
||||
height: 15px;
|
||||
margin-right: 10px;
|
||||
margin-top: 3px;
|
||||
width: 25px;
|
||||
}
|
||||
|
||||
.txt
|
||||
{
|
||||
display: table-cell;
|
||||
height: 20px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
</style>
|
||||
}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
@using Syncfusion.JavaScript;
|
||||
@using Syncfusion.JavaScript.DataVisualization;
|
||||
|
||||
@section SampleHeading{
|
||||
<span class="sampleName">Default Functionalities</span>
|
||||
}
|
||||
|
||||
@section ControlsSection{
|
||||
<ej-barcode id="CodaBarcode" text="12345678" symbology-type=Codabar />
|
||||
}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
@using Syncfusion.JavaScript;
|
||||
@using Syncfusion.JavaScript.DataVisualization;
|
||||
|
||||
@section SampleHeading{
|
||||
<span class="sampleName">Default Functionalities</span>
|
||||
}
|
||||
|
||||
@section ControlsSection{
|
||||
<ej-barcode id="11Barcode" text="01234567" symbology-type=Code11 />
|
||||
}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
@using Syncfusion.JavaScript;
|
||||
@using Syncfusion.JavaScript.DataVisualization;
|
||||
|
||||
@section SampleHeading{
|
||||
<span class="sampleName">Default Functionalities</span>
|
||||
}
|
||||
|
||||
@section ControlsSection{
|
||||
<ej-barcode id="93ExtBarcode" text="SYNCFUSION" symbology-type=Code128A />
|
||||
}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
@using Syncfusion.JavaScript;
|
||||
@using Syncfusion.JavaScript.DataVisualization;
|
||||
|
||||
@section SampleHeading{
|
||||
<span class="sampleName">Default Functionalities</span>
|
||||
}
|
||||
|
||||
@section ControlsSection{
|
||||
<ej-barcode id="128BBarcode" text="SYNCFUSION" symbology-type=Code128B />
|
||||
}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
@using Syncfusion.JavaScript;
|
||||
@using Syncfusion.JavaScript.DataVisualization;
|
||||
|
||||
@section SampleHeading{
|
||||
<span class="sampleName">Default Functionalities</span>
|
||||
}
|
||||
|
||||
@section ControlsSection{
|
||||
<ej-barcode id="128CBarcode" text="01234567" symbology-type=Code128C />
|
||||
}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
@using Syncfusion.JavaScript;
|
||||
@using Syncfusion.JavaScript.DataVisualization;
|
||||
|
||||
@section SampleHeading{
|
||||
<span class="sampleName">Default Functionalities</span>
|
||||
}
|
||||
|
||||
@section ControlsSection{
|
||||
<ej-barcode id="32Barcode" text="01234567" symbology-type=Code32 />
|
||||
}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
@using Syncfusion.JavaScript;
|
||||
@using Syncfusion.JavaScript.DataVisualization;
|
||||
|
||||
@section SampleHeading{
|
||||
<span class="sampleName">Default Functionalities</span>
|
||||
}
|
||||
|
||||
@section ControlsSection{
|
||||
<ej-barcode id="39Barcode" text="SYNCFUSION" symbology-type=Code39 />
|
||||
}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
@using Syncfusion.JavaScript;
|
||||
@using Syncfusion.JavaScript.DataVisualization;
|
||||
|
||||
@section SampleHeading{
|
||||
<span class="sampleName">Default Functionalities</span>
|
||||
}
|
||||
|
||||
@section ControlsSection{
|
||||
<ej-barcode id="39ExtBarcode" text="SYNCFUSION" symbology-type=Code39Extended />
|
||||
}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
@using Syncfusion.JavaScript;
|
||||
@using Syncfusion.JavaScript.DataVisualization;
|
||||
|
||||
@section SampleHeading{
|
||||
<span class="sampleName">Default Functionalities</span>
|
||||
}
|
||||
|
||||
@section ControlsSection{
|
||||
<ej-barcode id="93Barcode" text="SYNCFUSION" symbology-type=Code93 />
|
||||
}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
@using Syncfusion.JavaScript;
|
||||
@using Syncfusion.JavaScript.DataVisualization;
|
||||
|
||||
@section SampleHeading{
|
||||
<span class="sampleName">Default Functionalities</span>
|
||||
}
|
||||
|
||||
@section ControlsSection{
|
||||
<ej-barcode id="93ExtBarcode" text="SYNCFUSION" symbology-type=Code93Extended />
|
||||
}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
@using Syncfusion.JavaScript;
|
||||
@using Syncfusion.JavaScript.DataVisualization;
|
||||
|
||||
@section SampleHeading{
|
||||
<span class="sampleName">Default Functionalities</span>
|
||||
}
|
||||
|
||||
@section ControlsSection{
|
||||
<ej-barcode id="DataMatrixBarcode" text="SYNCFUSION" symbology-type=DataMatrix x-dimension="8"/>
|
||||
}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
@using Syncfusion.JavaScript;
|
||||
@using Syncfusion.JavaScript.DataVisualization;
|
||||
|
||||
@section SampleHeading{
|
||||
<span class="sampleName">Default Functionalities</span>
|
||||
}
|
||||
|
||||
@section ControlsSection{
|
||||
<ej-barcode id="DefaultBarcode" text="//www.syncfusion.com" x-dimension="8"/>
|
||||
}
|
||||
|
|
@ -0,0 +1,134 @@
|
|||
@using Syncfusion.JavaScript;
|
||||
@using Syncfusion.JavaScript.DataVisualization;
|
||||
|
||||
@section SampleHeading{
|
||||
<span class="sampleName">Default Functionalities</span>
|
||||
}
|
||||
@section MetaTags{
|
||||
<meta name="description" content="This sample demonstrates the default rendering of the Syncfusion ASP.NET Web Forms Bullet graph control.">
|
||||
}
|
||||
@section ControlsSection{
|
||||
<div class="Common">
|
||||
<center>
|
||||
<div>
|
||||
<ej-bullet-graph id="Bullet2" quantitative-scale-length="475" width="595" qualitative-range-size="32" orientation="@Orientation.Horizontal" flow-direction="@FlowDirection.Forward">
|
||||
<e-bullet-tooltip-settings visible="true" template="Tooltip">
|
||||
</e-bullet-tooltip-settings>
|
||||
<e-qualitative-ranges>
|
||||
<e-qualitative-range range-end="4.3"></e-qualitative-range>
|
||||
<e-qualitative-range range-end="7.3"></e-qualitative-range>
|
||||
<e-qualitative-range range-end="10"></e-qualitative-range>
|
||||
</e-qualitative-ranges>
|
||||
<e-quantitative-scale-settings tick-position="@TickPosition.Far" maximum="10" minimum="0" interval="1" minor-ticks-per-interval="4">
|
||||
<e-location x="110" y="10"></e-location>
|
||||
<e-major-tick-settings size="13" width="1"></e-major-tick-settings>
|
||||
<e-minor-tick-settings size="5" width="1"></e-minor-tick-settings>
|
||||
<e-label-settings position="@LabelPosition.Below" offset="14" size="10"></e-label-settings>
|
||||
<e-featured-measure-settings width="6"></e-featured-measure-settings>
|
||||
<e-comparative-measure-settings width="5"></e-comparative-measure-settings>
|
||||
<e-feature-measures><e-feature-measure comparative-measure="6.7" value="8" category=""></e-feature-measure></e-feature-measures>
|
||||
</e-quantitative-scale-settings>
|
||||
<e-caption-settings text-angle="0" text="Revenue YTD"><e-location x="17" y="20"></e-location>
|
||||
<e-sub-title text-angle="0" text="$ in Thousands">
|
||||
<e-location x="10" y="35"></e-location>
|
||||
<e-bullet-font font-family="Segeo UI"></e-bullet-font>
|
||||
</e-sub-title>
|
||||
</e-caption-settings>
|
||||
</ej-bullet-graph>
|
||||
</div>
|
||||
<div>
|
||||
<ej-bullet-graph id="Bullet3" quantitative-scale-length="475" width="595" qualitative-range-size="32" orientation="@Orientation.Horizontal" flow-direction="@FlowDirection.Forward">
|
||||
<e-qualitative-ranges>
|
||||
<e-qualitative-range range-end="-4"></e-qualitative-range>
|
||||
<e-qualitative-range range-end="3"></e-qualitative-range>
|
||||
<e-qualitative-range range-end="10"></e-qualitative-range>
|
||||
</e-qualitative-ranges>
|
||||
<e-caption-settings text-angle="0" text="Profit">
|
||||
<e-location x="60" y="25"></e-location>
|
||||
<e-bullet-font font-family="Segeo UI"></e-bullet-font>
|
||||
</e-caption-settings>
|
||||
<e-quantitative-scale-settings tick-position="@TickPosition.Far" maximum="10" minimum="-10" interval="2" minor-ticks-per-interval="4">
|
||||
<e-location x="110" y="10"></e-location>
|
||||
<e-major-tick-settings size="13" width="1"></e-major-tick-settings>
|
||||
<e-minor-tick-settings size="5" width="1"></e-minor-tick-settings>
|
||||
<e-label-settings label-suffix="%" position="@LabelPosition.Below" offset="14" size="10"></e-label-settings>
|
||||
<e-featured-measure-settings width="6"></e-featured-measure-settings>
|
||||
<e-comparative-measure-settings width="5"></e-comparative-measure-settings>
|
||||
<e-feature-measures><e-feature-measure comparative-measure="6.7" value="8"></e-feature-measure></e-feature-measures>
|
||||
</e-quantitative-scale-settings>
|
||||
</ej-bullet-graph>
|
||||
</div>
|
||||
<div>
|
||||
<ej-bullet-graph id="Bullet4" width="620" quantitative-scale-length="475" qualitative-range-size="32" orientation="@Orientation.Horizontal" flow-direction="@FlowDirection.Backward">
|
||||
<e-bullet-tooltip-settings visible="true"></e-bullet-tooltip-settings>
|
||||
<e-qualitative-ranges>
|
||||
<e-qualitative-range range-end="-4.3"></e-qualitative-range>
|
||||
<e-qualitative-range range-end="4.3"></e-qualitative-range>
|
||||
<e-qualitative-range range-end="10"></e-qualitative-range>
|
||||
</e-qualitative-ranges>
|
||||
<e-caption-settings text-angle="0" text="Expenses">
|
||||
<e-location x="38" y="25"></e-location>
|
||||
<e-bullet-font font-family="Segeo UI"></e-bullet-font>
|
||||
</e-caption-settings>
|
||||
<e-quantitative-scale-settings tick-position="@TickPosition.Far" maximum="10" minimum="-10" interval="2" minor-ticks-per-interval="4">
|
||||
<e-location x="125" y="10"></e-location>
|
||||
<e-major-tick-settings size="13" width="1"></e-major-tick-settings>
|
||||
<e-minor-tick-settings size="5" width="1"></e-minor-tick-settings>
|
||||
<e-label-settings label-suffix="%" position="@LabelPosition.Below" offset="14" size="10"></e-label-settings>
|
||||
<e-featured-measure-settings width="6"></e-featured-measure-settings>
|
||||
<e-comparative-measure-settings width="5"></e-comparative-measure-settings>
|
||||
<e-feature-measures><e-feature-measure comparative-measure="-2" value="-2"></e-feature-measure></e-feature-measures>
|
||||
</e-quantitative-scale-settings>
|
||||
</ej-bullet-graph>
|
||||
</div>
|
||||
<div>
|
||||
<ej-bullet-graph id="Bullet5" width="620" quantitative-scale-length="475" qualitative-range-size="32" orientation="@Orientation.Horizontal" flow-direction="@FlowDirection.Backward">
|
||||
<e-bullet-tooltip-settings visible="true" template="Tooltip"></e-bullet-tooltip-settings>
|
||||
<e-qualitative-ranges>
|
||||
<e-qualitative-range range-end="4.3"></e-qualitative-range>
|
||||
<e-qualitative-range range-end="7.3"></e-qualitative-range>
|
||||
<e-qualitative-range range-end="10"></e-qualitative-range>
|
||||
</e-qualitative-ranges>
|
||||
<e-caption-settings text-angle="0" text="Revenue YTD">
|
||||
<e-location x="17" y="20"></e-location>
|
||||
<e-bullet-font font-family="Segeo UI"></e-bullet-font>
|
||||
<e-sub-title text-angle="0" text="$ in Thousands"><e-location x="10" y="35"></e-location></e-sub-title>
|
||||
</e-caption-settings>
|
||||
<e-quantitative-scale-settings tick-position="@TickPosition.Far" maximum="10" minimum="0" interval="1" minor-ticks-per-interval="4">
|
||||
<e-location x="125" y="10"></e-location>
|
||||
<e-major-tick-settings size="13" width="1"></e-major-tick-settings>
|
||||
<e-minor-tick-settings size="5" width="1"></e-minor-tick-settings>
|
||||
<e-label-settings label-suffix="K" label-prefix="$" position="@LabelPosition.Below" offset="14" size="10"></e-label-settings>
|
||||
<e-featured-measure-settings width="5"></e-featured-measure-settings>
|
||||
<e-comparative-measure-settings width="5"></e-comparative-measure-settings>
|
||||
<e-feature-measures><e-feature-measure comparative-measure="6.7" value="8" category=""></e-feature-measure></e-feature-measures>
|
||||
</e-quantitative-scale-settings>
|
||||
</ej-bullet-graph>
|
||||
</div>
|
||||
</center>
|
||||
</div>
|
||||
|
||||
<div id="Tooltip" style="display: none; width: 125px; padding-top: 10px; padding-bottom: 10px">
|
||||
<div style="font-weight: bold">
|
||||
Sales
|
||||
</div>
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
Current
|
||||
</td>
|
||||
<td>
|
||||
: {{:currentValue}}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
Target
|
||||
</td>
|
||||
<td>
|
||||
: {{:targetValue}}
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
}
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
@section MetaTags{
|
||||
<meta name="description" content="This example demonstrates the default functionalities of the Button control and its properties like size, contenttype and showroundedcorner in a ASP.NET Core.">
|
||||
}
|
||||
|
||||
@section SampleHeading{
|
||||
<span class="sampleName">Button / Default Functionalities</span>}
|
||||
@section ControlsSection{
|
||||
<div class="frame">
|
||||
<div class="control">
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
Button Normal
|
||||
</td>
|
||||
<td class="btnsht">
|
||||
<ej-button id="button11" text="Login" size="@ButtonSize.Normal" show-rounded-corner="true" content-type="@ContentType.ImageOnly" prefix-icon="e-icon e-handup" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
Button Mini
|
||||
</td>
|
||||
<td class="btnsht">
|
||||
<ej-button id="button21" text="Login" size="@ButtonSize.Mini" show-rounded-corner="true" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
Button Small
|
||||
</td>
|
||||
<td class="btnsht">
|
||||
<ej-button id="button31" text="Login" size="@ButtonSize.Small" show-rounded-corner="true" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
Button Medium
|
||||
</td>
|
||||
<td class="btnsht">
|
||||
<ej-button id="button41" text="Login" show-rounded-corner="true" size="@ButtonSize.Medium"/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
Button Large
|
||||
</td>
|
||||
<td class="btnsht">
|
||||
<ej-button id="button51" text="Login" show-rounded-corner="true" size="@ButtonSize.Large" content-type="@ContentType.TextAndImage" prefix-icon="e-icon e-handup" />
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
@section StyleSection{
|
||||
<style>
|
||||
.frame {
|
||||
width: 30%;
|
||||
}
|
||||
</style>
|
||||
}
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
@section MetaTags{
|
||||
<meta name="description" content="This example demonstrates the default functionalities of the ToggleButton and its various property like size,text, showroundedcorner in a ASP.NET Core">
|
||||
}
|
||||
@section SampleHeading{
|
||||
<span class="sampleName">Button / Toggle Button</span>}
|
||||
@section ControlsSection{
|
||||
<div class="frame">
|
||||
<div class="control">
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
Toggle button Normal
|
||||
</td>
|
||||
<td class="btnsht">
|
||||
<ej-toggle-button id="check11" size="@ButtonSize.Normal" show-rounded-corner="true" content-type="@ContentType.ImageOnly" default-prefix-icon="e-icon e-mediaplay" active-prefix-icon="e-icon e-medianext" />
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
Toggle button Mini
|
||||
</td>
|
||||
<td class="btnsht">
|
||||
<ej-toggle-button id="check21" size="@ButtonSize.Mini" show-rounded-corner="true" default-text="Play" active-text="Stop" />
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
Toggle button Small
|
||||
</td>
|
||||
<td class="btnsht">
|
||||
<ej-toggle-button id="check31" size="@ButtonSize.Small" show-rounded-corner="true" default-text="Play" active-text="Stop" />
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
Toggle button Medium
|
||||
</td>
|
||||
<td class="btnsht">
|
||||
<ej-toggle-button id="check41" size="@ButtonSize.Medium" show-rounded-corner="true" default-text="Play" active-text="Stop" />
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
Toggle button Large
|
||||
</td>
|
||||
<td class="btnsht">
|
||||
<ej-toggle-button id="check51" size="@ButtonSize.Large" show-rounded-corner="true" content-type="@ContentType.TextAndImage" default-text="Play" active-text="Stop" default-prefix-icon="e-icon e-mediaplay" active-prefix-icon="e-icon e-medianext" />
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
@section StyleSection{
|
||||
<style>
|
||||
.frame {
|
||||
width: 35%;
|
||||
}
|
||||
</style>
|
||||
}
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
@section MetaTags{
|
||||
<meta name="description" content=" This example demonstrates a simple, mobile-friendly and responsive ASP.NET Core checkbox control to shows the checked, unchecked, and indeterminate states of checkbox.">
|
||||
}
|
||||
|
||||
@section SampleHeading{
|
||||
<span class="sampleName">Button / Check Boxes</span>}
|
||||
@section ControlsSection{
|
||||
<div class="frame">
|
||||
<div class="control">
|
||||
<div class="chkalign">
|
||||
<br />
|
||||
Hobbies
|
||||
<br />
|
||||
<br />
|
||||
<table>
|
||||
<tr>
|
||||
<td class="chkrad">
|
||||
<ej-check-box id="check1" css-class="nodetext" text="Music" value="Music" />
|
||||
</td>
|
||||
<td class="chkrad">
|
||||
<ej-check-box id="Checkbox3" css-class="nodetext" text="Sports" value="Sports" />
|
||||
</td>
|
||||
<td class="chkrad">
|
||||
<ej-check-box id="Checkbox4" css-class="nodetext" text="Bike Riding" value="Bike Riding" />
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<br />
|
||||
<br />
|
||||
Favorite Search Engines<br />
|
||||
<br />
|
||||
<table>
|
||||
<tr>
|
||||
<td class="chkrad">
|
||||
<ej-check-box id="Checkbox1" css-class="nodetext" size="@Size.Medium" text="Google" value="Google" />
|
||||
</td>
|
||||
<td class="chkrad">
|
||||
<ej-check-box id="Checkbox5" css-class="nodetext" size="@Size.Medium" text="Yahoo" value="Yahoo" />
|
||||
</td>
|
||||
<td class="chkrad">
|
||||
<ej-check-box id="Checkbox6" css-class="nodetext" size="@Size.Medium" text="Bing" value="Bing" />
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<br />
|
||||
<br />
|
||||
Favorite Social networks<br />
|
||||
<br />
|
||||
<table>
|
||||
<tr>
|
||||
<td class="chkrad">
|
||||
<ej-check-box id="Checkbox2" css-class="nodetext" size="@Size.Medium" text="Facebook" value="Facebook" enable-tri-state="true" />
|
||||
</td>
|
||||
<td class="chkrad">
|
||||
<ej-check-box id="Checkbox7" css-class="nodetext" size="@Size.Medium" text="GPlus" value="GPlus" enable-tri-state="true" />
|
||||
</td>
|
||||
<td class="chkrad">
|
||||
<ej-check-box id="Checkbox8" css-class="nodetext" size="@Size.Medium" text="Twitter" value="Twitter" enable-tri-state="true" check-state="@CheckState.Indeterminate"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<br />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
@section StyleSection{
|
||||
<style>
|
||||
.frame {
|
||||
width: 50%;
|
||||
}
|
||||
</style>
|
||||
}
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
|
||||
@section MetaTags{
|
||||
<meta name="description" content="CheckBox for ASP.NET Core with the strongly typed extension support. Value is set from the code behind by invoking CheckBoxFor helper">
|
||||
}
|
||||
|
||||
@section SampleHeading{
|
||||
<span class="sampleName">Button / CheckBoxesFor</span>}
|
||||
|
||||
@model samplebrowser.Controllers.ButtonController.checkModel
|
||||
|
||||
|
||||
@section ControlsSection{
|
||||
<div class="frame">
|
||||
<div class="control">
|
||||
<div class="chkalign">
|
||||
<br />
|
||||
Hobbies
|
||||
<br />
|
||||
<br />
|
||||
<table>
|
||||
<tr>
|
||||
<td class="chkrad">
|
||||
<ej-check-box id="check1" css-class="nodetext" ej-for="@Model.isChecked" size="@Size.Small" text="Music" value="Music" />
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<br />
|
||||
<br />
|
||||
Favorite Search Engines<br />
|
||||
<br />
|
||||
<table>
|
||||
<tr>
|
||||
<td class="chkrad">
|
||||
<ej-check-box id="Checkbox1" css-class="nodetext" text="Google" value="Google" />
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<br />
|
||||
<br />
|
||||
Favorite Social networks<br />
|
||||
<br />
|
||||
<table>
|
||||
<tr>
|
||||
<td class="chkrad">
|
||||
<ej-check-box id="Checkbox8" css-class="nodetext" ej-for="@Model.isChecked" size="@Size.Medium" text="Twitter" value="Twitter" enable-tri-state="true" check-state="@CheckState.Indeterminate"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<br />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
@section StyleSection{
|
||||
<style>
|
||||
.frame {
|
||||
width: 25%;
|
||||
}
|
||||
</style>
|
||||
}
|
||||
|
|
@ -0,0 +1,181 @@
|
|||
@section MetaTags{
|
||||
<meta name="description" content="This example demonstrates the various events like clicked, open, change and select in a ASP.NET Core Button, ToggleButton, SplitButton, GroupButton controls">
|
||||
}
|
||||
@section SampleHeading{
|
||||
<span class="sampleName">Button / Events</span>}
|
||||
@section ControlsSection{
|
||||
<div class="frame">
|
||||
<div class="control">
|
||||
<table>
|
||||
<tr>
|
||||
<td class="btnsht">
|
||||
Button
|
||||
</td>
|
||||
<td class="btnsht">
|
||||
<ej-button id="buttonnormal" text="Save" size="@ButtonSize.Large" show-rounded-corner="true" create="btnLoad" click="btnClick"/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="btnsht">
|
||||
Toggle Button
|
||||
</td>
|
||||
<td class="btnsht">
|
||||
<ej-toggle-button id="TextOnly" size="@ButtonSize.Large" show-rounded-corner="true" default-text="Save" active-text="Delete" create="tglebtnLoad" click="tglebtnClick" change="tglebtnChange" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="btnsht">
|
||||
Split Button
|
||||
</td>
|
||||
<td class="splttd btnsht">
|
||||
<ej-split-button id="splitbuttonnormal" text="Save" size="@ButtonSize.Large" show-rounded-corner="true" target-id="menu1" create="spltbtnLoad" before-open="onFocusIn" click="spltbtnClick" item-mouse-over="spltbtnitmHover" item-mouse-out="spltbtnitmOut" item-selected="spltbtnitmSelected" open="spltbtnOpened" close="spltbtnClosed" />
|
||||
<ul id="menu1">
|
||||
<li><span>Open</span></li>
|
||||
<li><span>Save</span></li>
|
||||
<li><span>Delete</span></li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="btnsht">
|
||||
Group Button
|
||||
</td>
|
||||
<td class="btnsht">
|
||||
<ej-group-button id="GroupButton" width="215px" group-button-mode="@GroupButtonMode.RadioButton" height="40px" show-rounded-corner="true" select="grpbtnSelect" before-select="grpbtnBeforeSelect" create="grpbtnLoad" key-press="grpbtnKeyPress">
|
||||
<e-group-button-items>
|
||||
<e-group-button-item text="Save"></e-group-button-item>
|
||||
<e-group-button-item text="Open"></e-group-button-item>
|
||||
<e-group-button-item text="Delete"></e-group-button-item>
|
||||
</e-group-button-items>
|
||||
</ej-group-button>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
@section EventsDropdown{
|
||||
<ej-drop-down-list id="selectControls_input" show-checkbox="true" check-all ="true" target-id ="evntname" change="evtpropscheckedevent"></ej-drop-down-list>
|
||||
|
||||
<div id="evntname">
|
||||
<ul>
|
||||
<li>create</li>
|
||||
<li>beforeOpen</li>
|
||||
<li>beforeSelect</li>
|
||||
<li>click</li>
|
||||
<li>open</li>
|
||||
<li>change</li>
|
||||
<li>select</li>
|
||||
<li>keyPress</li>
|
||||
<li>itemMouseOver</li>
|
||||
<li>itemMouseOut</li>
|
||||
<li>itemSelected</li>
|
||||
<li>close</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
}
|
||||
@section ScriptSection{
|
||||
<script type="text/javascript">
|
||||
var btnObj, tglbtnObj, spltbtnObj, grpbtnObj;
|
||||
function btnLoad(e) {
|
||||
jQuery.addEventLog("Button has been <span class='eventTitle'>created</span>.");
|
||||
}
|
||||
function btnClick(e) {
|
||||
jQuery.addEventLog("Button has been <span class='eventTitle'>clicked</span>.");
|
||||
}
|
||||
function tglebtnLoad(e) {
|
||||
jQuery.addEventLog("ToggleButton has been <span class='eventTitle'>created</span>.");
|
||||
}
|
||||
function grpbtnLoad(e) {
|
||||
jQuery.addEventLog("Group Button has been <span class='eventTitle'>created</span>.");
|
||||
}
|
||||
function tglebtnClick(e) {
|
||||
jQuery.addEventLog("ToggleButton has been <span class='eventTitle'>clicked</span>.");
|
||||
}
|
||||
function tglebtnChange(e) {
|
||||
jQuery.addEventLog("ToggleButton value has been <span class='eventTitle'>changed</span> to " + e.isChecked + ".");
|
||||
}
|
||||
function spltbtnLoad(e) {
|
||||
jQuery.addEventLog("SplitButton has been <span class='eventTitle'>created</span>.");
|
||||
}
|
||||
function spltbtnClick(e) {
|
||||
jQuery.addEventLog("SplitButton has been <span class='eventTitle'>clicked</span>.");
|
||||
}
|
||||
function spltbtnOpened(e) {
|
||||
jQuery.addEventLog("SplitButton popup has been <span class='eventTitle'>Opened</span>.");
|
||||
}
|
||||
function onFocusIn(e) {
|
||||
jQuery.addEventLog("SplitButton popup has been <span class='eventTitle'>BeforeOpened</span>. ");
|
||||
}
|
||||
function spltbtnitmHover(e) {
|
||||
jQuery.addEventLog("SplitButton item <span class='eventTitle'>hovered-in</span>.");
|
||||
}
|
||||
function spltbtnitmOut(e) {
|
||||
jQuery.addEventLog("SplitButton item <span class='eventTitle'>hovered-out</span>.");
|
||||
}
|
||||
function spltbtnClosed(e) {
|
||||
jQuery.addEventLog("SplitButton popup has been <span class='eventTitle'>Closed</span>.");
|
||||
}
|
||||
function spltbtnitmSelected(e) {
|
||||
jQuery.addEventLog(e.text + " item has been <span class='eventTitle'>selected</span>.");
|
||||
}
|
||||
function grpbtnBeforeSelect(args) {
|
||||
jQuery.addEventLog("Group Button <span class='eventTitle'>BeforeActive</span> event is fired for Index " + args.index + ".");
|
||||
}
|
||||
function grpbtnSelect(args) {
|
||||
jQuery.addEventLog("Group Button <span class='eventTitle'>Active</span> event is fired for Index " + args.index + ".");
|
||||
}
|
||||
function grpbtnKeyPress(args) {
|
||||
jQuery.addEventLog("Group Button <span class='eventTitle'>Focus</span> Changed to the index" + args.index + ".");
|
||||
}
|
||||
function onClear() {
|
||||
jQuery.clearEventLog();
|
||||
}
|
||||
|
||||
function evtpropscheckedevent(args) {
|
||||
btnObj = $("#buttonnormal").data("ejButton");
|
||||
tglbtnObj = $("#TextOnly").data("ejToggleButton");
|
||||
spltbtnObj = $("#splitbuttonnormal").data("ejSplitButton");
|
||||
grpbtnObj = $("#GroupButton").data("ejGroupButton");
|
||||
if (args.isChecked) {
|
||||
switch (args.selectedText) {
|
||||
case "create":
|
||||
btnObj.option(args.selectedText, "btnLoad");
|
||||
tglbtnObj.option(args.selectedText, "tglebtnLoad");
|
||||
spltbtnObj.option(args.selectedText, "spltbtnLoad");
|
||||
grpbtnObj.option(args.selectedText, "grpbtnLoad");
|
||||
break;
|
||||
case "click":
|
||||
btnObj.option(args.selectedText, "btnClick");
|
||||
tglbtnObj.option(args.selectedText, "tglebtnClick");
|
||||
spltbtnObj.option(args.selectedText, "spltbtnClick");
|
||||
break;
|
||||
case "beforeOpen": spltbtnObj.option(args.selectedText, "onFocusIn"); break;
|
||||
case "open": spltbtnObj.option(args.selectedText, "spltbtnOpened"); break;
|
||||
case "change": tglbtnObj.option(args.selectedText, "tglebtnChange"); break;
|
||||
case "itemMouseOver": spltbtnObj.option(args.selectedText, "spltbtnitmHover"); break;
|
||||
case "itemMouseOut": spltbtnObj.option(args.selectedText, "spltbtnitmOut"); break;
|
||||
case "itemSelected": spltbtnObj.option(args.selectedText, "spltbtnitmSelected"); break;
|
||||
case "close": spltbtnObj.option(args.selectedText, "spltbtnClosed"); break;
|
||||
case "select": grpbtnObj.option(args.selectedText, "grpbtnSelect"); break;
|
||||
case "beforeSelect": grpbtnObj.option(args.selectedText, "grpbtnBeforeSelect"); break;
|
||||
case "keyPress": grpbtnObj.option(args.selectedText, "grpbtnKeyPress"); break;
|
||||
}
|
||||
}
|
||||
else {
|
||||
btnObj.option(args.selectedText, null);
|
||||
tglbtnObj.option(args.selectedText, null);
|
||||
spltbtnObj.option(args.selectedText, null);
|
||||
grpbtnObj.option(args.selectedText, null);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
}
|
||||
@section StyleSection{
|
||||
<style>
|
||||
.frame {
|
||||
width: 50%;
|
||||
}
|
||||
</style>
|
||||
}
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
@section MetaTags{
|
||||
<meta name="description" content="This example demonstrates the default functionalities of the GroupButton and its various property like height, width, showroundedcorner, groupbuttonmode in a ASP.NET Core">
|
||||
}
|
||||
|
||||
@section SampleHeading{
|
||||
<span class="sampleName">Button / Group Buttons</span>}
|
||||
@section ControlsSection{
|
||||
<div class="frame">
|
||||
<div class="control">
|
||||
@* <label>Appointment View</label>*@
|
||||
<div class="element">
|
||||
<ej-group-button id="GroupButton" width="100%" group-button-mode="@GroupButtonMode.RadioButton" height="40px" show-rounded-corner="true">
|
||||
<e-group-button-items>
|
||||
<e-group-button-item text="Day"></e-group-button-item>
|
||||
<e-group-button-item text="Week"></e-group-button-item>
|
||||
<e-group-button-item text="Month"></e-group-button-item>
|
||||
</e-group-button-items>
|
||||
</ej-group-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
@section StyleSection{
|
||||
<style>
|
||||
.frame, .control {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.frame .control, label {
|
||||
display: table;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.element {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
}
|
||||
|
|
@ -0,0 +1,119 @@
|
|||
@section MetaTags{
|
||||
<meta name="description" content="This example demonstrates the various methods like enable and disable in a ASP.NET Core Button, ToggleButton, SplitButton">
|
||||
}
|
||||
@section SampleHeading{
|
||||
<span class="sampleName">Button / Methods</span>}
|
||||
@section ControlsSection{
|
||||
<div class="frame">
|
||||
<div class="control">
|
||||
<table>
|
||||
<tr>
|
||||
<td class="btnsht">
|
||||
Button
|
||||
</td>
|
||||
<td class="btnsht">
|
||||
<ej-button id="buttonnormal" text="Button" size="@ButtonSize.Large" show-rounded-corner="true" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="btnsht">
|
||||
Toggle Button
|
||||
</td>
|
||||
<td class="btnsht">
|
||||
<ej-toggle-button id="TextOnly" size="@ButtonSize.Large" show-rounded-corner="true" default-text="Play" active-text="Stop" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="btnsht">
|
||||
Split Button
|
||||
</td>
|
||||
<td class="splttd btnsht">
|
||||
<ej-split-button id="splitbuttonnormal" text="Save" size="@ButtonSize.Large" show-rounded-corner="true" target-id="menu1"/>
|
||||
<ul id="menu1">
|
||||
<li><span>Open...</span></li>
|
||||
<li><span>Save</span></li>
|
||||
<li><span>Delete</span></li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="btnsht">
|
||||
Dropdown Button
|
||||
</td>
|
||||
<td class="splttd btnsht">
|
||||
<ej-split-button id="dropbtnlarge" text="Save" size="@ButtonSize.Large" show-rounded-corner="true" target-id="menu2" button-mode ="@ButtonMode.Dropdown"/>
|
||||
<ul id="menu2">
|
||||
<li><span>Open...</span></li>
|
||||
<li><span>Save</span></li>
|
||||
<li><span>Delete</span></li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
<div id="arrowTarget">
|
||||
<ul>
|
||||
<li value="right">Right</li>
|
||||
<li value="left">Left</li>
|
||||
<li value="top">Top</li>
|
||||
<li value="bottom">Bottom</li>
|
||||
</ul>
|
||||
</div>
|
||||
@section PropertiesSection{
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Disable\Enable
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<ej-toggle-button id="btnchkunchk" default-text ="Disable" width="119px" active-text ="Enable" css-class ="e-togglebtn" change="onCheckUncheckAll"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3">ArrowPosition</div>
|
||||
<div class="col-md-3">
|
||||
<ej-drop-down-list id="arrowpos" target-id ="arrowTarget" width="120px" selected-item-index ="0" change="onArrowChange"></ej-drop-down-list>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
@section ScriptSection{
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$("#sampleProperties").ejPropertiesPanel();
|
||||
});
|
||||
var btnobject1, btnobject2, btnobject3, btnobject4;
|
||||
function onCheckUncheckAll(args) {
|
||||
btnobject1 = $("#buttonnormal").data("ejButton");
|
||||
btnobject2 = $("#TextOnly").data("ejToggleButton");
|
||||
btnobject3 = $("#splitbuttonnormal").data("ejSplitButton");
|
||||
btnobject4 = $("#dropbtnlarge").data("ejSplitButton");
|
||||
if (args.isChecked) {
|
||||
btnobject1.disable();
|
||||
btnobject2.disable();
|
||||
btnobject3.disable();
|
||||
btnobject4.disable();
|
||||
}
|
||||
else {
|
||||
btnobject1.enable();
|
||||
btnobject2.enable();
|
||||
btnobject3.enable();
|
||||
btnobject4.enable();
|
||||
}
|
||||
}
|
||||
function onArrowChange(args) {
|
||||
if (args.value == "top" || args.value == "bottom")
|
||||
$(".splttd").css("padding", "6px 0 6px 1px");
|
||||
else
|
||||
$(".splttd").css("padding", "0 0 0 1px");
|
||||
$(".e-splitbutton").ejSplitButton({ "arrowPosition": args.value });
|
||||
}
|
||||
</script>
|
||||
}
|
||||
@section StyleSection{
|
||||
<style>
|
||||
.frame {
|
||||
width: 50%;
|
||||
}
|
||||
</style>
|
||||
}
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
@section MetaTags{
|
||||
<meta name="description" content="This example demonstrates the default functionalities of the RadioButton and its various property like size, text, checked, enabled and value in a ASP.NET Core">
|
||||
}
|
||||
|
||||
@section SampleHeading{
|
||||
<span class="sampleName">Button / Radio Buttons</span>}
|
||||
@section ControlsSection{
|
||||
<div class="frame">
|
||||
<div class="control">
|
||||
<div class="radioalign">
|
||||
<br />
|
||||
Category<br />
|
||||
<br />
|
||||
<table>
|
||||
<tr>
|
||||
<td class="chkrad">
|
||||
<ej-radio-button id="Radio1" name="small" size="@RadioButtonSize.Small" checked="true" enabled="true" text="Fresher" value="Fresher" />
|
||||
</td>
|
||||
<td class="chkrad" colspan="2">
|
||||
<ej-radio-button id="Radio3" name="small" size="@RadioButtonSize.Small" checked="false" enabled="true" text="Experienced" value="Experienced" />
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<br />
|
||||
<br />
|
||||
Experienced<br />
|
||||
<br />
|
||||
<table>
|
||||
<tr>
|
||||
<td class="chkrad">
|
||||
<ej-radio-button id="Radio2" name="medium" size="@RadioButtonSize.Medium" checked="true" enabled="true" text="1+ years" value="1+ years" />
|
||||
</td>
|
||||
<td class="chkrad">
|
||||
<ej-radio-button id="Radio4" name="medium" size="@RadioButtonSize.Medium" checked="false" enabled="true" text="2.5+years" value="2.5+years" />
|
||||
</td>
|
||||
<td>
|
||||
<ej-radio-button id="Radio5" name="medium" size="@RadioButtonSize.Medium" checked="false" enabled="true" text="5+years" value="5+years" />
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<br />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
@section StyleSection{
|
||||
<style>
|
||||
.frame {
|
||||
width: 50%;
|
||||
}
|
||||
</style>
|
||||
}
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
@section MetaTags{
|
||||
<meta name="description" content="RadioButton for ASP.NET Core with the strongly typed extension support. Value is set from the code behind by invoking RadioButtonFor helper">
|
||||
}
|
||||
|
||||
@section SampleHeading{
|
||||
<span class="sampleName">Button / RadioButtonFor</span>}
|
||||
|
||||
|
||||
@model samplebrowser.Controllers.ButtonController.radioModel
|
||||
|
||||
|
||||
@section ControlsSection{
|
||||
<div class="frame">
|
||||
<div class="control">
|
||||
<div class="radioalign">
|
||||
<br />
|
||||
Category<br />
|
||||
<br />
|
||||
<table>
|
||||
<tr>
|
||||
<td class="chkrad">
|
||||
<ej-radio-button id="Radio1" name="small" ej-for="@Model.isChecked" size="@RadioButtonSize.Small" checked="true" enabled="true" text="Fresher" value="Fresher" />
|
||||
</td>
|
||||
<td class="chkrad" colspan="2">
|
||||
<ej-radio-button id="Radio3" name="small" ej-for="@Model.isChecked" size="@RadioButtonSize.Small" checked="false" enabled="true" text="Experienced" value="Experienced" />
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<br />
|
||||
<br />
|
||||
Experienced<br />
|
||||
<br />
|
||||
<table>
|
||||
<tr>
|
||||
<td class="chkrad">
|
||||
<ej-radio-button id="Radio2" name="medium" size="@RadioButtonSize.Medium" checked="true" enabled="true" text="1+ years" value="1+ years" />
|
||||
</td>
|
||||
<td class="chkrad">
|
||||
<ej-radio-button id="Radio4" name="medium" size="@RadioButtonSize.Medium" checked="false" enabled="true" text="2.5+years" value="2.5+years" />
|
||||
</td>
|
||||
<td>
|
||||
<ej-radio-button id="Radio5" name="medium" size="@RadioButtonSize.Medium" checked="false" enabled="true" text="5+years" value="5+years" />
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<br />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
@section StyleSection{
|
||||
<style>
|
||||
.frame {
|
||||
width: 50%;
|
||||
}
|
||||
</style>
|
||||
}
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
@section MetaTags{
|
||||
<meta name="description" content="This example demonstrates the default functionalities of the RepeatButton and its various property and events like size, text, showroundedcorner, repeatbutton and click in a ASP.NET Core">
|
||||
}
|
||||
|
||||
@section SampleHeading{
|
||||
<span class="sampleName">Button / Repeat Button</span>}
|
||||
@section ControlsSection{
|
||||
<div class="frame">
|
||||
<div class="control">
|
||||
<table>
|
||||
<tr>
|
||||
<td style="padding-left:40px">
|
||||
Repeat Button <br /> <br/>
|
||||
<ej-button id="buttonnormal" text="Click" size="@ButtonSize.Large" show-rounded-corner="true" repeat-button="true" click="btnClick" />
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
@section EventsDropDown{
|
||||
}
|
||||
@section ScriptSection{
|
||||
<script type="text/javascript">
|
||||
|
||||
$(function () {
|
||||
|
||||
var btnObj = $("#buttonnormal").data("ejButton");
|
||||
|
||||
});
|
||||
|
||||
function btnClick(e, ui) {
|
||||
jQuery.addEventLog("Repeat Button click<span class='eventTitle'> triggered. </span>");
|
||||
}
|
||||
|
||||
function onClear() {
|
||||
jQuery.clearEventLog();
|
||||
}
|
||||
</script>
|
||||
}
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
@section MetaTags{
|
||||
<meta name="description" content="This example demonstrates how to enable the rtl property in a ASP.NET Core Button, ToggleButton, GroupButton, SplitButton.">
|
||||
}
|
||||
@section SampleHeading{
|
||||
<span class="sampleName">GroupButtons / RTL</span>}
|
||||
@section ControlsSection{
|
||||
<div class="frame">
|
||||
<div class="control">
|
||||
<table>
|
||||
<tr>
|
||||
<td class="btnsht">
|
||||
<ej-button id="buttonnormal" text="Play" show-rounded-corner="true" size="@ButtonSize.Large" content-type="@ContentType.TextAndImage" image-position="@ImagePosition.ImageLeft" prefix-icon="e-icon e-mediaplay" enable-rtl="true" />
|
||||
|
||||
</td>
|
||||
<td class="btnsht brtl">
|
||||
Button
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="btnsht">
|
||||
<ej-toggle-button id="TextOnly" size="@ButtonSize.Large" show-rounded-corner="true" default-text="Play" active-text="Next" content-type="@ContentType.TextAndImage" default-prefix-icon="e-icon e-mediaplay" active-prefix-icon="e-icon e-medianext" enable-rtl="true"/>
|
||||
|
||||
</td>
|
||||
<td class="btnsht brtl">
|
||||
Toggle Button
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="btnsht">
|
||||
<ej-split-button id="splitbuttonnormal" text="Play" size="@ButtonSize.Large" show-rounded-corner="true" content-type="@ContentType.TextAndImage" image-position="@ImagePosition.ImageLeft" prefix-icon="e-icon e-mediaplay" target-id="adminmenu" enable-rtl="true" />
|
||||
|
||||
</td>
|
||||
<td class="splttd btnsht brtl">
|
||||
Split Button
|
||||
<ul id="adminmenu">
|
||||
<li><span>Pause</span></li>
|
||||
<li><span>Next</span></li>
|
||||
<li><span>Previous</span></li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="btnsht">
|
||||
<ej-group-button id="GroupButton" width="215px" group-button-mode="@GroupButtonMode.RadioButton" show-rounded-corner="true" enable-rtl="true">
|
||||
<e-group-button-items >
|
||||
<e-group-button-item text="Next"></e-group-button-item>
|
||||
<e-group-button-item text="Play"></e-group-button-item>
|
||||
<e-group-button-item text="Previous"></e-group-button-item>
|
||||
</e-group-button-items>
|
||||
</ej-group-button>
|
||||
</td>
|
||||
<td class="btnsht brtl">
|
||||
Group Button
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
@section StyleSection{
|
||||
<style>
|
||||
.frame {
|
||||
width: 35%;
|
||||
}
|
||||
|
||||
.brtl {
|
||||
text-align: right;
|
||||
}
|
||||
</style>
|
||||
}
|
||||
|
|
@ -0,0 +1,120 @@
|
|||
@section MetaTags{
|
||||
<meta name="description" content="This example demonstrates the default functionalities of SplitButton and its various property like size,text, showroundedcorner and targetid in a ASP.NET Core">
|
||||
}
|
||||
|
||||
|
||||
@section SampleHeading{
|
||||
<span class="sampleName">Button / Split Buttons</span>}
|
||||
@section ControlsSection{
|
||||
<div class="frame">
|
||||
<div class="control">
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
Split button Normal
|
||||
</td>
|
||||
<td class="btnsht">
|
||||
<div class="spltspan">
|
||||
<ej-split-button id="spltbutton11" text="Login" show-rounded-corner="true" target-id="Ul11" size="@ButtonSize.Normal" content-type="@ContentType.ImageOnly" prefix-icon="e-icon e-uiLight e-login"/>
|
||||
<ul id="Ul11">
|
||||
<li><span>User</span></li>
|
||||
<li><span>Guest</span></li>
|
||||
<li><span>Admin</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
Split button Mini
|
||||
</td>
|
||||
<td>
|
||||
<ej-split-button id="spltbutton21" text="Login" show-rounded-corner="true" size="@ButtonSize.Mini" target-id="Ul21" />
|
||||
<ul id="Ul21">
|
||||
<li><span>User</span></li>
|
||||
<li><span>Guest</span></li>
|
||||
<li><span>Admin</span></li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
Split button Small
|
||||
</td>
|
||||
<td class="btnsht">
|
||||
<ej-split-button id="spltbutton31" text="Login" show-rounded-corner="true" size="@ButtonSize.Small" target-id="Ul31" />
|
||||
<ul id="Ul31">
|
||||
<li><span>User</span></li>
|
||||
<li><span>Guest</span></li>
|
||||
<li><span>Admin</span></li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
Split button Medium
|
||||
</td>
|
||||
<td class="btnsht">
|
||||
<ej-split-button id="spltbutton41" text="Login" show-rounded-corner="true" size="@ButtonSize.Medium" target-id="Ul41" />
|
||||
<ul id="Ul41">
|
||||
<li><span>User</span></li>
|
||||
<li><span>Guest</span></li>
|
||||
<li><span>Admin</span></li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
Split button Large
|
||||
</td>
|
||||
<td class="btnsht">
|
||||
<ej-split-button id="spltbutton51" text="Login" show-rounded-corner="true" size="@ButtonSize.Large" content-type="@ContentType.TextAndImage" prefix-icon="e-icon e-uiLight e-login" target-id="Ul51" />
|
||||
<ul id="Ul51">
|
||||
<li><span>User</span></li>
|
||||
<li><span>Guest</span></li>
|
||||
<li><span>Admin</span></li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
<div id="modeTarget">
|
||||
<ul>
|
||||
<li value="split">Split</li>
|
||||
<li value="dropdown">Dropdown</li>
|
||||
</ul>
|
||||
</div>
|
||||
@section PropertiesSection{
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
ButtonMode
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<ej-drop-down-list id="btnmode" target-id="modeTarget" width="120px" selected-item-index="0" change="onChange"></ej-drop-down-list>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
@section ScriptSection{
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$("#sampleProperties").ejPropertiesPanel();
|
||||
});
|
||||
function onChange(args) {
|
||||
$(".e-splitbutton").ejSplitButton({ "buttonMode": args.value });
|
||||
}
|
||||
</script>
|
||||
}
|
||||
@section StyleSection{
|
||||
<style>
|
||||
.frame {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.spltspan {
|
||||
width: 50px;
|
||||
padding-right: 100px;
|
||||
}
|
||||
</style>
|
||||
}
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
@using Syncfusion.JavaScript;
|
||||
@using Syncfusion.JavaScript.DataVisualization
|
||||
|
||||
@section SampleHeading{<span class="sampleName">Chart / Area Chart</span>}
|
||||
|
||||
@section ControlsSection{
|
||||
<div>
|
||||
<ej-chart id="container" can-resize="true" load="loadTheme">
|
||||
<e-chart-area>
|
||||
<e-border color="transparent"></e-border>
|
||||
</e-chart-area>
|
||||
<e-primary-x-axis>
|
||||
<e-major-grid-lines visible="false"></e-major-grid-lines>
|
||||
<e-title text="Year"></e-title>
|
||||
<e-range max="2000" min="1900" interval="10"></e-range>
|
||||
</e-primary-x-axis>
|
||||
<e-primary-y-axis>
|
||||
<e-axis-line visible="false"></e-axis-line>
|
||||
<e-major-tick-lines visible="false"></e-major-tick-lines>
|
||||
<e-title text="Sales Amount in Millions"></e-title>
|
||||
<e-range max="5" min="2" interval="0.5"></e-range>
|
||||
</e-primary-y-axis>
|
||||
<e-chart-series>
|
||||
<e-series name="Product A" type="@SeriesType.Area" enable-animation="true" opacity="0.5" fill="#69D2E7">
|
||||
<e-points>
|
||||
<e-point x="1900" y="4"></e-point>
|
||||
<e-point x="1920" y="3"></e-point>
|
||||
<e-point x="1940" y="3.8"></e-point>
|
||||
<e-point x="1960" y="3.4"></e-point>
|
||||
<e-point x="1980" y="3.2"></e-point>
|
||||
<e-point x="2000" y="3.9"></e-point>
|
||||
</e-points>
|
||||
<e-border color="transparent"></e-border>
|
||||
</e-series>
|
||||
<e-series name="Product B" type="@SeriesType.Area" enable-animation="true" opacity="0.5" fill="#C4C24A">
|
||||
<e-points>
|
||||
<e-point x="1900" y="2.6"></e-point>
|
||||
<e-point x="1920" y="2.8"></e-point>
|
||||
<e-point x="1940" y="2.6"></e-point>
|
||||
<e-point x="1960" y="3"></e-point>
|
||||
<e-point x="1980" y="3.6"></e-point>
|
||||
<e-point x="2000" y="3"></e-point>
|
||||
</e-points>
|
||||
<e-border color="transparent"></e-border>
|
||||
</e-series>
|
||||
<e-series name="Product C" type="@SeriesType.Area" enable-animation="true" opacity="0.5" fill="#6A4B82">
|
||||
<e-points>
|
||||
<e-point x="1900" y="2.8"></e-point>
|
||||
<e-point x="1920" y="2.5"></e-point>
|
||||
<e-point x="1940" y="2.8"></e-point>
|
||||
<e-point x="1960" y="3.2"></e-point>
|
||||
<e-point x="1980" y="2.9"></e-point>
|
||||
<e-point x="2000" y="2"></e-point>
|
||||
</e-points>
|
||||
|
||||
<e-border color="transparent"></e-border>
|
||||
</e-series>
|
||||
</e-chart-series>
|
||||
<e-title text="Average Sales Comparison"></e-title>
|
||||
<e-size height="600"></e-size>
|
||||
<e-legend visible="true"></e-legend>
|
||||
</ej-chart>
|
||||
|
||||
<script>
|
||||
$("#controlarea").css("visibility", "visible");
|
||||
</script>
|
||||
</div>
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
@using Syncfusion.JavaScript
|
||||
@using Syncfusion.JavaScript.DataVisualization
|
||||
|
||||
@section SampleHeading{<span class="sampleName">Chart / Column Chart </span>}
|
||||
|
||||
@section ControlsSection{
|
||||
<div>
|
||||
<ej-chart id="container" can-resize="true" load="loadTheme">
|
||||
<e-primary-x-axis>
|
||||
<e-title text="Countries"></e-title>
|
||||
</e-primary-x-axis>
|
||||
<e-primary-y-axis>
|
||||
<e-range max="80" min="20" interval="20"></e-range>
|
||||
<e-title text="Medals"></e-title>
|
||||
</e-primary-y-axis>
|
||||
<e-title text="Olympic Medals"></e-title>
|
||||
<e-size height="600"></e-size>
|
||||
<e-legend visible="true" position="@LegendPosition.Top"></e-legend>
|
||||
<e-common-series-options type="@SeriesType.Column" enable-animation="true">
|
||||
<e-chart-tooltip visible="true" format="#point.x# #point.y# #series.name# Medals"></e-chart-tooltip>
|
||||
</e-common-series-options>
|
||||
<e-chart-series>
|
||||
<e-series name="Gold">
|
||||
<e-points>
|
||||
<e-point x="USA" y="50"></e-point>
|
||||
<e-point x="China" y="40"></e-point>
|
||||
<e-point x="Japan" y="70"></e-point>
|
||||
<e-point x="Australia" y="60"></e-point>
|
||||
<e-point x="France" y="50"></e-point>
|
||||
<e-point x="Germany" y="40"></e-point>
|
||||
<e-point x="Italy" y="40"></e-point>
|
||||
<e-point x="Gold" y="30"></e-point>
|
||||
</e-points>
|
||||
</e-series>
|
||||
<e-series name="Silver">
|
||||
<e-points>
|
||||
<e-point x="USA" y="50"></e-point>
|
||||
<e-point x="China" y="40"></e-point>
|
||||
<e-point x="Japan" y="70"></e-point>
|
||||
<e-point x="Australia" y="56"></e-point>
|
||||
<e-point x="France" y="45"></e-point>
|
||||
<e-point x="Germany" y="30"></e-point>
|
||||
<e-point x="Italy" y="35"></e-point>
|
||||
<e-point x="Gold" y="25"></e-point>
|
||||
</e-points>
|
||||
</e-series>
|
||||
<e-series name="Bronze">
|
||||
<e-points>
|
||||
<e-point x="USA" y="45"></e-point>
|
||||
<e-point x="China" y="55"></e-point>
|
||||
<e-point x="Japan" y="50"></e-point>
|
||||
<e-point x="Australia" y="40"></e-point>
|
||||
<e-point x="France" y="35"></e-point>
|
||||
<e-point x="Germany" y="22"></e-point>
|
||||
<e-point x="Italy" y="37"></e-point>
|
||||
<e-point x="Gold" y="27"></e-point>
|
||||
</e-points>
|
||||
</e-series>
|
||||
</e-chart-series>
|
||||
|
||||
</ej-chart>
|
||||
<script>
|
||||
$("#controlarea").css("visibility", "visible");
|
||||
</script>
|
||||
</div>
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
@using Syncfusion.JavaScript;
|
||||
@using Syncfusion.JavaScript.DataVisualization;
|
||||
|
||||
@section SampleHeading{<span class="sampleName">Chart / 3D Column Chart</span>}
|
||||
|
||||
@section ControlsSection{
|
||||
<div>
|
||||
<ej-chart id="container" can-resize="true" load="onchartload" enable3d="true" depth="100" wall-size="2" tilt="0" rotation="34" perspective-angle="90" side-by-side-series-placement="true" enable-rotation="true ">
|
||||
<e-title text="Fruits Nutrients"></e-title>
|
||||
<e-size height="600"></e-size>
|
||||
<e-legend visible="true"></e-legend>
|
||||
<e-primary-x-axis value-type="@AxisValueType.Category">
|
||||
<e-title text="Minerals"></e-title>
|
||||
<e-major-grid-lines visible="true" color="#a9a9a9" opacity="0.12"></e-major-grid-lines>
|
||||
</e-primary-x-axis>
|
||||
<e-primary-y-axis>
|
||||
<e-major-grid-lines visible="true" color="#a9a9a9" opacity="0.12"></e-major-grid-lines>
|
||||
</e-primary-y-axis>
|
||||
<e-common-series-options type="@SeriesType.Column">
|
||||
<e-chart-tooltip visible="true" format="#series.name# <br/> #point.x# : #point.y#mg"></e-chart-tooltip>
|
||||
</e-common-series-options>
|
||||
<e-chart-series>
|
||||
<e-series name="Minerals Content in Apple">
|
||||
<e-points>
|
||||
<e-point x="Calcium" y="11"></e-point>
|
||||
<e-point x="Phosphorus" y="20"></e-point>
|
||||
<e-point x="Sodium" y="8"></e-point>
|
||||
<e-point x="Magnesium" y="9"></e-point>
|
||||
<e-point x="Manganese" y="8.5"></e-point>
|
||||
<e-point x="Iron" y="6.3"></e-point>
|
||||
</e-points>
|
||||
</e-series>
|
||||
<e-series name="Minerals Content in Banana">
|
||||
<e-points>
|
||||
<e-point x="Calcium" y="6"></e-point>
|
||||
<e-point x="Phosphorus" y="26"></e-point>
|
||||
<e-point x="Sodium" y="7"></e-point>
|
||||
<e-point x="Magnesium" y="32"></e-point>
|
||||
<e-point x="Manganese" y="9.6"></e-point>
|
||||
<e-point x="Iron" y="8.1"></e-point>
|
||||
</e-points>
|
||||
</e-series>
|
||||
</e-chart-series>
|
||||
</ej-chart>
|
||||
|
||||
|
||||
</div>
|
||||
}
|
||||
@section ScriptSection
|
||||
{
|
||||
<script>
|
||||
function onchartload(sender) {
|
||||
loadTheme(sender);
|
||||
sender.model.primaryXAxis.majorGridLines.color = "#a9a9a9";
|
||||
sender.model.primaryXAxis.majorGridLines.opacity = 0.12;
|
||||
sender.model.primaryYAxis.majorGridLines.color = "#a9a9a9";
|
||||
sender.model.primaryYAxis.majorGridLines.opacity = 0.12;
|
||||
}
|
||||
$("#controlarea").css("visibility", "visible");
|
||||
</script>
|
||||
}
|
||||
|
|
@ -0,0 +1,133 @@
|
|||
@using Syncfusion.JavaScript;
|
||||
@using Syncfusion.JavaScript.DataVisualization;
|
||||
|
||||
@section SampleHeading{<span class="sampleName">Chart / Line Chart </span>}
|
||||
|
||||
@section ControlsSection{
|
||||
<div id="Tooltip" style="display: none;">
|
||||
<div id="icon">
|
||||
<div id="eficon"></div>
|
||||
</div>
|
||||
<div id="value">
|
||||
<div>
|
||||
<span id="efpercentage">#point.y#</span><br />
|
||||
<span id="ef">Efficiency</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<ej-chart id="container" can-resize="true" load="loadTheme">
|
||||
<e-primary-x-axis>
|
||||
<e-title text="Year"></e-title>
|
||||
<e-range max="2011" min="2005" interval="1"></e-range>
|
||||
</e-primary-x-axis>
|
||||
<e-primary-y-axis range-padding="@ChartRangePadding.None" label-format="{value}%">
|
||||
<e-title text="Efficiency"></e-title>
|
||||
<e-range min="25" max="50" interval="5"></e-range>
|
||||
</e-primary-y-axis>
|
||||
<e-title text="Efficiency of oil-fired power production"></e-title>
|
||||
<e-size height="600"></e-size>
|
||||
<e-legend visible="true"></e-legend>
|
||||
<e-common-series-options type="@SeriesType.Line" enable-animation="true">
|
||||
<e-marker shape="@ChartShape.Circle" visible="true">
|
||||
<e-border width="2"></e-border>
|
||||
<e-Size height="10" width="10"></e-Size>
|
||||
</e-marker>
|
||||
</e-common-series-options>
|
||||
<e-chart-series>
|
||||
<e-series name="India">
|
||||
<e-chart-tooltip visible="true" template="Tooltip"></e-chart-tooltip>
|
||||
<e-points>
|
||||
<e-point x="2005" y="28"></e-point>
|
||||
<e-point x="2006" y="25"></e-point>
|
||||
<e-point x="2007" y="26"></e-point>
|
||||
<e-point x="2008" y="27"></e-point>
|
||||
<e-point x="2009" y="32"></e-point>
|
||||
<e-point x="2010" y="35"></e-point>
|
||||
<e-point x="2011" y="30"></e-point>
|
||||
</e-points>
|
||||
</e-series>
|
||||
<e-series name="Germany">
|
||||
<e-chart-tooltip visible="true" template="Tooltip"></e-chart-tooltip>
|
||||
<e-points>
|
||||
<e-point x="2005" y="31"></e-point>
|
||||
<e-point x="2006" y="28"></e-point>
|
||||
<e-point x="2007" y="30"></e-point>
|
||||
<e-point x="2008" y="36"></e-point>
|
||||
<e-point x="2009" y="36"></e-point>
|
||||
<e-point x="2010" y="39"></e-point>
|
||||
<e-point x="2011" y="37"></e-point>
|
||||
</e-points>
|
||||
</e-series>
|
||||
<e-series name="England">
|
||||
<e-chart-tooltip visible="true" template="Tooltip"></e-chart-tooltip>
|
||||
<e-points>
|
||||
<e-point x="2005" y="36"></e-point>
|
||||
<e-point x="2006" y="32"></e-point>
|
||||
<e-point x="2007" y="34"></e-point>
|
||||
<e-point x="2008" y="41"></e-point>
|
||||
<e-point x="2009" y="42"></e-point>
|
||||
<e-point x="2010" y="42"></e-point>
|
||||
<e-point x="2011" y="43"></e-point>
|
||||
</e-points>
|
||||
</e-series>
|
||||
<e-series name="France">
|
||||
<e-chart-tooltip visible="true" template="Tooltip"></e-chart-tooltip>
|
||||
<e-points>
|
||||
<e-point x="2005" y="39"></e-point>
|
||||
<e-point x="2006" y="36"></e-point>
|
||||
<e-point x="2007" y="40"></e-point>
|
||||
<e-point x="2008" y="44"></e-point>
|
||||
<e-point x="2009" y="45"></e-point>
|
||||
<e-point x="2010" y="48"></e-point>
|
||||
<e-point x="2011" y="46"></e-point>
|
||||
</e-points>
|
||||
</e-series>
|
||||
</e-chart-series>
|
||||
</ej-chart>
|
||||
<script>
|
||||
$("#controlarea").css("visibility", "visible");
|
||||
</script>
|
||||
</div>
|
||||
}
|
||||
@section StyleSection
|
||||
{
|
||||
<style class="cssStyles">
|
||||
.tooltipDivcontainer {
|
||||
background-color: #E94649;
|
||||
color: white;
|
||||
width: 130px;
|
||||
}
|
||||
|
||||
#Tooltip > div:first-child {
|
||||
float: left;
|
||||
}
|
||||
|
||||
#Tooltip #value {
|
||||
float: right;
|
||||
height: 50px;
|
||||
width: 63px;
|
||||
}
|
||||
|
||||
#Tooltip #value > div {
|
||||
margin: 5px 5px 5px 5px;
|
||||
}
|
||||
|
||||
#Tooltip #efpercentage {
|
||||
font-size: 20px;
|
||||
font-family: segoe ui;
|
||||
}
|
||||
|
||||
#Tooltip #ef {
|
||||
font-size: 12px;
|
||||
font-family: segoe ui;
|
||||
}
|
||||
|
||||
#eficon {
|
||||
background-image: url("../images/chart/eficon.png");
|
||||
height: 60px;
|
||||
width: 60px;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
</style>
|
||||
}
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
@using Syncfusion.JavaScript;
|
||||
@using Syncfusion.JavaScript.DataVisualization;
|
||||
|
||||
@section SampleHeading{<span class="sampleName">Chart / Pie Chart </span>}
|
||||
|
||||
@section ControlsSection{
|
||||
<div>
|
||||
<ej-chart id="container" can-resize="true" load="loadTheme" series-rendering="seriesRender">
|
||||
<e-title text="Expenditures"></e-title>
|
||||
<e-size height="600"></e-size>
|
||||
<e-legend visible="false"></e-legend>
|
||||
<e-common-series-options enable-animation="true"></e-common-series-options>
|
||||
<e-chart-series>
|
||||
<e-series label-position="@ChartLabelPosition.OutsideExtended" name="Expenses" type="@SeriesType.Pie" enable-smart-labels="true" start-angle="145">
|
||||
<e-points>
|
||||
<e-point x="Other Personal" y="94658" text="Other Personal, 88.47%"></e-point>
|
||||
<e-point x="Medical care" y="9090" text="Medical care, 8.49%"></e-point>
|
||||
<e-point x="Housing" y="2577" text="Housing, 2.40%"></e-point>
|
||||
<e-point x="Transportation" y="473" text="Transportation, 0.44%"></e-point>
|
||||
<e-point x="Education" y="120" text="Education, 0.11%"></e-point>
|
||||
<e-point x="Electronics" y="70" text="Electronics, 0.06%"></e-point>
|
||||
</e-points>
|
||||
<e-border width="2" color="white"></e-border>
|
||||
<e-marker>
|
||||
<e-data-label visible="true" shape="@ChartShape.None">
|
||||
<e-font size="14px"></e-font>
|
||||
<e-connector-line color="Black" height="60" type="@ConnectorType.Bezier"></e-connector-line>
|
||||
</e-data-label>
|
||||
</e-marker>
|
||||
</e-series>
|
||||
</e-chart-series>
|
||||
</ej-chart>
|
||||
<script>
|
||||
function seriesRender(sender) {
|
||||
if (sender.model.theme == "flatdark" || sender.model.theme == "gradientdark")
|
||||
sender.data.series.marker.dataLabel.connectorLine.color = "white";
|
||||
else
|
||||
sender.data.series.marker.dataLabel.connectorLine.color = "black";
|
||||
}
|
||||
$("#controlarea").css("visibility", "visible");
|
||||
</script>
|
||||
</div>
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
@using Syncfusion.JavaScript;
|
||||
@using Syncfusion.JavaScript.DataVisualization;
|
||||
|
||||
@section SampleHeading{<span class="sampleName">Chart / 3D Pie Chart</span>}
|
||||
|
||||
@section ControlsSection{
|
||||
<div>
|
||||
<ej-chart id="container" enable3d="true" depth="30" wall-size="10" tilt="-30" rotation="-30" perspective-angle="90" side-by-side-series-placement="true" enable-rotation="true" can-resize="true" load="onchartload" >
|
||||
<e-size height="600" width="970"></e-size>
|
||||
<e-legend visible="false"></e-legend>
|
||||
<e-title text="Expenditure shares on a child from birth through age 17"></e-title>
|
||||
<e-common-series-options label-position="@ChartLabelPosition.Outside">
|
||||
<e-chart-tooltip visible="true" format="#point.x# : #point.y#%"></e-chart-tooltip>
|
||||
<e-marker>
|
||||
<e-data-label shape="@ChartShape.None" visible="true" text-position="@TextPosition.Top">
|
||||
<e-connector-line height="70" color="black"></e-connector-line>
|
||||
<e-border width="1"></e-border>
|
||||
</e-data-label>
|
||||
</e-marker>
|
||||
</e-common-series-options>
|
||||
<e-chart-series>
|
||||
<e-series type="@SeriesType.Pie" explode-index="0" pie-coefficient="0.7f" start-angle="145">
|
||||
<e-points>
|
||||
<e-point x="Housing" text="Housing" y="31"></e-point>
|
||||
<e-point x="Food" text="Food" y="16"></e-point>
|
||||
<e-point x="Transportation" text="Transportation" y="14"></e-point>
|
||||
<e-point x="Clothing" text="Clothing" y="6"></e-point>
|
||||
<e-point x="Health care" text="Health care" y="8"></e-point>
|
||||
<e-point x="Education" text="Education" y="17"></e-point>
|
||||
<e-point x="Miscellaneous" text="Miscellaneous" y="8"></e-point>
|
||||
</e-points>
|
||||
<e-border color="white" width="2"></e-border>
|
||||
</e-series>
|
||||
</e-chart-series>
|
||||
</ej-chart>
|
||||
</div>
|
||||
}
|
||||
@section ScriptSection
|
||||
{
|
||||
<script>
|
||||
function onchartload(sender) {
|
||||
loadTheme(sender);
|
||||
if (sender.model.theme == "flatdark" || sender.model.theme == "gradientdark")
|
||||
sender.model.commonSeriesOptions.marker.dataLabel.connectorLine.stroke = "white";
|
||||
}
|
||||
$("#controlarea").css("visibility", "visible");
|
||||
</script>
|
||||
}
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
@using Syncfusion.JavaScript;
|
||||
@using Syncfusion.JavaScript.DataVisualization;
|
||||
@section SampleHeading{<span class="sampleName">Chart / Pyramid Chart </span>}
|
||||
|
||||
@section ControlsSection{
|
||||
<div>
|
||||
<ej-chart id="container" can-resize="true" load="loadTheme">
|
||||
<e-title text="Sales Distribution of Car by Region"></e-title>
|
||||
<e-size height="600"></e-size>
|
||||
<e-legend visible="true"></e-legend>
|
||||
<e-chart-series>
|
||||
<e-series name="Newyork" type="@SeriesType.Pyramid" label-position="@ChartLabelPosition.Outside">
|
||||
<e-marker>
|
||||
<e-data-label visible="true" shape="@ChartShape.Rectangle">
|
||||
<e-font size="15px" color="white" font-weight="@ChartFontWeight.Lighter"></e-font>
|
||||
</e-data-label>
|
||||
</e-marker>
|
||||
<e-points>
|
||||
<e-point x="India" y="24" text="India 28%"></e-point>
|
||||
<e-point x="Japan" y="25" text="Japan 25%"></e-point>
|
||||
<e-point x="Australia" y="20" text="Australia 20%"></e-point>
|
||||
<e-point x="USA" y="35" text="USA 35%"></e-point>
|
||||
<e-point x="China" y="23" text="China 23%"></e-point>
|
||||
<e-point x="Germany" y="27" text="Germany 27%"></e-point>
|
||||
<e-point x="France" y="22" text="France 22%"></e-point>
|
||||
</e-points>
|
||||
</e-series>
|
||||
</e-chart-series>
|
||||
</ej-chart>
|
||||
<script>
|
||||
$("#controlarea").css("visibility", "visible");
|
||||
</script>
|
||||
</div>
|
||||
}
|
||||
|
|
@ -0,0 +1,95 @@
|
|||
@using Syncfusion.JavaScript;
|
||||
@using Syncfusion.JavaScript.DataVisualization;
|
||||
|
||||
@section SampleHeading{<span class="sampleName">Chart / StackingColumn Chart </span>}
|
||||
|
||||
@section ControlsSection{
|
||||
<div>
|
||||
<ej-chart id="container" can-resize="true" load="loadTheme">
|
||||
<e-title text="Most Popular Search Engines"></e-title>
|
||||
<e-size height="600"></e-size>
|
||||
<e-legend visible="true"></e-legend>
|
||||
<e-primary-x-axis>
|
||||
<e-title text="Month"></e-title>
|
||||
<e-major-grid-lines visible="false"></e-major-grid-lines>
|
||||
</e-primary-x-axis>
|
||||
<e-primary-y-axis>
|
||||
<e-range max="1800" min="0" interval="200"></e-range>
|
||||
<e-title text="Number of visitors in Millions"></e-title>
|
||||
</e-primary-y-axis>
|
||||
<e-common-series-options type="@SeriesType.StackingColumn" enable-animation="true">
|
||||
<e-chart-tooltip visible="true" format="#series.name# <br/> #point.x# : #point.y# Million Visitors"></e-chart-tooltip>
|
||||
</e-common-series-options>
|
||||
<e-chart-series>
|
||||
<e-series name="Google">
|
||||
<e-points>
|
||||
<e-point x="Jan" y="900"></e-point>
|
||||
<e-point x="Feb" y="820"></e-point>
|
||||
<e-point x="Mar" y="880"></e-point>
|
||||
<e-point x="Apr" y="725"></e-point>
|
||||
<e-point x="May" y="765"></e-point>
|
||||
<e-point x="June" y="679"></e-point>
|
||||
<e-point x="July" y="770"></e-point>
|
||||
<e-point x="Aug" y="825"></e-point>
|
||||
<e-point x="Sep" y="704"></e-point>
|
||||
<e-point x="Oct" y="781"></e-point>
|
||||
<e-point x="Nov" y="799"></e-point>
|
||||
<e-point x="Dec" y="882"></e-point>
|
||||
</e-points>
|
||||
</e-series>
|
||||
<e-series name="Bing">
|
||||
<e-points>
|
||||
<e-point x="Jan" y="190"></e-point>
|
||||
<e-point x="Feb" y="226"></e-point>
|
||||
<e-point x="Mar" y="194"></e-point>
|
||||
<e-point x="Apr" y="250"></e-point>
|
||||
<e-point x="May" y="222"></e-point>
|
||||
<e-point x="June" y="181"></e-point>
|
||||
<e-point x="July" y="128"></e-point>
|
||||
<e-point x="Aug" y="239"></e-point>
|
||||
<e-point x="Sep" y="268"></e-point>
|
||||
<e-point x="Oct" y="236"></e-point>
|
||||
<e-point x="Nov" y="285"></e-point>
|
||||
<e-point x="Dec" y="199"></e-point>
|
||||
</e-points>
|
||||
</e-series>
|
||||
<e-series name="Yahoo">
|
||||
<e-points>
|
||||
<e-point x="Jan" y="250"></e-point>
|
||||
<e-point x="Feb" y="145"></e-point>
|
||||
<e-point x="Mar" y="190"></e-point>
|
||||
<e-point x="Apr" y="220"></e-point>
|
||||
<e-point x="May" y="225"></e-point>
|
||||
<e-point x="June" y="135"></e-point>
|
||||
<e-point x="July" y="152"></e-point>
|
||||
<e-point x="Aug" y="216"></e-point>
|
||||
<e-point x="Sep" y="137"></e-point>
|
||||
<e-point x="Oct" y="147"></e-point>
|
||||
<e-point x="Nov" y="242"></e-point>
|
||||
<e-point x="Dec" y="230"></e-point>
|
||||
</e-points>
|
||||
</e-series>
|
||||
<e-series name="Ask">
|
||||
<e-points>
|
||||
<e-point x="Jan" y="150"></e-point>
|
||||
<e-point x="Feb" y="120"></e-point>
|
||||
<e-point x="Mar" y="115"></e-point>
|
||||
<e-point x="Apr" y="125"></e-point>
|
||||
<e-point x="May" y="132"></e-point>
|
||||
<e-point x="June" y="137"></e-point>
|
||||
<e-point x="July" y="110"></e-point>
|
||||
<e-point x="Aug" y="126"></e-point>
|
||||
<e-point x="Sep" y="97"></e-point>
|
||||
<e-point x="Oct" y="122"></e-point>
|
||||
<e-point x="Nov" y="85"></e-point>
|
||||
<e-point x="Dec" y="120"></e-point>
|
||||
</e-points>
|
||||
</e-series>
|
||||
</e-chart-series>
|
||||
</ej-chart>
|
||||
|
||||
<script>
|
||||
$("#controlarea").css("visibility", "visible");
|
||||
</script>
|
||||
</div>
|
||||
}
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
@using Syncfusion.JavaScript;
|
||||
@using Syncfusion.JavaScript.DataVisualization;
|
||||
|
||||
@section SampleHeading{<span class="sampleName">Chart / 3D Stacking Column Chart</span>}
|
||||
|
||||
@section ControlsSection{
|
||||
<div>
|
||||
<ej-chart id="container" can-resize="true" load="onchartload" enable3d="true" depth="100" wall-size="2" tilt="0" rotation="34" perspective-angle="90" side-by-side-series-placement="true" enable-rotation="true ">
|
||||
<e-size height="600" width="970"></e-size>
|
||||
<e-legend visible="true"></e-legend>
|
||||
<e-title text="Passenger Car Sales"></e-title>
|
||||
<e-primary-x-axis>
|
||||
<e-range max="2013" min="2005" interval="1"></e-range>
|
||||
<e-axis-line visible="false"></e-axis-line>
|
||||
<e-major-grid-lines visible="true" color="#a9a9a9" opacity="0.12"></e-major-grid-lines>
|
||||
</e-primary-x-axis>
|
||||
<e-primary-y-axis>
|
||||
<e-title text="Millions"></e-title>
|
||||
<e-major-grid-lines visible="true" color="#a9a9a9" opacity="0.12"></e-major-grid-lines>
|
||||
</e-primary-y-axis>
|
||||
<e-common-series-options type="@SeriesType.StackingColumn">
|
||||
<e-chart-tooltip visible="true" format="#series.name# <br/> Year #point.x# : #point.y# Millions"></e-chart-tooltip>
|
||||
</e-common-series-options>
|
||||
<e-chart-series>
|
||||
<e-series name="India" stacking-group="Asia Continent">
|
||||
<e-points>
|
||||
<e-point x="2006" y="8"></e-point>
|
||||
<e-point x="2007" y="5"></e-point>
|
||||
<e-point x="2008" y="4"></e-point>
|
||||
<e-point x="2009" y="12"></e-point>
|
||||
<e-point x="2010" y="16"></e-point>
|
||||
<e-point x="2011" y="6"></e-point>
|
||||
<e-point x="2012" y="13"></e-point>
|
||||
</e-points>
|
||||
</e-series>
|
||||
<e-series name="China" stacking-group="Asia Continent">
|
||||
<e-points>
|
||||
<e-point x="2006" y="5"></e-point>
|
||||
<e-point x="2007" y="6"></e-point>
|
||||
<e-point x="2008" y="7"></e-point>
|
||||
<e-point x="2009" y="10"></e-point>
|
||||
<e-point x="2010" y="14"></e-point>
|
||||
<e-point x="2011" y="14"></e-point>
|
||||
<e-point x="2012" y="15"></e-point>
|
||||
</e-points>
|
||||
</e-series>
|
||||
<e-series name="Canada" stacking-group="North America Continent">
|
||||
<e-points>
|
||||
<e-point x="2006" y="14"></e-point>
|
||||
<e-point x="2007" y="14"></e-point>
|
||||
<e-point x="2008" y="13"></e-point>
|
||||
<e-point x="2009" y="13"></e-point>
|
||||
<e-point x="2010" y="13"></e-point>
|
||||
<e-point x="2011" y="13"></e-point>
|
||||
<e-point x="2012" y="12"></e-point>
|
||||
</e-points>
|
||||
</e-series>
|
||||
<e-series name="USA" stacking-group="North America Continent">
|
||||
<e-points>
|
||||
<e-point x="2006" y="17"></e-point>
|
||||
<e-point x="2007" y="16"></e-point>
|
||||
<e-point x="2008" y="13"></e-point>
|
||||
<e-point x="2009" y="10"></e-point>
|
||||
<e-point x="2010" y="12"></e-point>
|
||||
<e-point x="2011" y="13"></e-point>
|
||||
<e-point x="2012" y="14"></e-point>
|
||||
</e-points>
|
||||
</e-series>
|
||||
</e-chart-series>
|
||||
</ej-chart>
|
||||
</div>
|
||||
}
|
||||
@section ScriptSection
|
||||
{
|
||||
<script>
|
||||
function onchartload(sender) {
|
||||
loadTheme(sender);
|
||||
sender.model.primaryXAxis.majorGridLines.color = "#a9a9a9";
|
||||
sender.model.primaryXAxis.majorGridLines.opacity = 0.12;
|
||||
sender.model.primaryYAxis.majorGridLines.color = "#a9a9a9";
|
||||
sender.model.primaryYAxis.majorGridLines.opacity = 0.12;
|
||||
}
|
||||
$("#controlarea").css("visibility", "visible");
|
||||
</script>
|
||||
}
|
||||
|
|
@ -0,0 +1,162 @@
|
|||
@using Syncfusion.JavaScript;
|
||||
@using Syncfusion.JavaScript.DataVisualization;
|
||||
|
||||
@section SampleHeading{<span class="sampleName">Chart / User Interaction/ TrackBall</span>}
|
||||
|
||||
@section ControlsSection{
|
||||
<div>
|
||||
<ej-chart id="container" can-resize="true" load="loadTheme">
|
||||
<e-size height="600" width="970"></e-size>
|
||||
<e-legend visible="true" shape="@ChartShape.Circle" position="@LegendPosition.Top">
|
||||
<e-item-style height="10" width="10"></e-item-style>
|
||||
</e-legend>
|
||||
<e-title text="Passenger Car Sales"></e-title>
|
||||
<e-crosshair visible="true" type="@CrosshairType.Trackball">
|
||||
<e-marker shape="@ChartShape.Circle" visible="true">
|
||||
<e-Size height="9" width="9"></e-Size>
|
||||
</e-marker>
|
||||
<e-trackball-tooltip-settings mode="@TrackballDisplayMode.Grouping"></e-trackball-tooltip-settings>
|
||||
</e-crosshair>
|
||||
<e-primary-x-axis value-type="@AxisValueType.Datetime" interval-type="@ChartIntervalType.Years">
|
||||
<e-range min="new DateTime(2000,1,1)" max="new DateTime(2006,2,11)" interval="1"></e-range>
|
||||
<e-axis-line visible="false"></e-axis-line>
|
||||
<e-major-grid-lines visible="false"></e-major-grid-lines>
|
||||
<e-title text="Year"></e-title>
|
||||
</e-primary-x-axis>
|
||||
<e-primary-y-axis label-format="{value}K">
|
||||
<e-title text="Payment"></e-title>
|
||||
<e-range max="120" min="20" interval="20"></e-range>
|
||||
<e-axis-line visible="false"></e-axis-line>
|
||||
<e-major-grid-lines visible="false"></e-major-grid-lines>
|
||||
</e-primary-y-axis>
|
||||
<e-common-series-options type="@SeriesType.Line" enable-animation="true">
|
||||
<e-border width="3"></e-border>
|
||||
<e-marker shape="@ChartShape.Circle" visible="true">
|
||||
<e-Size height="6" width="6"></e-Size>
|
||||
</e-marker>
|
||||
</e-common-series-options>
|
||||
<e-chart-series>
|
||||
<e-series name="John">
|
||||
<e-chart-tooltip visible="false" format="#point.x# : #point.y#"></e-chart-tooltip>
|
||||
<e-points>
|
||||
<e-point x="2000/ 02/ 11" y="30"></e-point>
|
||||
<e-point x="2000/ 09/ 14" y="35"></e-point>
|
||||
<e-point x="2001/ 02/ 11" y="40"></e-point>
|
||||
<e-point x="2001/ 09/ 16" y="36"></e-point>
|
||||
<e-point x="2002/ 02/ 07" y="28"></e-point>
|
||||
<e-point x="2002/ 09/ 07" y="33"></e-point>
|
||||
<e-point x="2003/ 02/ 11" y="39"></e-point>
|
||||
<e-point x="2003/ 09/ 14" y="38"></e-point>
|
||||
<e-point x="2004/ 02/ 06" y="34"></e-point>
|
||||
<e-point x="2004/ 09/ 06" y="46"></e-point>
|
||||
<e-point x="2005/ 02/ 11" y="54"></e-point>
|
||||
<e-point x="2005/ 09/ 11" y="65"></e-point>
|
||||
<e-point x="2006/ 02/ 28" y="39"></e-point>
|
||||
</e-points>
|
||||
</e-series>
|
||||
<e-series name="Andrew">
|
||||
<e-chart-tooltip visible="true" format="#point.x# : #point.y#"></e-chart-tooltip>
|
||||
<e-points>
|
||||
<e-point x="2000/ 02/ 11" y="54"></e-point>
|
||||
<e-point x="2000/ 09/ 14" y="45"></e-point>
|
||||
<e-point x="2001/ 02/ 11" y="43"></e-point>
|
||||
<e-point x="2001/ 09/ 16" y="50"></e-point>
|
||||
<e-point x="2002/ 02/ 07" y="54"></e-point>
|
||||
<e-point x="2002/ 09/ 07" y="56"></e-point>
|
||||
<e-point x="2003/ 02/ 11" y="60"></e-point>
|
||||
<e-point x="2003/ 09/ 14" y="63"></e-point>
|
||||
<e-point x="2004/ 02/ 06" y="69"></e-point>
|
||||
<e-point x="2004/ 09/ 06" y="70"></e-point>
|
||||
<e-point x="2005/ 02/ 11" y="72"></e-point>
|
||||
<e-point x="2005/ 09/ 11" y="75"></e-point>
|
||||
<e-point x="2006/ 02/ 28" y="75"></e-point>
|
||||
</e-points>
|
||||
</e-series>
|
||||
<e-series name="Thomas">
|
||||
<e-chart-tooltip visible="true" format="#point.x# : #point.y#"></e-chart-tooltip>
|
||||
<e-points>
|
||||
<e-point x="2000/ 02/ 11" y="76"></e-point>
|
||||
<e-point x="2000/ 09/ 14" y="70"></e-point>
|
||||
<e-point x="2001/ 02/ 11" y="63"></e-point>
|
||||
<e-point x="2001/ 09/ 16" y="72"></e-point>
|
||||
<e-point x="2002/ 02/ 07" y="77"></e-point>
|
||||
<e-point x="2002/ 09/ 07" y="79"></e-point>
|
||||
<e-point x="2003/ 02/ 11" y="72"></e-point>
|
||||
<e-point x="2003/ 09/ 14" y="68"></e-point>
|
||||
<e-point x="2004/ 02/ 06" y="78"></e-point>
|
||||
<e-point x="2004/ 09/ 06" y="65"></e-point>
|
||||
<e-point x="2005/ 02/ 11" y="81"></e-point>
|
||||
<e-point x="2005/ 09/ 11" y="80"></e-point>
|
||||
<e-point x="2006/ 02/ 28" y="94"></e-point>
|
||||
</e-points>
|
||||
</e-series>
|
||||
<e-series name="Hendry">
|
||||
<e-chart-tooltip visible="true"></e-chart-tooltip>
|
||||
<e-points>
|
||||
<e-point x="2000/ 02/ 11" y="98"></e-point>
|
||||
<e-point x="2000/ 09/ 14" y="90"></e-point>
|
||||
<e-point x="2001/ 02/ 11" y="83"></e-point>
|
||||
<e-point x="2001/ 09/ 16" y="90"></e-point>
|
||||
<e-point x="2002/ 02/ 07" y="86"></e-point>
|
||||
<e-point x="2002/ 09/ 07" y="84"></e-point>
|
||||
<e-point x="2003/ 02/ 11" y="106"></e-point>
|
||||
<e-point x="2003/ 09/ 14" y="99"></e-point>
|
||||
<e-point x="2004/ 02/ 06" y="110"></e-point>
|
||||
<e-point x="2004/ 09/ 06" y="102"></e-point>
|
||||
<e-point x="2005/ 02/ 11" y="90"></e-point>
|
||||
<e-point x="2005/ 09/ 11" y="85"></e-point>
|
||||
<e-point x="2006/ 02/ 28" y="110"></e-point>
|
||||
</e-points>
|
||||
</e-series>
|
||||
<e-series name="William">
|
||||
<e-chart-tooltip visible="true"></e-chart-tooltip>
|
||||
<e-points>
|
||||
<e-point x="2000/ 02/ 11" y="116"></e-point>
|
||||
<e-point x="2000/ 09/ 14" y="110"></e-point>
|
||||
<e-point x="2001/ 02/ 11" y="100"></e-point>
|
||||
<e-point x="2001/ 09/ 16" y="102"></e-point>
|
||||
<e-point x="2002/ 02/ 07" y="97"></e-point>
|
||||
<e-point x="2002/ 09/ 07" y="89"></e-point>
|
||||
<e-point x="2003/ 02/ 11" y="88"></e-point>
|
||||
<e-point x="2003/ 09/ 14" y="90"></e-point>
|
||||
<e-point x="2004/ 02/ 06" y="88"></e-point>
|
||||
<e-point x="2004/ 09/ 06" y="75"></e-point>
|
||||
<e-point x="2005/ 02/ 11" y="63"></e-point>
|
||||
<e-point x="2005/ 09/ 11" y="70"></e-point>
|
||||
<e-point x="2006/ 02/ 28" y="55"></e-point>
|
||||
</e-points>
|
||||
</e-series>
|
||||
</e-chart-series>
|
||||
</ej-chart>
|
||||
<script>
|
||||
$("#controlarea").css("visibility", "visible");
|
||||
</script>
|
||||
</div>
|
||||
}
|
||||
@section ScriptSection{
|
||||
<script>
|
||||
function modeChange(x) {
|
||||
var chartObj = $("#container").ejChart("instance");
|
||||
chartObj.model.crosshair.trackballTooltipSettings.mode = x.value;
|
||||
chartObj.redraw();
|
||||
}
|
||||
$("#sampleProperties").ejPropertiesPanel();
|
||||
</script>
|
||||
}
|
||||
@section PropertiesSection{
|
||||
<div id="sampleProperties">
|
||||
<div class="prop-grid">
|
||||
<div class="row" style="margin: 10px 0;">
|
||||
<div class="col-md-3">
|
||||
Trackball Tooltip Mode
|
||||
</div>
|
||||
<div class="col-md-3 aligntop">
|
||||
<select id="trackballmode" onchange="modeChange(this)">
|
||||
<option value="grouping">Grouping</option>
|
||||
<option value="float">Float</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
@using Syncfusion.JavaScript;
|
||||
@using Syncfusion.JavaScript.DataVisualization;
|
||||
|
||||
@section SampleHeading{<span class="sampleName">Chart / User Interaction/ Zooming and Panning</span>}
|
||||
|
||||
@section ControlsSection{
|
||||
<div>
|
||||
<ej-chart id="container" can-resize="true" load="onchartload" >
|
||||
<e-title text="Server CPU Load"></e-title>
|
||||
<e-size height="600"></e-size>
|
||||
<e-legend visible="false"></e-legend>
|
||||
<e-common-series-options enable-animation="true"></e-common-series-options>
|
||||
<e-zooming enable="true" enable-mouse-wheel="true"></e-zooming>
|
||||
<e-primary-x-axis>
|
||||
<e-title text="Date"></e-title>
|
||||
</e-primary-x-axis>
|
||||
<e-chart-series>
|
||||
<e-series type="@SeriesType.Line" name="Server" width="2">
|
||||
|
||||
</e-series>
|
||||
</e-chart-series>
|
||||
<e-primary-y-axis label-format="{value}%" range-padding="@ChartRangePadding.Additional"></e-primary-y-axis>
|
||||
</ej-chart>
|
||||
</div>
|
||||
}
|
||||
<script type="text/javascript">
|
||||
function onchartload(sender) {
|
||||
loadTheme(sender);
|
||||
var data = GetData();
|
||||
sender.model.series[0].dataSource = data.Open;
|
||||
sender.model.series[0].xName = "XValue";
|
||||
sender.model.series[0].yName = "YValue";
|
||||
}
|
||||
function GetData() {
|
||||
var series1 = [];
|
||||
var value = 100;
|
||||
for (var i = 1; i < 250; i++) {
|
||||
if (Math.random() > .5) {
|
||||
value += Math.random();
|
||||
} else {
|
||||
value -= Math.random();
|
||||
}
|
||||
var point = { XValue: new Date(1970, i + 2, i), YValue: value };
|
||||
series1.push(point);
|
||||
}
|
||||
var data = { Open: series1 };
|
||||
return data;
|
||||
}
|
||||
$("#controlarea").css("visibility", "visible");
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
@using Syncfusion.JavaScript;
|
||||
@using Syncfusion.JavaScript.DataVisualization;
|
||||
|
||||
@section ScriptReferenceSection{
|
||||
<script src="@Url.Content("~/scripts/excanvas.min.js")"></script>
|
||||
}
|
||||
@section SampleHeading{
|
||||
<span class="sampleName">Default Functionalities</span>
|
||||
}
|
||||
@section MetaTags{
|
||||
<meta name="description" content="This sample demonstrates default rendering of the Syncfusion ASP.NET Web Forms Circular gauge control.">
|
||||
}
|
||||
@section ControlsSection{
|
||||
<div class="Common">
|
||||
<div>
|
||||
<ej-circular-gauge id="circulargauge1" is-responsive="true" load="loadGaugeTheme" background-color="transparent" radius="140" width="500" height="360">
|
||||
<e-circular-scale-collections>
|
||||
<e-circular-scales radius="130" minimum="0" maximum="120" major-interval-value="20" minor-interval-value="10" show-scale-bar="true" size="1" show-ranges="true">
|
||||
<e-pointer-cap radius="10"></e-pointer-cap>
|
||||
<e-circular-range-collections>
|
||||
<e-circular-ranges size="5" distance-from-scale="-30" start-value="0" end-value="70"></e-circular-ranges>
|
||||
<e-circular-ranges size="5" distance-from-scale="-30" start-value="70" end-value="110" background-color="red">
|
||||
</e-circular-ranges>
|
||||
<e-circular-ranges size="5" distance-from-scale="-30" start-value="110" end-value="120" background-color="yellow">
|
||||
</e-circular-ranges>
|
||||
</e-circular-range-collections>
|
||||
<e-pointer-collections>
|
||||
<e-pointers value="60" length="90" width="8" show-back-needle="true" back-needle-length="15"></e-pointers>
|
||||
</e-pointer-collections>
|
||||
|
||||
</e-circular-scales>
|
||||
</e-circular-scale-collections>
|
||||
</ej-circular-gauge>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
@section MetaTags{
|
||||
<meta name="description" content="This example demonstrates how to specify the custom palatte in a ASP.NET Core ColorPicker">
|
||||
}
|
||||
|
||||
@section SampleHeading{
|
||||
<span class="sampleName">ColorPicker / Custom Palette </span>}
|
||||
@section ControlsSection{
|
||||
@{List<String> colors = new List<string>() { "ffffff", "ffccff", "ff99ff", "ff66ff", "ff33ff", "ff00ff", "ccffff", "ccccff",
|
||||
"cc99ff", "cc66ff", "cc33ff", "cc00ff", "99ffff", "99ccff", "9999ff", "9966ff",
|
||||
"9933ff", "9900ff", "ffffcc", "ffcccc" };}
|
||||
<div class="frame">
|
||||
<div class="control">
|
||||
<div class="element">
|
||||
Choose a Color
|
||||
<ej-color-picker id="custom" value="#9999ff" palette="@PaletteType.CustomPalette" model-type ="@ModelType.Palette" custom="colors"></ej-color-picker>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
@section StyleSection{
|
||||
<style>
|
||||
.frame .control {
|
||||
margin-left: 70px;
|
||||
}
|
||||
</style>
|
||||
}
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
@section MetaTags{
|
||||
<meta name="description" content="This example demonstrates a simple, mobile-friendly and responsive ASP.NET Core ColorPicker to select a color">
|
||||
}
|
||||
|
||||
@section SampleHeading{<span class="sampleName">ColorPicker / Default</span> }
|
||||
@section ControlsSection{
|
||||
<div class="frame ">
|
||||
<div class="control">
|
||||
<div class="ctrllabel">
|
||||
Choose a Color
|
||||
<ej-color-picker id="colorPicker" value="#278787"></ej-color-picker>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
@section StyleSection{
|
||||
|
||||
<style>
|
||||
.frame .control {
|
||||
margin-left: 70px;
|
||||
}
|
||||
</style>
|
||||
}
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
@section MetaTags{
|
||||
<meta name="description" content="This example demonstrates how to show the ColorPicker in the inline mode in ASP.NET Core">
|
||||
}
|
||||
|
||||
@section SampleHeading{<span class="sampleName">ColorPicker / DisplayInline </span>}
|
||||
@section ControlsSection{
|
||||
<div class="frame">
|
||||
<div id="col-md-3">Select a Color</div>
|
||||
<ej-color-picker id="inlinePicker" value="#278787" tag-name ="div" model-type ="@ModelType.Picker" display-inline ="true" change="onChange"></ej-color-picker>
|
||||
</div>
|
||||
}
|
||||
@section ScriptSection{
|
||||
<script type="text/javascript">
|
||||
function onChange(args) {
|
||||
$("#col-md-3").html("Color Value " + args.value + " is choosen");
|
||||
}
|
||||
$("#sampleProperties").ejPropertiesPanel();
|
||||
</script>
|
||||
}
|
||||
@section StyleSection{
|
||||
<style>
|
||||
#col-md-3 {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
}
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
@section MetaTags{
|
||||
<meta name="description" content="This example demonstrates the various events like create, change, select, open and close in a ASP.NET Core colorpicker">
|
||||
}
|
||||
@section SampleHeading{<span class="sampleName">ColorPicker / Events </span>}
|
||||
@section ControlsSection{
|
||||
<div class="frame">
|
||||
<div class="control">
|
||||
<div class="element">
|
||||
Choose a color
|
||||
<ej-color-picker id="colorPicker" value="#278787" create="onCreate" change="onChange" open="onOpen" close="onClose" select="onSelect"></ej-color-picker>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
<div id="target">
|
||||
<ul>
|
||||
<li>open</li>
|
||||
<li>close</li>
|
||||
<li>change</li>
|
||||
<li>select</li>
|
||||
</ul>
|
||||
</div>
|
||||
@section EventsDropdown{
|
||||
<ej-drop-down-list id="selectControls_input" target-id="target" css-class="metroblue" show-checkbox="true" check-all="true" change="evtpropscheckedevent"></ej-drop-down-list>
|
||||
}
|
||||
@section ScriptSection{
|
||||
<script type="text/javascript">
|
||||
function evtpropscheckedevent(args) {
|
||||
var pickerObj = $("#colorPicker").data("ejColorPicker");
|
||||
if (args.isChecked) {
|
||||
switch (args.selectedText) {
|
||||
case "change": pickerObj.option(args.selectedText, "onChange"); break;
|
||||
case "open": pickerObj.option(args.selectedText, "onOpen"); break;
|
||||
case "close": pickerObj.option(args.selectedText, "onClose"); break;
|
||||
case "select": pickerObj.option(args.selectedText, "onSelect"); break;
|
||||
}
|
||||
}
|
||||
else pickerObj.option(args.selectedText, null);
|
||||
}
|
||||
// Client side Events
|
||||
function onCreate(args) {
|
||||
jQuery.addEventLog("ColorPicker has been <span class='eventTitle'> created</span>.");
|
||||
}
|
||||
function onChange(args) {
|
||||
jQuery.addEventLog("ColorPicker value has been <span class='eventTitle'> changed</span> to " + args.value + ".</br>");
|
||||
}
|
||||
function onSelect(args) {
|
||||
jQuery.addEventLog(args.value + " was <span class='eventTitle'>selected.</span>");
|
||||
}
|
||||
function onOpen(args) {
|
||||
jQuery.addEventLog("ColorPicker Popup has been <span class='eventTitle'> Opened</span>");
|
||||
}
|
||||
function onClose(args) {
|
||||
jQuery.addEventLog("ColorPicker Popup has been <span class='eventTitle'> Closed</span>");
|
||||
}
|
||||
function onClear() {
|
||||
jQuery.clearEventLog();
|
||||
}
|
||||
</script>
|
||||
}
|
||||
@section StyleSection{
|
||||
<style>
|
||||
.frame .control {
|
||||
margin-left: 70px;
|
||||
}
|
||||
|
||||
.row .cols-sample-area {
|
||||
width: 64%;
|
||||
}
|
||||
|
||||
.cols-sample-area .frame {
|
||||
margin-left: 59px;
|
||||
padding: 50px 60px 65px;
|
||||
width: 206px;
|
||||
}
|
||||
|
||||
.row .cols-content-fluid {
|
||||
width: 77%;
|
||||
}
|
||||
|
||||
.row .cols-prop-area {
|
||||
width: 33%;
|
||||
}
|
||||
</style>
|
||||
}
|
||||
|
|
@ -0,0 +1,181 @@
|
|||
@section MetaTags{
|
||||
<meta name="description" content="This example demonstrates how the colorpicker supports the keyboard navigation (keyboard shortcuts) in a ASP.NET Core">
|
||||
}
|
||||
|
||||
@section SampleHeading{<span class="sampleName">ColorPicker / Keyboard</span> }
|
||||
@section ControlsSection{
|
||||
<div class="frame">
|
||||
<div class="control">
|
||||
<div class="element">
|
||||
<ej-color-picker id="colorPicker" value="#278787" tool-icon="e-icon e-font"></ej-color-picker>
|
||||
</div>
|
||||
</div>
|
||||
<b></b>
|
||||
</div>
|
||||
}
|
||||
@section PropertiesSection{
|
||||
|
||||
<center>KeyBoard Support</center>
|
||||
|
||||
<br />
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Alt+J
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
Focus the Control
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Enter
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
Open or Close the Popup / Choose the current color
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Esc
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
Close the popup
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
|
||||
<center>Color Picker</center>
|
||||
|
||||
</div>
|
||||
<br />
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Tab
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
Choose the next element
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Down
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
Decrease the brightness
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Up
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
Increase the brightness
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Left
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
Decrease the staturation
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Right
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
Increase the staturation
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
<div class="row">
|
||||
|
||||
<center>Color Palette</center>
|
||||
|
||||
</div>
|
||||
<br />
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Down
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
Move to downwards cell
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Up
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
Move to upwards cell
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Left
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
Move to previous cell
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Right
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
Move to next cell
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
|
||||
<center>Slider Only</center>
|
||||
|
||||
</div>
|
||||
<br />
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Home
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
Downwards to value 0
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
End
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
Upwards to value 100
|
||||
</div>
|
||||
</div>
|
||||
|
||||
}
|
||||
@section ScriptSection{
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$("#sampleProperties").ejPropertiesPanel();
|
||||
$(document).on("keydown", function (e) {
|
||||
if (e.altKey && e.keyCode === 74) { // j- key code.
|
||||
$("#colorPickerWrapper").focus();
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
}
|
||||
@section StyleSection{
|
||||
<style>
|
||||
.e-colorwidget .e-tool .e-fontcolor-icon:before {
|
||||
content: "\e632";
|
||||
font-size: 15px;
|
||||
}
|
||||
.frame .control {
|
||||
margin-left: 70px;
|
||||
}
|
||||
</style>
|
||||
}
|
||||
|
|
@ -0,0 +1,215 @@
|
|||
@section MetaTags{
|
||||
<meta name="description" content="This example demonstrates the various methods like show, hide, enable, getValue and disable in a ASP.NET Core ColorPicker">
|
||||
}
|
||||
|
||||
|
||||
@section SampleHeading{<span class="sampleName">ColorPicker/Methods</span> }
|
||||
@section ControlsSection{
|
||||
<div class="frame">
|
||||
<div class="control">
|
||||
<div class="element">
|
||||
Choose a color
|
||||
|
||||
<ej-color-picker id="colorPicker" value="#278787"></ej-color-picker>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
@section PropertiesSection{
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Value (prefix with '#')
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<input type="text" id="color-value" class="input ejinputtext" onchange="onValueChange()" placeholder="Value" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Enable Preview
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<ej-toggle-button id="preview" width="95px" default-text="False" active-text="True" change="onPreview" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Opacity Value
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<ej-numeric-text-box id="opacityValue" show-spin-button="false" min-value="0" max-value="100" watermark-text="Opacity Value" enable-strict-mode="true" change="onOpacityValue" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Enable Opacity
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<ej-toggle-button id="opacity" width="95px" default-text="False" active-text="True" change="onEnableOpacity" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Show Recent Color
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<ej-toggle-button id="recentColor" width="95px" default-text="True" active-text="False" change="onRecentColor" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Enabled
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<ej-toggle-button id="enabled" width="95px" default-text="False" active-text="True" change="onEnabled" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Show Switcher
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<ej-toggle-button id="switcher" width="95px" default-text="False" active-text="True" change="onSwitcher" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Show Buttons
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<ej-toggle-button id="showButton" width="95px" default-text="False" active-text="True" change="onShowButton" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Get HexCode
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<input type="button" class="e-btn e-select" id="hexCode" value="Value" onclick="getHexCode()" />
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
@section ScriptSection{
|
||||
<script type="text/javascript">
|
||||
var ColorObj;
|
||||
$(function () {
|
||||
ColorObj = $("#colorPicker").data('ejColorPicker');
|
||||
$("#sampleProperties").ejPropertiesPanel();
|
||||
});
|
||||
$("#color-value").keypress(function (event) {
|
||||
var keycode = (event.keyCode ? event.keyCode : event.which);
|
||||
if (keycode == '13') {
|
||||
if ($("#color-value").val() !== "") {
|
||||
if ($("#color-value").val().length == 4 || $("#color-value").val().length == 7)
|
||||
ColorObj.option('value', $("#color-value").val());
|
||||
}
|
||||
}
|
||||
});
|
||||
$("#opacityValue").keypress(function (event) {
|
||||
var keycode = (event.keyCode ? event.keyCode : event.which);
|
||||
if (keycode == '13')
|
||||
ColorObj.option('opacityValue', $("#opacityValue").val());
|
||||
});
|
||||
function onValueChange() {
|
||||
if ($("#color-value").val() !== "") {
|
||||
if ($("#color-value").val().length == 4 || $("#color-value").val().length == 7)
|
||||
ColorObj.option('value', $("#color-value").val());
|
||||
}
|
||||
}
|
||||
function onSwitcher(args) {
|
||||
var ColorObj = $("#colorPicker").data('ejColorPicker');
|
||||
if (args.isChecked) ColorObj.option('showSwitcher', false);
|
||||
else ColorObj.option('showSwitcher', true);
|
||||
}
|
||||
function onShowButton(args) {
|
||||
var ColorObj = $("#colorPicker").data('ejColorPicker');
|
||||
if (args.isChecked) ColorObj.option('showApplyCancel', false);
|
||||
else ColorObj.option('showApplyCancel', true);
|
||||
}
|
||||
function onOpacityValue(args) {
|
||||
args.value !== "" && ColorObj.option('opacityValue', args.value);
|
||||
}
|
||||
function onEnabled(args) {
|
||||
var ColorObj = $("#colorPicker").data('ejColorPicker');
|
||||
if (args.isChecked) {
|
||||
ColorObj.option('enabled', false);
|
||||
$(".fadetext").addClass("e-disable");
|
||||
}
|
||||
else {
|
||||
ColorObj.option('enabled', true);
|
||||
$(".fadetext").removeClass("e-disable");
|
||||
}
|
||||
}
|
||||
function onRecentColor(args) {
|
||||
var ColorObj = $("#colorPicker").data('ejColorPicker');
|
||||
if (args.isChecked) ColorObj.option('showRecentColors', true);
|
||||
else ColorObj.option('showRecentColors', false);
|
||||
}
|
||||
function onEnableOpacity(args) {
|
||||
var ColorObj = $("#colorPicker").data('ejColorPicker');
|
||||
var numericObj = $("#opacityValue").data('ejNumericTextbox');
|
||||
if (args.isChecked) {
|
||||
ColorObj.option('enableOpacity', false);
|
||||
numericObj.disable();
|
||||
}
|
||||
else {
|
||||
ColorObj.option('enableOpacity', true);
|
||||
numericObj.enable();
|
||||
}
|
||||
}
|
||||
function onPreview(args) {
|
||||
var ColorObj = $("#colorPicker").data('ejColorPicker');
|
||||
if (args.isChecked) ColorObj.option('showPreview', false);
|
||||
else ColorObj.option('showPreview', true);
|
||||
}
|
||||
function getHexCode() {
|
||||
var ColorObj = $("#colorPicker").data('ejColorPicker');
|
||||
setTimeout(function () { alert("The Colorpicker value : " + ColorObj.getValue()); }, 250);
|
||||
}
|
||||
|
||||
</script>
|
||||
}
|
||||
@section StyleSection{
|
||||
<style>
|
||||
.frame .control {
|
||||
margin-left: 70px;
|
||||
}
|
||||
|
||||
.cols-sample-area .frame {
|
||||
margin-left: 30%;
|
||||
padding: 50px 60px 65px;
|
||||
width: 206px;
|
||||
}
|
||||
|
||||
.prop-grid .row .e-btn.e-select {
|
||||
width: 95px;
|
||||
}
|
||||
|
||||
.row #hexCode {
|
||||
width: 95px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.e-bootstrap .row #hexCode {
|
||||
height: 34px;
|
||||
}
|
||||
|
||||
.input.ejinputtext {
|
||||
text-indent: 10px;
|
||||
width: 93px;
|
||||
height: 26px;
|
||||
}
|
||||
|
||||
.e-btn {
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.e-bootstrap .input.ejinputtext {
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.row .e-widget.e-numeric {
|
||||
width: 95px;
|
||||
}
|
||||
</style>
|
||||
}
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
@section MetaTags{
|
||||
<meta name="description" content="This example demonstrates how to specify the palette and picker model type in a ASP.NET Core ColorPicker">
|
||||
}
|
||||
|
||||
@section SampleHeading{<span class="sampleName">ColorPicker / Palette Model </span>}
|
||||
@section ControlsSection{
|
||||
<div class="frame">
|
||||
<div class="control">
|
||||
<div class="element">
|
||||
Choose a Color
|
||||
<ej-color-picker id="Palette" value="#ba4" model-type="@ModelType.Palette"></ej-color-picker>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
@section StyleSection{
|
||||
<style>
|
||||
.frame .control {
|
||||
margin-left: 70px;
|
||||
}
|
||||
</style>
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,93 @@
|
|||
@section MetaTags{
|
||||
<meta name="description" content="This example demonstrates how to specify the presets in a ASP.NET Core ColorPicker">
|
||||
}
|
||||
|
||||
@section SampleHeading{<span class="sampleName">ColorPicker/Presets</span> }
|
||||
@section ControlsSection{
|
||||
<div class="content-container-fluid">
|
||||
<div class="row">
|
||||
<div class="cols-sample-area">
|
||||
<div class="frame">
|
||||
<div class="control">
|
||||
<div class="presets-col">
|
||||
<span>Basic</span>
|
||||
|
||||
<ej-color-picker id="baiscPreset" display-inline="true" tag-name="div" model-type="@ModelType.Palette" preset-type="@PresetsType.Basic" value="#9494c8"></ej-color-picker>
|
||||
</div>
|
||||
<div class="presets-col">
|
||||
<span>Mono Chrome</span>
|
||||
|
||||
<ej-color-picker id="monoChromePreset" display-inline="true" tag-name="div" model-type="@ModelType.Palette" preset-type="@PresetsType.MonoChrome" value="#8e8e8e"></ej-color-picker>
|
||||
</div>
|
||||
<div class="presets-col">
|
||||
<span>Flat Colors</span>
|
||||
|
||||
<ej-color-picker id="flatColorsPreset" display-inline="true" tag-name="div" model-type="@ModelType.Palette" preset-type="@PresetsType.FlatColors" value="#f79853"></ej-color-picker>
|
||||
</div>
|
||||
<div class="presets-col">
|
||||
<span>Sea Wolf</span>
|
||||
|
||||
<ej-color-picker id="seaWolfPreset" display-inline="true" tag-name="div" model-type="@ModelType.Palette" preset-type="@PresetsType.SeaWolf" value="#13647F"></ej-color-picker>
|
||||
</div>
|
||||
<div class="presets-col">
|
||||
<span>Web Colors</span>
|
||||
|
||||
<ej-color-picker id="webColorsPreset" display-inline="true" tag-name="div" model-type="@ModelType.Palette" preset-type="@PresetsType.WebColors" value="#E7C36F"></ej-color-picker>
|
||||
</div>
|
||||
<div class="presets-col">
|
||||
<span>Sandy</span>
|
||||
|
||||
<ej-color-picker id="sandyPreset" display-inline="true" tag-name="div" model-type="@ModelType.Palette" preset-type="@PresetsType.Sandy" value="#EFECCA"></ej-color-picker>
|
||||
</div>
|
||||
<div class="presets-col">
|
||||
<span>Pink Shades</span>
|
||||
|
||||
<ej-color-picker id="pinkShadesPreset" display-inline="true" tag-name="div" model-type="@ModelType.Palette" preset-type="@PresetsType.PinkShades" value="#996072"></ej-color-picker>
|
||||
</div>
|
||||
<div class="presets-col">
|
||||
<span>Misty</span>
|
||||
|
||||
<ej-color-picker id="mistyPreset" display-Inline="true" tag-name="div" model-type="@ModelType.Palette" preset-type="@PresetsType.Misty" value="#0A0D0C"></ej-color-picker>
|
||||
</div>
|
||||
<div class="presets-col">
|
||||
<span>Citrus</span>
|
||||
|
||||
<ej-color-picker id="citrusPreset" display-inline="true" tag-name="div" model-Type="@ModelType.Palette" preset-type="@PresetsType.Citrus" value="#F29727"></ej-color-picker>
|
||||
</div>
|
||||
<div class="presets-col">
|
||||
<span>Vintage</span>
|
||||
|
||||
<ej-color-picker id="vintagePreset" display-inline="true" tag-name="div" model-type="@ModelType.Palette" preset-type="@PresetsType.Vintage" value="#557359"></ej-color-picker>
|
||||
</div>
|
||||
<div class="presets-col">
|
||||
<span>Moon Light</span>
|
||||
|
||||
<ej-color-picker id="moonLightPreset" display-inline="true" tag-name="div" model-type="@ModelType.Palette" preset-type="@PresetsType.MoonLight" value="#383A47"></ej-color-picker>
|
||||
</div>
|
||||
<div class="presets-col">
|
||||
<span>Candy Crush</span>
|
||||
|
||||
<ej-color-picker id="candyCrushPreset" display-inline="true" tag-name="div" model-type="@ModelType.Palette" preset-type="@PresetsType.CandyCrush" value="#97cacb"></ej-color-picker>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
@section StyleSection{
|
||||
<style>
|
||||
.presets-col {
|
||||
margin-bottom: 25px;
|
||||
display: inline-block;
|
||||
margin-right: 35px;
|
||||
}
|
||||
|
||||
.frame {
|
||||
width: auto;
|
||||
border: 0px;
|
||||
padding-left: 30px;
|
||||
}
|
||||
</style>
|
||||
}
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
@section SampleHeading{
|
||||
<span class="sampleName">ComboBox / Cascading</span>}
|
||||
@section ControlsSection{
|
||||
<div class="frame">
|
||||
<div class="row">
|
||||
<div class="col-xs-8 col-sm-4">
|
||||
<span class="txt">Select Group</span>
|
||||
<ej-combo-box id="groupsList" datasource="(IEnumerable<groups>)ViewBag.datasource" placeholder="Select" change="onChange">
|
||||
<e-combo-box-fields text="text" value="parentId"/>
|
||||
</ej-combo-box>
|
||||
</div>
|
||||
<div class="col-xs-8 col-sm-4" >
|
||||
<span class="txt">Select Country</span>
|
||||
<ej-combo-box id="countryList" datasource="(IEnumerable<Countries>)ViewBag.datasource1" enabled="false">
|
||||
<e-combo-box-fields text="text" />
|
||||
</ej-combo-box>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
@section ScriptSection{
|
||||
<script type="text/javascript">
|
||||
function onChange(e) {
|
||||
var ctry = $('#countryList').data("ejComboBox");
|
||||
if (e.model.value == null) ctry.option({ enabled: false });
|
||||
else ctry.option({ enabled: true, query: new ej.Query().where('parentId', 'equal', e.model.value), value: null });
|
||||
}
|
||||
</script>
|
||||
}
|
||||
@section StyleSection{
|
||||
<style class="cssStyles">
|
||||
.frame {
|
||||
height: 70px;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.txt {
|
||||
display: block;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
</style>
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
@section SampleHeading{
|
||||
<span class="sampleName">ComboBox / Data Bining - Local Data</span>}
|
||||
@section ControlsSection{
|
||||
<div class="frame">
|
||||
<div class="control">
|
||||
<ej-combo-box id="selectState" datasource="(IEnumerable<States>)ViewBag.datasource" placeholder="Select a state">
|
||||
<e-combo-box-fields text="countryName" value="index"/>
|
||||
</ej-combo-box>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
@section SampleHeading{
|
||||
<span class="sampleName">Autocomplete / Data Binding - Remote data</span>}
|
||||
@section ControlsSection{
|
||||
<div class="frame">
|
||||
<div class="control">
|
||||
<ej-combo-box id="searchCustomer" query="ej.Query().from('Suppliers').select('SupplierID', 'ContactName')" placeholder="Select a customer" width="100%">
|
||||
<e-datamanager url="//js.syncfusion.com/ejServices/wcf/NorthWind.svc/" offline="false" cross-domain="true"></e-datamanager>
|
||||
<e-combo-box-fields text="ContactName" value="SupplierID" />
|
||||
</ej-combo-box>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
@section SampleHeading{
|
||||
<span class="sampleName">ComboBox / Default Functionalities</span>}
|
||||
@section ControlsSection{
|
||||
<div class="frame">
|
||||
<div class="control">
|
||||
<ej-combo-box id="selectCar" datasource="(IEnumerable<CarsList>)ViewBag.datasource" placeholder="Select a car">
|
||||
<e-combo-box-fields text="text"/>
|
||||
</ej-combo-box>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
@section SampleHeading{
|
||||
<span class="sampleName">ComboBox / Events</span>}
|
||||
@section ControlsSection{
|
||||
<div class="frame">
|
||||
<div class="control">
|
||||
<ej-combo-box id="selectColor" datasource="(IEnumerable<Colors>)ViewBag.datasource" placeholder="Select a color" change="onChange" focus="onFocus" blur="onBlur" select="onSelect" open="onOpen" close="onClose">
|
||||
<e-combo-box-fields text="text" />
|
||||
</ej-combo-box>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
@section EventsDropdown{
|
||||
<ej-drop-down-list id="selectControls_input" target-id="evntname" width="160px" show-checkbox="true" check-all="true" change="evtpropscheckedevent">
|
||||
</ej-drop-down-list>
|
||||
<div id="evntname">
|
||||
<ul>
|
||||
<li>focus</li>
|
||||
<li>blur</li>
|
||||
<li>select</li>
|
||||
<li>change</li>
|
||||
<li>open</li>
|
||||
<li>close</li>
|
||||
</ul>
|
||||
</div>
|
||||
}
|
||||
@section ScriptSection{
|
||||
<script type="text/javascript" class="jsScript">
|
||||
var comboboxObj;
|
||||
function evtpropscheckedevent(args) {
|
||||
comboboxObj = $("#selectColor").data("ejComboBox");
|
||||
if (args.isChecked) {
|
||||
switch (args.selectedText) {
|
||||
case "focus": comboboxObj.option(args.selectedText, "onFocus"); break;
|
||||
case "blur": comboboxObj.option(args.selectedText, "onBlur"); break;
|
||||
case "select": comboboxObj.option(args.selectedText, "onSelect"); break;
|
||||
case "change": comboboxObj.option(args.selectedText, "onChange"); break;
|
||||
case "open": comboboxObj.option(args.selectedText, "onOpen"); break;
|
||||
case "close": comboboxObj.option(args.selectedText, "onClose"); break;
|
||||
}
|
||||
}
|
||||
else comboboxObj.option(args.selectedText, null);
|
||||
}
|
||||
// Client side Events
|
||||
function onCreate(args) {
|
||||
jQuery.addEventLog("ComboBox has been <span class='eventTitle'>created</span>.");
|
||||
}
|
||||
function onFocus(args) {
|
||||
jQuery.addEventLog("ComboBox is in <span class='eventTitle'>focus</span>. ");
|
||||
}
|
||||
function onBlur(args) {
|
||||
jQuery.addEventLog("ComboBox is out of <span class='eventTitle'>focus</span>.");
|
||||
}
|
||||
function onSelect(args) {
|
||||
jQuery.addEventLog("The value '" + args.value + "' has been <span class='eventTitle'>selected</span>.");
|
||||
}
|
||||
function onChange(args) {
|
||||
jQuery.addEventLog("The value has been <span class='eventTitle'>changed</span> to '" + args.value + "'.");
|
||||
}
|
||||
function onOpen(args) {
|
||||
jQuery.addEventLog("Suggestion List has been <span class='eventTitle'>opened</span>.");
|
||||
}
|
||||
function onClose(args) {
|
||||
jQuery.addEventLog("Suggestion List has been <span class='eventTitle'>closed</span>.");
|
||||
}
|
||||
function onClear() {
|
||||
jQuery.clearEventLog();
|
||||
}
|
||||
</script>
|
||||
}
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
@section SampleHeading{
|
||||
<span class="sampleName">ComboBox / Filtering</span>}
|
||||
@section ControlsSection{
|
||||
<div class="frame">
|
||||
<div class="control">
|
||||
<ej-combo-box id="searchCustomer" datasource="(IEnumerable<Countries>)ViewBag.datasource" placeholder="Select a country" allow-filtering="true" width="100%" filtering="filtering">
|
||||
<e-combo-box-fields text="text" />
|
||||
</ej-combo-box>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
function filtering(e) {
|
||||
var query = new ej.Query();
|
||||
query = (e.text !== '') ? query.where('text', 'startswith', e.text, true) : query;
|
||||
e.updateData(e.model.dataSource, query);
|
||||
}
|
||||
</script>
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
@section SampleHeading{
|
||||
<span class="sampleName">ComboBox / Grouping</span>}
|
||||
@section ControlsSection{
|
||||
<div class="frame">
|
||||
<div class="control">
|
||||
<ej-combo-box id="groupingCountry" datasource="(IEnumerable<Countries>)ViewBag.datasource" placeholder="Select a country" width="100%">
|
||||
<e-combo-box-fields text="text" group-by="category" />
|
||||
</ej-combo-box>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
@section SampleHeading{
|
||||
<span class="sampleName">ComboBox / Icons</span>}
|
||||
@section ControlsSection{
|
||||
<div class="frame">
|
||||
<div class="control">
|
||||
<ej-combo-box id="selectmailtools" datasource="(IEnumerable<IconCss>)ViewBag.datasource" placeholder="Select a icon" width="100%">
|
||||
<e-combo-box-fields text="Name" icon-css="IconClass" />
|
||||
</ej-combo-box>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
@section StyleSection{
|
||||
<link href="@Url.Content("~/css/samples/drpdwnicon.css")" rel="stylesheet" />
|
||||
}
|
||||
|
|
@ -0,0 +1,86 @@
|
|||
@section SampleHeading{
|
||||
<span class="sampleName">ComboBox / Autofill</span>}
|
||||
@section ControlsSection{
|
||||
<div class="frame">
|
||||
<div class="control">
|
||||
<ej-combo-box id="selectFlower" auto-fill="true" datasource="(IEnumerable<Flowers>)ViewBag.datasource" placeholder="Select a flower">
|
||||
<e-combo-box-fields text="text" />
|
||||
</ej-combo-box>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
@section PropertiesSection{
|
||||
@*<div class="row">
|
||||
<div class="col-md-3">
|
||||
Select an item by index
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<ej-drop-down-list id="optionIndexChange" width="105px" datasource="(IEnumerable<Books>)ViewBag.datasource" change="onActiveIndexChange" watermark-text="Select">
|
||||
<e-drop-down-list-fields text="text" id="id" />
|
||||
</ej-drop-down-list>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
Select an item by value
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<ej-drop-down-list id="optionValueChange" width="105px" datasource="(IEnumerable<Books>)ViewBag.datasource" change="onActiveValueChange" watermark-text="Select">
|
||||
<e-drop-down-list-fields text="category" value="category" />
|
||||
</ej-drop-down-list>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Select an item by text
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<ej-drop-down-list id="optionTextChange" width="105px" datasource="(IEnumerable<Books>)ViewBag.datasource" change="onActiveTextChange" watermark-text="Select">
|
||||
<e-drop-down-list-fields text="category" value="category" />
|
||||
</ej-drop-down-list>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
TextBox Value
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<ej-button id="Buton" text="Value" width="105px" click="valuetext" />
|
||||
</div>
|
||||
</div>*@
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
AutoFill
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<ej-toggle-button id="autofill" width="105px" default-text="Disable" active-text="Enable" change="autoFillChange" />
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
Sorting
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<ej-toggle-button id="sorting" width="105px" default-text="Descending" active-text="Ascending" change="sortingChange" />
|
||||
</div>
|
||||
@*<div class="col-md-3">
|
||||
Case-Sensitive Search
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<ej-toggle-button id="casesensitivebutton" width="105px" default-text="Disable" active-text="Enable" change="casesensitivechange" />
|
||||
</div>*@
|
||||
</div>
|
||||
}
|
||||
@section ScriptSection{
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$("#sampleProperties").ejPropertiesPanel();
|
||||
});
|
||||
var target;
|
||||
function autoFillChange(args) {
|
||||
target = $('#selectFlower').data("ejComboBox");
|
||||
(args.isChecked) ? target.option("autofill", true) : target.option("autofill", false);
|
||||
|
||||
}
|
||||
function sortingChange(args) {
|
||||
target = $('#selectFlower').data("ejComboBox");
|
||||
(args.isChecked) ? target.option("sortOrder", "Ascending") : target.option("sortOrder", "Descending");
|
||||
|
||||
}
|
||||
</script>
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
@section SampleHeading{
|
||||
<span class="sampleName">ComboBox / Rtl</span>}
|
||||
@section ControlsSection{
|
||||
<div class="frame">
|
||||
<div class="control">
|
||||
<ej-combo-box id="selectCar" datasource="(IEnumerable<CarsList>)ViewBag.datasource" placeholder="Select a car" width="100%" enable-rtl="true">
|
||||
<e-combo-box-fields text="text" />
|
||||
</ej-combo-box>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
@section SampleHeading{
|
||||
<span class="sampleName">ComboBox / Template</span>}
|
||||
@section ControlsSection{
|
||||
<div class="frame">
|
||||
<div class="control">
|
||||
@*@{
|
||||
Html.EJ()
|
||||
.ComboBox("selectCountry")
|
||||
.Width("100%")
|
||||
.Datasource((IEnumerable<empList>)ViewBag.datasource)
|
||||
.ComboBoxFields(h=>h.Text("text").GroupBy("country"))
|
||||
.HeaderTemplate("<div class=\"head\"> Photo <span style=\"padding-left:42px\"> Contact Info </span></div>")
|
||||
.ItemTemplate("<div><img class=\"eimg\" src=\"../Images/combobox/${eimg}.png\" alt=\"employee\"/><div class=\"ename\"> ${text} </div><div class=\"temp\"> ${country} </div></div>")
|
||||
.FooterTemplate("<div class=\"Foot\"> Total Items Count: 5 </div>")
|
||||
.Placeholder("Select a country")
|
||||
.Render();
|
||||
}*@
|
||||
<ej-combo-box id="selectCountry" datasource="(IEnumerable<empList>)ViewBag.datasource" placeholder="Select a country" width="100%" header-template="<div class='head'> Photo <span style='padding-left:42px'> Contact Info </span></div>" item-template="<div><img class='eimg' src='../images/combobox/${eimg}.png' alt='employee'/><div class='ename'> ${text} </div><div class='temp'> ${country} </div></div>" footer-template="<div class='Foot'> Total Items Count: 5 </div>">
|
||||
<e-combo-box-fields text="text" />
|
||||
</ej-combo-box>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.head {
|
||||
background-color: #a9a9a9;
|
||||
height: 30px;
|
||||
font-weight: bold;
|
||||
padding: 14px 0 0 20px;
|
||||
}
|
||||
|
||||
.Foot {
|
||||
background-color: #dadada;
|
||||
vertical-align: middle;
|
||||
padding: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.ename {
|
||||
font-weight: bold;
|
||||
display: block !important;
|
||||
opacity: .87;
|
||||
}
|
||||
|
||||
.tempName {
|
||||
padding: 5px 42px;
|
||||
opacity: .87;
|
||||
}
|
||||
|
||||
.temp {
|
||||
margin-top: -15px;
|
||||
opacity: .54;
|
||||
}
|
||||
|
||||
.eimg {
|
||||
border-radius: 50%;
|
||||
padding: 10px 16px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.tempImg {
|
||||
padding-bottom: 3px;
|
||||
border-radius: 50%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.e-dropdownbase .e-list-item * {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
}
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
@section MetaTags{
|
||||
<meta name="description" content="DatePicker for ASP.NET Core with the strongly typed extension support. Value is set from the code behind by invoking DatePickerFor helper">
|
||||
}
|
||||
|
||||
@section ScriptReferenceSection{
|
||||
<script src="@Url.Content("~/Scripts/cultures/ej.culture.en-US.min.js")"></script>
|
||||
}
|
||||
@section SampleHeading{<span class="sampleName">DatePicker / DatePickerFor</span> }
|
||||
|
||||
@model samplebrowser.Controllers.DatePickerController.datemodel
|
||||
|
||||
|
||||
@section ControlsSection{
|
||||
@using (Html.BeginForm())
|
||||
{
|
||||
@Html.ValidationSummary(true)
|
||||
<div class="frame">
|
||||
<div class="control">
|
||||
<ej-date-picker id="datepick" ej-for="@Model.Value"
|
||||
validation-rules='new Dictionary<string, object>() { { "required",true} }'
|
||||
validation-messages='new Dictionary<string, object>() { { "required","Date value is required"} }' />
|
||||
@Html.ValidationMessageFor(model=>model.Value)
|
||||
<ej-button id="button" text="Post" type="Submit"/>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@section StyleSection{
|
||||
<style>
|
||||
#button {
|
||||
margin-left: 30px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
</style>
|
||||
}
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
@section MetaTags{
|
||||
<meta name="description" content="This example demonstrates how to disables the specific range of dates (min and max) in a ASP.NET Core DatePicker.">
|
||||
}
|
||||
|
||||
@section ScriptReferenceSection{
|
||||
<script src="@Url.Content("~/Scripts/cultures/ej.culture.en-US.min.js")"></script>
|
||||
}
|
||||
@section SampleHeading{
|
||||
<span class="sampleName">DatePicker / DateRange</span> }
|
||||
@section ControlsSection{
|
||||
<div class="frame">
|
||||
<span class="acc">
|
||||
|
||||
</span><span class="firstdp">
|
||||
<span class="innerdp">
|
||||
<ej-date-picker id="daterange1" date-format="MM/dd/yyyy" min-date="DateTime.Now.AddDays(-7).GetDateTimeFormats()[3]" max-date="DateTime.Now.AddMonths(3).GetDateTimeFormats()[3]" value="DateTime.Now.GetDateTimeFormats()[3]" select="selectedDate1"></ej-date-picker>
|
||||
</span>
|
||||
|
||||
</span><span class="seconddp">
|
||||
<span class="innerdp">
|
||||
<ej-date-picker id="daterange2" date-format="MM/dd/yyyy" min-date="DateTime.Now.GetDateTimeFormats()[3]" max-date="DateTime.Now.AddMonths(3).GetDateTimeFormats()[3]" value="DateTime.Now.AddDays(7).GetDateTimeFormats()[3]" select="selectedDate2"></ej-date-picker>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
}
|
||||
@section ScriptSection{
|
||||
<script type="text/javascript">
|
||||
var maxDatepicker = null;
|
||||
var minDatepicker = null;
|
||||
$(function () {
|
||||
// declaration
|
||||
maxDatepicker = $("daterange1").data("ejDatePicker");
|
||||
minDatepicker = $("daterange2").data("ejDatePicker");
|
||||
});
|
||||
function selectedDate1(sender) {
|
||||
$(function () {
|
||||
maxDatepicker = $("#daterange2").data("ejDatePicker");
|
||||
minDatepicker1 = $("#daterange1").data("ejDatePicker");
|
||||
maxDatepicker.setModel({ "minDate": new Date(sender.value) });
|
||||
var curDate = new Date(sender.value);
|
||||
maxDatepicker.setModel({ value: new Date(curDate.getFullYear(), curDate.getMonth(), curDate.getDate() + 7) });
|
||||
});
|
||||
|
||||
}
|
||||
function selectedDate2(sender) {
|
||||
$(function () {
|
||||
minDatepicker = $("#daterange1").data("ejDatePicker");
|
||||
minDatepicker.setModel({ "maxDate": new Date(sender.value) });
|
||||
});
|
||||
}
|
||||
|
||||
</script>
|
||||
}
|
||||
@section StyleSection{
|
||||
<link href="~/css/samples/datepickerdaterange.css" rel="stylesheet" />
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
@section MetaTags{
|
||||
<meta name="description" content="This example demonstrates how to show the other months dates in a ASP.NET Core DatePicker">
|
||||
}
|
||||
|
||||
@section ScriptReferenceSection{
|
||||
<script src="@Url.Content("~/Scripts/cultures/ej.culture.en-US.min.js")"></script>
|
||||
}
|
||||
@section SampleHeading{<span class="sampleName">DatePicker / DatesinOthermonths</span> }
|
||||
|
||||
@section ControlsSection{
|
||||
<div class="frame">
|
||||
<div class="control" style="margin-left:35px;">
|
||||
<ej-date-picker id="DatePick" value="DateTime.Now" show-other-months="false"></ej-date-picker>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
@section PropertiesSection{
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<span>
|
||||
Show Dates In Other Month
|
||||
</span>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<ej-check-box id="check" change="onchange" />
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
@section ScriptSection{
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$("#sampleProperties").ejPropertiesPanel();
|
||||
});
|
||||
|
||||
function onchange(args) {
|
||||
var datebject = $("#DatePick").data("ejDatePicker");
|
||||
if (args.isChecked)
|
||||
datebject.setModel({ showOtherMonths: true });
|
||||
else {
|
||||
datebject.setModel({ showOtherMonths: false });
|
||||
}
|
||||
}
|
||||
</script>
|
||||
}
|
||||
@section StyleSection{
|
||||
<style type="text/css" class="cssStyles">
|
||||
.cols-prop-area .content {
|
||||
overflow-y: visible;
|
||||
}
|
||||
</style>
|
||||
}
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
@section MetaTags{
|
||||
<meta name="description" content="This example demonstrates a simple, mobile-friendly and responsive ASP.NET Core DatePicker to select a date.">
|
||||
}
|
||||
|
||||
@section ScriptReferenceSection{
|
||||
<script src="@Url.Content("~/Scripts/cultures/ej.culture.en-US.min.js")"></script>
|
||||
}
|
||||
@section SampleHeading{<span class="sampleName">DatePicker / Default</span> }
|
||||
@section ControlsSection{
|
||||
<div class="frame">
|
||||
<div class="control" style="margin-left:35px;">
|
||||
<ej-date-picker id="DatePick" value="DateTime.Today"></ej-date-picker>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
@section MetaTags{
|
||||
<meta name="description" content="This example demonstrates how to show the DatePicker in the inline mode in ASP.NET Core">
|
||||
}
|
||||
|
||||
@section ScriptReferenceSection{
|
||||
<script src="@Url.Content("~/Scripts/cultures/ej.culture.en-US.min.js")"></script>
|
||||
}
|
||||
@section SampleHeading{<span class="sampleName">DatePicker / DisplayInline </span>}
|
||||
@section ControlsSection{
|
||||
<div class="frame">
|
||||
<ej-date-picker id="DatePick" tag-name="div" display-inline="true" show-footer="false" select="onSelected"></ej-date-picker>
|
||||
<div id="col-md-3">Select a date</div>
|
||||
</div>
|
||||
}
|
||||
@section ScriptSection{
|
||||
<script type="text/javascript">
|
||||
function onSelected(args) {
|
||||
$("#col-md-3").html("Selected date : " + args.value);
|
||||
}
|
||||
$("#sampleProperties").ejPropertiesPanel();
|
||||
</script>
|
||||
}
|
||||
@section StyleSection{
|
||||
<style>
|
||||
.darktheme .frame, .frame {
|
||||
padding: 21px 0px 10px 46px;
|
||||
width: 280px;
|
||||
}
|
||||
|
||||
#col-md-3 {
|
||||
margin-top: 5px;
|
||||
margin-left: 25px;
|
||||
}
|
||||
</style>
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
@section MetaTags{
|
||||
<meta name="description" content="This example demonstrates the various events like created, selected, open and close in a ASP.NET Core DatePicker">
|
||||
}
|
||||
|
||||
@section ScriptReferenceSection{
|
||||
<script src="@Url.Content("~/Scripts/cultures/ej.culture.en-US.min.js")"></script>
|
||||
}
|
||||
@section SampleHeading{<span class="sampleName">DatePicker / Events</span> }
|
||||
@section ControlsSection{
|
||||
<div class="frame">
|
||||
<div class="control" style="margin-left:35px;">
|
||||
<ej-date-picker id="DatePick" create="onCreate" select="onSelected" open="onOpen" close="onClose"></ej-date-picker>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
<div id="target">
|
||||
<ul>
|
||||
<li>create</li>
|
||||
<li>select</li>
|
||||
<li>open</li>
|
||||
<li>close</li>
|
||||
</ul>
|
||||
</div>
|
||||
@section EventsDropdown{
|
||||
<ej-drop-down-list id="selectControls_input" target-id="target" css-class="metroblue" show-checkbox="true" check-all="true" change="evtpropscheckedevent"></ej-drop-down-list>
|
||||
}
|
||||
@section ScriptSection{
|
||||
<script type="text/javascript">
|
||||
// Client side Events
|
||||
function onCreate(args) {
|
||||
jQuery.addEventLog("DatePicker has been <span class='eventTitle'>created.</span>");
|
||||
}
|
||||
function onSelected(args) {
|
||||
jQuery.addEventLog(args.value + " was <span class='eventTitle'>selected.</span>");
|
||||
}
|
||||
function onOpen(args) {
|
||||
jQuery.addEventLog("DatePicker popup has been <span class='eventTitle'>opened.</span>");
|
||||
}
|
||||
function onClose(args) {
|
||||
jQuery.addEventLog("DatePicker popup has been <span class='eventTitle'>closed.</span>");
|
||||
}
|
||||
|
||||
function onClear() {
|
||||
jQuery.clearEventLog();
|
||||
}
|
||||
function evtpropscheckedevent(args) {
|
||||
var dpObj = $("#DatePick").data("ejDatePicker");
|
||||
if (args.isChecked) {
|
||||
switch (args.selectedText) {
|
||||
case "select": dpObj.option(args.selectedText, "onSelected"); break;
|
||||
case "open": dpObj.option(args.selectedText, "onOpen"); break;
|
||||
case "close": dpObj.option(args.selectedText, "onClose"); break
|
||||
case "create": dpObj.option(args.selectedText, "onCreate"); break;
|
||||
}
|
||||
}
|
||||
else {
|
||||
dpObj.option(args.selectedText, null);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
}
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
@section MetaTags{
|
||||
<meta name="description" content="This example demonstrates how to change the date format in the input field based on the format in a ASP.NET Core DatePicker">
|
||||
}
|
||||
|
||||
|
||||
@section ScriptReferenceSection{
|
||||
<script src="@Url.Content("~/Scripts/cultures/ej.culture.en-US.min.js")"></script>
|
||||
}
|
||||
@section SampleHeading{<span class="sampleName">DatePicker / Format</span> }
|
||||
@section ControlsSection{
|
||||
<div class="frame">
|
||||
<div class="control" style="margin-left:35px;">
|
||||
<ej-date-picker id="DatePick" value="DateTime.Today" date-format="MM/dd/yyyy"></ej-date-picker>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
<div id="droplist">
|
||||
<ul>
|
||||
<li>MM/dd/yyyy</li>
|
||||
<li>d M, y</li>
|
||||
<li>d MM, y</li>
|
||||
<li>dddd, d MMMM, yy</li>
|
||||
<li>yyyy-MM-dd</li>
|
||||
</ul>
|
||||
</div>
|
||||
@section PropertiesSection{
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<span>Select Format</span>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<ej-drop-down-list id="drop" target-id="droplist" width="120px" selected-item-index="0" change="onchange"></ej-drop-down-list>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
}
|
||||
@section ScriptSection{
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$("#sampleProperties").ejPropertiesPanel();
|
||||
});
|
||||
function onchange(args) {
|
||||
var datebject = $("#DatePick").data("ejDatePicker");
|
||||
datebject.setModel({ dateFormat: args.text });
|
||||
}
|
||||
|
||||
</script>
|
||||
}
|
||||
|
|
@ -0,0 +1,133 @@
|
|||
@section MetaTags{
|
||||
<meta name="description" content="This example demonstrates how the datepicker supports the keyboard navigation(keyboard shortcuts) in a ASP.NET Core">
|
||||
}
|
||||
|
||||
@section ScriptReferenceSection{
|
||||
<script src="@Url.Content("~/Scripts/cultures/ej.culture.en-US.min.js")"></script>
|
||||
}
|
||||
@section SampleHeading{<span class="sampleName">DatePicker / Keyboard</span> }
|
||||
@section ControlsSection{
|
||||
<div class="frame">
|
||||
<div class="control" style="margin-left:35px;">
|
||||
<ej-date-picker id="DatePick"></ej-date-picker>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
@section PropertiesSection{
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Alt + j
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
Focuses the control
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Alt + Down
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
Opens the popup
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Left
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
Moves to previous date
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Right
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
Moves to next date
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Up
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
Moves one week upward
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Down
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
Moves one week downward
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Enter
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
Selects the focused date
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Alt + Enter
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
Selects the today date
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Esc
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
Closes the popup
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Ctrl + Up
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
Navigates to top view
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Ctrl + Down
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
Navigates to lower view
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Ctrl + Left
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
Navigates to previous month
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Ctrl + Right
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
Navigates to next month
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
@section ScriptSection{
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$("#sampleProperties").ejPropertiesPanel();
|
||||
$(document).on("keydown", function (e) {
|
||||
if (e.altKey && e.keyCode === 74) { // j- key code.
|
||||
$("#DatePick").focus();
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
}
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
@section MetaTags{
|
||||
<meta name="description" content="This example demonstrates how to localize the datepicker in a ASP.NET Core">
|
||||
}
|
||||
|
||||
@section ScriptReferenceSection{
|
||||
<script src="@Url.Content("~/Scripts/cultures/ej.culture.en-US.min.js")"></script>
|
||||
<script src="@Url.Content("~/Scripts/cultures/ej.culture.de-DE.min.js")"></script>
|
||||
<script src="@Url.Content("~/Scripts/cultures/ej.culture.fr-FR.min.js")"></script>
|
||||
<script src="@Url.Content("~/Scripts/cultures/ej.culture.vi-VN.min.js")"></script>
|
||||
<script src="@Url.Content("~/Scripts/cultures/ej.culture.zh-CN.min.js")"></script>
|
||||
}
|
||||
@section SampleHeading{<span class="sampleName">DatePicker / Localization</span> }
|
||||
@section ControlsSection{
|
||||
<div class="frame">
|
||||
<div class="control" style="margin-left:35px;">
|
||||
<ej-date-picker id="DatePick" value="DateTime.Now" locale="fr-FR"></ej-date-picker>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
<div id="droplist">
|
||||
<ul>
|
||||
<li>en-US</li>
|
||||
<li>vi-VN</li>
|
||||
<li>fr-FR</li>
|
||||
</ul>
|
||||
</div>
|
||||
@section PropertiesSection{
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<span>Select Culture</span>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<ej-drop-down-list id="drop" target-id="droplist" width="110px" selected-item-index="2" change="onchange"></ej-drop-down-list>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
@section ScriptSection{
|
||||
<script type="text/javascript">
|
||||
function onchange(args) {
|
||||
var datebject = $("#DatePick").data("ejDatePicker");
|
||||
datebject.setModel({ locale: args.text });
|
||||
}
|
||||
|
||||
$("#sampleProperties").ejPropertiesPanel();
|
||||
|
||||
ej.DatePicker.Locale['fr-FR'] = {
|
||||
watermarkText: "Sélectionner une date",
|
||||
buttonText: "Aujourd'hui"
|
||||
};
|
||||
ej.DatePicker.Locale['vi-VN'] = {
|
||||
watermarkText: "Chọn ngày",
|
||||
buttonText: 'Hôm nay'
|
||||
};
|
||||
|
||||
</script>
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
@section MetaTags{
|
||||
<meta name="description" content="This example demonstrates the various methods like show, hide, enable and disable in a ASP.NET Core DatePicker">
|
||||
}
|
||||
|
||||
@section ScriptReferenceSection{
|
||||
<script src="@Url.Content("~/Scripts/cultures/ej.culture.en-US.min.js")"></script>
|
||||
}
|
||||
@section SampleHeading{<span class="sampleName">DatePicker/Methods</span> }
|
||||
@section ControlsSection{
|
||||
<div class="frame">
|
||||
<div class="control" style="margin-left:35px;">
|
||||
<ej-date-picker id="datepick" value="DateTime.Now" open="dpOpen" close="dpClose" ></ej-date-picker>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
@section PropertiesSection{
|
||||
<div class="row">
|
||||
<div class="col-md-3">Show / Hide</div>
|
||||
<div class="col-md-3">
|
||||
<ej-check-box id="chkShowHide" change="onShowHide" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3">Enable / disable</div>
|
||||
<div class="col-md-3">
|
||||
<ej-check-box id="enableDisable" checked="true" change="EnableDisable" />
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
@section ScriptSection{
|
||||
<script type="text/javascript">
|
||||
var dateobject, chckobject, temp = false, id = "";
|
||||
$(function () {
|
||||
// declaration
|
||||
dateobject = $("#datepick").data("ejDatePicker");
|
||||
chckobject = $("#chkShowHide").data("ejCheckBox");
|
||||
});
|
||||
function dpOpen(args) {
|
||||
chckobject.setModel({ checked: true });
|
||||
};
|
||||
function dpClose(args) {
|
||||
chckobject.setModel({ checked: false });
|
||||
temp = true;
|
||||
};
|
||||
function onShowHide(args) {
|
||||
if (args.isChecked) {
|
||||
if (id == "ejchkShowHide" && temp) {
|
||||
chckobject.setModel({ checked: false });
|
||||
temp = false;
|
||||
}
|
||||
else
|
||||
dateobject.show();
|
||||
}
|
||||
else
|
||||
dateobject.hide();
|
||||
};
|
||||
function EnableDisable(args) {
|
||||
if (args.isChecked) {
|
||||
dateobject.enable();
|
||||
chckobject.enable();
|
||||
} else {
|
||||
dateobject.disable();
|
||||
chckobject.disable();
|
||||
}
|
||||
};
|
||||
$(document).on('click', function (event) {
|
||||
var ele = event.target;
|
||||
var ele1 = $(ele).parents("#ejchkShowHide");
|
||||
var ele2 = $(ele).parents("#datepick-img");
|
||||
id = (ele1.length == 1 || ele2.length == 1) ? "ejchkShowHide" : "";
|
||||
});
|
||||
$("#sampleProperties").ejPropertiesPanel();
|
||||
</script>
|
||||
}
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
@section MetaTags{
|
||||
<meta name="description" content="This example demonstrates how to enable the rtl property in a ASP.NET Core DatePicker">
|
||||
}
|
||||
|
||||
@section ScriptReferenceSection{
|
||||
<script src="@Url.Content("~/Scripts/cultures/ej.culture.en-US.min.js")"></script>
|
||||
}
|
||||
@section SampleHeading{<span class="sampleName">DatePicker / Rtl</span> }
|
||||
@section ControlsSection{
|
||||
<div class="frame ">
|
||||
<div class="control" style="margin-left:35px;">
|
||||
<ej-date-picker id="DatePick" enable-rtl="true"></ej-date-picker>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
@section MetaTags{
|
||||
<meta name="description" content="This example demonstrates how to highlight the specific dates like weekends, holidays and special dates in a ASP.NET Core DatePicker.">
|
||||
}
|
||||
|
||||
@section ScriptReferenceSection {
|
||||
<script src="@Url.Content("~/Scripts/cultures/ej.culture.en-US.min.js")"></script>
|
||||
}
|
||||
@section SampleHeading{<span class="sampleName">DatePicker / SpecialDates</span> }
|
||||
@section ControlsSection{
|
||||
<div class="frame ">
|
||||
<div class="control">
|
||||
<span>Select Show Date </span>
|
||||
<ej-date-picker id="DatePick" enable-persistence="true" highlight-weekend="true" value="DateTime.Now">
|
||||
<e-special-dates>
|
||||
<e-special-date date="@DateTime.Now.AddDays(-7)" tooltip="America" icon-class="flag-aus" />
|
||||
<e-special-date date="@DateTime.Now.AddDays(-3)" tooltip="Argendina" icon-class="flag-fr" />
|
||||
<e-special-date date="@DateTime.Now.AddDays(0)" tooltip="Bangladesh" icon-class="flag-us" />
|
||||
<e-special-date date="@DateTime.Now.AddDays(5)" tooltip="Brasil" icon-class="flag-ind" />
|
||||
<e-special-date date="@DateTime.Now.AddDays(9)" tooltip="Canada" icon-class="flag-ger" />
|
||||
</e-special-dates>
|
||||
</ej-date-picker>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
@section StyleSection{
|
||||
|
||||
<style>
|
||||
#e-DatePick .e-special-date-icon{
|
||||
background-image: url(../../images/tab/flags.png);
|
||||
background-repeat: no-repeat;
|
||||
width: 16px;
|
||||
height: 12px;
|
||||
display:inline-block;
|
||||
margin-right:3px;
|
||||
}
|
||||
|
||||
#e-DatePick .e-special-date-icon.flag-aus{
|
||||
background-position: 0 -2px;
|
||||
}
|
||||
|
||||
#e-DatePick .e-special-date-icon.flag-fr{
|
||||
background-position: 0 -331px;
|
||||
}
|
||||
|
||||
#e-DatePick .e-special-date-icon.flag-us{
|
||||
background-position: 0 -1121px;
|
||||
}
|
||||
|
||||
#e-DatePick .e-special-date-icon.flag-ind{
|
||||
background-position: -3px -462px;
|
||||
}
|
||||
|
||||
#e-DatePick .e-special-date-icon.flag-ger{
|
||||
background-position: 0 -398px;
|
||||
}
|
||||
|
||||
.e-datepicker.e-calendar {
|
||||
width: 29em;
|
||||
}
|
||||
</style>
|
||||
}
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
@section MetaTags{
|
||||
<meta name="description" content="This example demonstrates how to enable the time options in a ASP.NET Core DatePicker">
|
||||
}
|
||||
|
||||
@section SampleHeading{<span class="sampleName">DateRangePicker / DateTimeRange</span> }
|
||||
@section ControlsSection{
|
||||
<div class="frame">
|
||||
<div class="control">
|
||||
<ej-date-range-picker id="DateRange" enable-time-picker="true" width="100%"></ej-date-range-picker>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
@section StyleSection{
|
||||
<style>
|
||||
.control {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.frame {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.control .e-daterangewidget {
|
||||
width: 225px;
|
||||
margin: auto;
|
||||
}
|
||||
</style>
|
||||
}
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
@section MetaTags{
|
||||
<meta name="description" content="This example demonstrates a simple, mobile-friendly and responsive ASP.NET Core DateRangePicker to select a date.">
|
||||
}
|
||||
|
||||
@section ScriptReferenceSection{
|
||||
<script src="@Url.Content("~/Scripts/cultures/ej.culture.en-US.min.js")"></script>
|
||||
}
|
||||
@section SampleHeading{<span class="sampleName">DateRangePicker / Default</span> }
|
||||
@section ControlsSection{
|
||||
<div class="frame">
|
||||
<div class="control">
|
||||
<ej-date-range-picker id="DateRange" width="100%"></ej-date-range-picker>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
@section StyleSection{
|
||||
<style type="text/css">
|
||||
.control {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.frame{
|
||||
width: 50%;
|
||||
margin:0 auto;
|
||||
}
|
||||
|
||||
.control .e-daterangewidget {
|
||||
width: 225px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
</style>
|
||||
}
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
@section MetaTags{
|
||||
<meta name="description" content="This example demonstrates the various events like create, change, open and close in a ASP.NET Core DateRangePicker">
|
||||
}
|
||||
|
||||
@section ScriptReferenceSection{
|
||||
<script src="@Url.Content("~/Scripts/cultures/ej.culture.en-US.min.js")"></script>
|
||||
}
|
||||
@section SampleHeading{<span class="sampleName">DateRangePicker / Events </span>}
|
||||
@section ControlsSection{
|
||||
<div class="frame">
|
||||
<div class="control">
|
||||
<ej-date-range-picker id="dateRange" create="oncreate" change="timeValChange" open="onOpen" click="Click" close="onClose" width="100%"></ej-date-range-picker>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
<div id="target">
|
||||
<ul>
|
||||
<li>open</li>
|
||||
<li>close</li>
|
||||
<li>change</li>
|
||||
<li>click</li>
|
||||
</ul>
|
||||
</div>
|
||||
@section EventsDropdown{
|
||||
<ej-drop-down-list id="selectControls_input" target-id="target" css-class="metroblue" show-checkbox="true" check-all="true" change="evtpropscheckedevent"></ej-drop-down-list>
|
||||
}
|
||||
@section ScriptSection{
|
||||
<script type="text/javascript">
|
||||
function evtpropscheckedevent(args) {
|
||||
var dateRangeObj = $("#dateRange").data("ejDateRangePicker");
|
||||
if (args.isChecked) {
|
||||
switch (args.selectedText) {
|
||||
case "change": dateRangeObj.option(args.selectedText, "ValChange"); break;
|
||||
case "open": dateRangeObj.option(args.selectedText, "onOpen"); break;
|
||||
case "close": dateRangeObj.option(args.selectedText, "onClose"); break;
|
||||
case "click": dateRangeObj.option(args.selectedText, "Click"); break;
|
||||
}
|
||||
}
|
||||
else dateRangeObj.option(args.selectedText, null);
|
||||
}
|
||||
// Client side Events
|
||||
function oncreate(args) {
|
||||
jQuery.addEventLog("DateRangePicker has been <span class='eventTitle'> created</span>.");
|
||||
}
|
||||
function ValChange(args) {
|
||||
jQuery.addEventLog("DateRangePicker value has been <span class='eventTitle'> changed </span> to " + args.value + ".</br>");
|
||||
}
|
||||
function onOpen(args) {
|
||||
jQuery.addEventLog("DateRangePicker popup has been <span class='eventTitle'> Opened</span>");
|
||||
}
|
||||
function onClose(args) {
|
||||
jQuery.addEventLog("DateRangePicker popup has been <span class='eventTitle'> Closed</span>");
|
||||
}
|
||||
function Click(args) {
|
||||
jQuery.addEventLog("DateRangePicker value has been <span class='eventTitle'> Clicked </span>");
|
||||
}
|
||||
function onClear() {
|
||||
jQuery.clearEventLog();
|
||||
}
|
||||
</script>
|
||||
}
|
||||
@section StyleSection{
|
||||
<style>
|
||||
.control {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.frame {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.control .e-daterangewidget {
|
||||
width: 225px;
|
||||
margin: auto;
|
||||
}
|
||||
</style>
|
||||
}
|
||||
|
|
@ -0,0 +1,82 @@
|
|||
@section MetaTags{
|
||||
<meta name="description" content="This example demonstrates how to localize the daterangepicker in a ASP.NET Core">
|
||||
}
|
||||
|
||||
@section ScriptReferenceSection{
|
||||
<script src="@Url.Content("~/Scripts/cultures/ej.culture.en-US.min.js")"></script>
|
||||
<script src="@Url.Content("~/Scripts/cultures/ej.culture.de-DE.min.js")"></script>
|
||||
<script src="@Url.Content("~/Scripts/cultures/ej.culture.fr-FR.min.js")"></script>
|
||||
<script src="@Url.Content("~/Scripts/cultures/ej.culture.vi-VN.min.js")"></script>
|
||||
<script src="@Url.Content("~/Scripts/cultures/ej.culture.zh-CN.min.js")"></script>
|
||||
}
|
||||
@section SampleHeading{<span class="sampleName">DateRangePicker / Localization</span> }
|
||||
@section ControlsSection{
|
||||
<div class="frame">
|
||||
<div class="control">
|
||||
<ej-date-range-picker id="dateRange" width="100%" locale="en-US"></ej-date-range-picker>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
<div id="droplist">
|
||||
<ul>
|
||||
<li>en-US</li>
|
||||
<li>vi-VN</li>
|
||||
<li>zh-CN</li>
|
||||
</ul>
|
||||
</div>
|
||||
@section PropertiesSection{
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<span>Select Culture</span>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<ej-drop-down-list id="drop" target-id="droplist" width="110px" selected-item-index="0" change="onchange"></ej-drop-down-list>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
@section ScriptSection{
|
||||
<script type="text/javascript">
|
||||
function onchange(args) {
|
||||
var dateRangeobject = $("#dateRange").data("ejDateRangePicker");
|
||||
var texts = {};
|
||||
var placeholder;
|
||||
if (args.text == "en-US") {
|
||||
texts = { apply: "Apply", cancel: "Cancel", reset: "Reset" };
|
||||
placeholder = "Select dateRange";
|
||||
}
|
||||
else if (args.text == "vi-VN") {
|
||||
texts = {
|
||||
apply: "Ứng dụng", cancel: "hủy bỏ", reset: "Thiết lập lại"
|
||||
};
|
||||
placeholder = "Chọn Phạm vi";
|
||||
}
|
||||
else if (args.text == "zh-CN") {
|
||||
texts = {
|
||||
apply: "应用",
|
||||
cancel: "取消",
|
||||
reset: "重启"
|
||||
};
|
||||
placeholder = "选择范围";
|
||||
}
|
||||
|
||||
dateRangeobject.setModel({ "locale": args.text, buttonText: texts, watermarkText: placeholder });
|
||||
}
|
||||
$("#sampleProperties").ejPropertiesPanel();
|
||||
</script>
|
||||
}
|
||||
@section StyleSection{
|
||||
<style>
|
||||
.control {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.frame {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.control .e-daterangewidget {
|
||||
width: 225px;
|
||||
margin: auto;
|
||||
}
|
||||
</style>
|
||||
}
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
@section MetaTags{
|
||||
<meta name="description" content="This example demonstrates the various methods like show, hide, enable, getSelectedRange and disable in a ASP.NET Core DateRangePicker">
|
||||
}
|
||||
|
||||
@section ScriptReferenceSection{
|
||||
<script src="@Url.Content("~/Scripts/cultures/ej.culture.en-US.min.js")"></script>
|
||||
}
|
||||
@section SampleHeading{<span class="sampleName">DateRangePicker/Methods</span> }
|
||||
@section ControlsSection{
|
||||
<div class="frame">
|
||||
<div class="control">
|
||||
<ej-date-range-picker id="dateRange" width="100%" ></ej-date-range-picker>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
@section PropertiesSection{
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<ej-toggle-button id="togbtn" width="95px" default-text="Disable" active-text="Enable" click="changeState" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<ej-button id="gettime" width="95px" size="@ButtonSize.Small" text="Get Range" click="getTime" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<ej-toggle-button id="togvisible" width="95px" default-text="Show" active-text="Hide" click="changeVisible" />
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
@section ScriptSection{
|
||||
<script type="text/javascript">
|
||||
function changeState(args) {
|
||||
var dateRangeObj = $('#dateRange').data("ejDateRangePicker");
|
||||
var toggleObj = $("#togvisible").data("ejToggleButton");
|
||||
if (args.isChecked) {
|
||||
dateRangeObj.disable();
|
||||
toggleObj.disable();
|
||||
}
|
||||
else {
|
||||
dateRangeObj.enable();
|
||||
toggleObj.enable();
|
||||
}
|
||||
}
|
||||
function changeVisible(args) {
|
||||
var dateRangeObj = $('#dateRange').data("ejDateRangePicker");
|
||||
if (args.isChecked)
|
||||
dateRangeObj.popupShow();
|
||||
else dateRangeObj.popupHide();
|
||||
}
|
||||
function getTime(args) {
|
||||
var dateRangeObj = $('#dateRange').data("ejDateRangePicker");
|
||||
alert("StartDate :" + dateRangeObj.getSelectedRange().startDate +" - " + "endDate :"+ dateRangeObj.getSelectedRange().endDate);
|
||||
}
|
||||
$(function () {
|
||||
$("#sampleProperties").ejPropertiesPanel();
|
||||
});
|
||||
</script>
|
||||
}
|
||||
@section StyleSection{
|
||||
<style>
|
||||
.control {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.frame {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.control .e-daterangewidget {
|
||||
width: 225px;
|
||||
margin: auto;
|
||||
}
|
||||
</style>
|
||||
}
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
@section MetaTags{
|
||||
<meta name="description" content="This example demonstrates how to specify the predefined custom date ranges (presets range) like last month, last year and current week in the dropdown popup in a ASP.NET Core">
|
||||
}
|
||||
@section SampleHeading{<span class="sampleName">DateRangePicker / Ranges</span> }
|
||||
@{ DateTime Today = DateTime.Now;}
|
||||
@section ControlsSection{
|
||||
<div class="frame">
|
||||
<div class="control">
|
||||
<ej-date-range-picker id="DateRange" width="100%">
|
||||
<e-ranges>
|
||||
<e-range label="Last 1 Month" range="new List<Object>() { Today.AddMonths(-1).ToString(), Today.ToString() }" />
|
||||
<e-range label="Last 2 Months" range="new List<Object>() { Today.AddMonths(-2).ToString(), Today.ToString() }" />
|
||||
<e-range label="Last Week" range="new List<Object>() { Today.AddDays(-7).ToString(), Today.ToString() }" />
|
||||
</e-ranges>
|
||||
</ej-date-range-picker>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
@section StyleSection{
|
||||
<style>
|
||||
.control {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.frame {
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.control .e-daterangewidget {
|
||||
width: 225px;
|
||||
margin: auto;
|
||||
}
|
||||
</style>
|
||||
}
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
@section MetaTags{
|
||||
<meta name="description" content="DateTimePicker for ASP.NET Core with the strongly typed extension support. Value is set from the code behind by invoking DateTimePickerFor helper">
|
||||
}
|
||||
|
||||
@section ScriptReferenceSection{
|
||||
<script src="@Url.Content("~/Scripts/cultures/ej.culture.en-US.min.js")"></script>
|
||||
}
|
||||
@section SampleHeading{<span class="sampleName">DateTimePicker / DateTimePickerFor</span> }
|
||||
|
||||
@model samplebrowser.Controllers.DateTimePickerController.datetimemodel
|
||||
|
||||
@section ControlsSection{
|
||||
@using (Html.BeginForm())
|
||||
{
|
||||
@Html.ValidationSummary(true)
|
||||
<div class="frame">
|
||||
<div class="control">
|
||||
<ej-date-time-picker id="datetimepick" ej-for="@Model.Value"
|
||||
validation-rules='new Dictionary<string, object>() { { "required",true} }'
|
||||
validation-messages='new Dictionary<string, object>() { { "required","Datetime value is required"} }' />
|
||||
@Html.ValidationMessageFor(model => model.Value)
|
||||
<ej-button id="button" type="Submit" text="Post" />
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@section StyleSection{
|
||||
<style>
|
||||
.control {
|
||||
width: 210px;
|
||||
}
|
||||
|
||||
.control .e-datetime-wrap {
|
||||
width: 175px;
|
||||
}
|
||||
#button {
|
||||
margin-left: 30px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
</style>
|
||||
}
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
@section MetaTags{
|
||||
<meta name="description" content="This example demonstrates a simple, mobile-friendly and responsive ASP.NET Core DateTimePicker to select both date and time.">
|
||||
}
|
||||
@section ScriptReferenceSection{
|
||||
<script src="@Url.Content("~/Scripts/cultures/ej.culture.en-US.min.js")"></script>
|
||||
}
|
||||
@section SampleHeading{<span class="sampleName">DateTimePicker / Default</span> }
|
||||
@section ControlsSection{
|
||||
<div class="frame">
|
||||
<div class="control">
|
||||
<ej-date-time-picker id="DateTime" value="@DateTime.Now"></ej-date-time-picker>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
@section StyleSection{
|
||||
<style>
|
||||
.control {
|
||||
width: 210px;
|
||||
}
|
||||
|
||||
.control .e-datetime-wrap {
|
||||
width: 175px;
|
||||
}
|
||||
</style>
|
||||
}
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
@section MetaTags{
|
||||
<meta name="description" content="This example demonstrates the drill down navigaiton in DateTimPicker and its properties like interval, meridian and enable in a ASP.NET Core ">
|
||||
}
|
||||
|
||||
@section ScriptReferenceSection{
|
||||
<script src="@Url.Content("~/Scripts/cultures/ej.culture.en-US.min.js")"></script>
|
||||
}
|
||||
@section SampleHeading{<span class="sampleName">DateTimePicker / Drilldown</span> }
|
||||
@section ControlsSection{
|
||||
<div class="frame">
|
||||
<div class="control">
|
||||
<ej-date-time-picker id="DateTime" value="@DateTime.Now">
|
||||
<e-time-drill-down enabled="true" interval="5" show-meridian="false" />
|
||||
</ej-date-time-picker>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
@section StyleSection{
|
||||
<style>
|
||||
.control {
|
||||
width: 210px;
|
||||
}
|
||||
|
||||
.control .e-datetime-wrap {
|
||||
width: 175px;
|
||||
}
|
||||
</style>
|
||||
}
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
@section MetaTags{
|
||||
<meta name="description" content="This example demonstrates the various events like create, change, open and close in a ASP.NET Core DateTimePicker">
|
||||
}
|
||||
|
||||
@section ScriptReferenceSection{
|
||||
<script src="@Url.Content("~/Scripts/cultures/ej.culture.en-US.min.js")"></script>
|
||||
}
|
||||
@section SampleHeading{<span class="sampleName">DateTimePicker / Events </span>}
|
||||
@section ControlsSection{
|
||||
<div class="frame">
|
||||
<div class="control">
|
||||
<ej-date-time-picker id="datetime" value="@DateTime.Now" create="oncreate" change="timeValChange" open="onOpen" close="onClose"></ej-date-time-picker>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
<div id="target">
|
||||
<ul>
|
||||
<li>open</li>
|
||||
<li>close</li>
|
||||
<li>change</li>
|
||||
</ul>
|
||||
</div>
|
||||
@section EventsDropdown{
|
||||
<ej-drop-down-list id="selectControls_input" target-id="target" css-class="metroblue" show-checkbox="true" check-all="true" change="evtpropscheckedevent"></ej-drop-down-list>
|
||||
}
|
||||
@section ScriptSection{
|
||||
<script type="text/javascript">
|
||||
function evtpropscheckedevent(args) {
|
||||
var dateTimeObj = $("#dateTime").data("ejDateTimePicker");
|
||||
if (args.isChecked) {
|
||||
switch (args.selectedText) {
|
||||
case "change": dateTimeObj.option(args.selectedText, "timeValChange"); break;
|
||||
case "open": dateTimeObj.option(args.selectedText, "onOpen"); break;
|
||||
case "close": dateTimeObj.option(args.selectedText, "onClose"); break;
|
||||
}
|
||||
}
|
||||
else dateTimeObj.option(args.selectedText, null);
|
||||
}
|
||||
// Client side Events
|
||||
function oncreate(args) {
|
||||
jQuery.addEventLog("Date TimePicker has been <span class='eventTitle'> created</span>.");
|
||||
}
|
||||
function timeValChange(args) {
|
||||
jQuery.addEventLog("Date TimePicker value has been <span class='eventTitle'> changed</span> to " + args.value + ".</br>");
|
||||
}
|
||||
function onOpen(args) {
|
||||
jQuery.addEventLog("Date TimePicker is in <span class='eventTitle'> Opened</span>");
|
||||
}
|
||||
function onClose(args) {
|
||||
jQuery.addEventLog("Date TimePicker is out of <span class='eventTitle'> Closed</span>");
|
||||
}
|
||||
function onClear() {
|
||||
jQuery.clearEventLog();
|
||||
}
|
||||
</script>
|
||||
}
|
||||
@section StyleSection{
|
||||
<style>
|
||||
.control {
|
||||
width: 210px;
|
||||
}
|
||||
|
||||
.control .e-datetime-wrap {
|
||||
width: 175px;
|
||||
}
|
||||
</style>
|
||||
}
|
||||
|
|
@ -0,0 +1,106 @@
|
|||
@section MetaTags{
|
||||
<meta name="description" content="This example demonstrates how the datetimepicker supports the keyboard navigation(keyboard shortcuts) in a ASP.NET Core">
|
||||
}
|
||||
|
||||
@section ScriptReferenceSection{
|
||||
<script src="@Url.Content("~/Scripts/cultures/ej.culture.en-US.min.js")"></script>
|
||||
}
|
||||
@section SampleHeading{<span class="sampleName">DateTimePicker / Keyboard </span>}
|
||||
|
||||
@section ControlsSection{
|
||||
<div class="frame">
|
||||
<div class="control">
|
||||
<ej-date-time-picker id="DateTime" value="@DateTime.Now" width="180px"></ej-date-time-picker>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
@section PropertiesSection{
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Alt + j
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
Focuses the control
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Alt + Down
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
Opens/Hides the popup
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
After popup opened:
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Alt + Left
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
Focus through out the popup container in forward direction
|
||||
</div>
|
||||
<div class="col-md-3"></div>
|
||||
</div>
|
||||
<br />
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Alt + Right
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
Focus through out the popup container in backward direction
|
||||
</div>
|
||||
<div class="col-md-3"></div>
|
||||
</div>
|
||||
<br />
|
||||
<br />
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Enter
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
select the focused control/selects the focused element
|
||||
</div>
|
||||
<div class="col-md-3"></div>
|
||||
</div>
|
||||
<br />
|
||||
<div class="row">
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Esc
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
Closes the popup
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
}
|
||||
@section ScriptSection{
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$("#sampleProperties").ejPropertiesPanel();
|
||||
$(document).on("keydown", function (e) {
|
||||
if (e.altKey && e.keyCode === 74) { // j- key code.
|
||||
$("#DateTime").focus();
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
}
|
||||
@section StyleSection{
|
||||
<style>
|
||||
.control {
|
||||
width: 210px;
|
||||
}
|
||||
|
||||
.control .e-datetime-wrap {
|
||||
width: 175px;
|
||||
}
|
||||
</style>
|
||||
}
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
@section MetaTags{
|
||||
<meta name="description" content="This example demonstrates how to localize the datetimepicker in a ASP.NET Core">
|
||||
}
|
||||
|
||||
@section ScriptReferenceSection{
|
||||
<script src="@Url.Content("~/Scripts/cultures/ej.culture.en-US.min.js")"></script>
|
||||
<script src="@Url.Content("~/Scripts/cultures/ej.culture.de-DE.min.js")"></script>
|
||||
<script src="@Url.Content("~/Scripts/cultures/ej.culture.fr-FR.min.js")"></script>
|
||||
<script src="@Url.Content("~/Scripts/cultures/ej.culture.vi-VN.min.js")"></script>
|
||||
<script src="@Url.Content("~/Scripts/cultures/ej.culture.zh-CN.min.js")"></script>
|
||||
}
|
||||
@section SampleHeading{<span class="sampleName">DateTimePicker / Localization </span>}
|
||||
@section ControlsSection{
|
||||
<div class="frame">
|
||||
<div class="control">
|
||||
<ej-date-time-picker id="dateTime" value="@DateTime.Now" locale="en-US" width="180px"></ej-date-time-picker>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
<div id="culture">
|
||||
<ul>
|
||||
<li>en-US</li>
|
||||
<li>vi-VN</li>
|
||||
<li>zh-CN</li>
|
||||
</ul>
|
||||
</div>
|
||||
@section PropertiesSection{
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Select Culture
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<ej-drop-down-list id="drop" target-id="culture" width="100px" selected-item-index="0" change="onCultureChange"></ej-drop-down-list>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
@section ScriptSection{
|
||||
<script type="text/javascript">
|
||||
function onCultureChange(args) {
|
||||
var dateTimeobject = $("#dateTime").data("ejDateTimePicker");
|
||||
var texts = {};
|
||||
var placeholder;
|
||||
if (args.text == "en-US") {
|
||||
texts = { today: "Today", timeNow: "Time Now", done: "Done", timeTitle: "Time" };
|
||||
placeholder = "Select datetime";
|
||||
}
|
||||
else if (args.text == "vi-VN") {
|
||||
texts = { today: "hôm nay", timeNow: "Bây giờ là", done: "được rồi", timeTitle: "thời gian" };
|
||||
placeholder = "Chọn ngày giờ";
|
||||
}
|
||||
else if (args.text == "zh-CN") {
|
||||
texts = { today: "今天", timeNow: "現在時間", done: "做过", timeTitle: "时间" };
|
||||
placeholder = "选择日期时间";
|
||||
}
|
||||
|
||||
dateTimeobject.setModel({ "locale": args.text, buttonText: texts, watermarkText: placeholder });
|
||||
}
|
||||
$("#sampleProperties").ejPropertiesPanel();
|
||||
</script>
|
||||
}
|
||||
@section StyleSection{
|
||||
<style>
|
||||
.control {
|
||||
width: 210px;
|
||||
}
|
||||
|
||||
.control .e-datetime-wrap {
|
||||
width: 175px;
|
||||
}
|
||||
</style>
|
||||
}
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
@section MetaTags{
|
||||
<meta name="description" content="This example demonstrates how to enable the time merdian support in dateTimePicker by using the properties like interval, meridian and enable in a ASP.NET Core ">
|
||||
}
|
||||
|
||||
@section ScriptReferenceSection{
|
||||
<script src="@Url.Content("~/Scripts/cultures/ej.culture.en-US.min.js")"></script>
|
||||
}
|
||||
@section SampleHeading{<span class="sampleName">DateTimePicker / Meridian</span> }
|
||||
@section ControlsSection{
|
||||
<div class="frame">
|
||||
<div class="control">
|
||||
<ej-date-time-picker id="DateTime" value="@DateTime.Now" >
|
||||
<e-time-drill-down enabled="true" interval="5" show-meridian="true" />
|
||||
</ej-date-time-picker>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
@section StyleSection{
|
||||
<style>
|
||||
.control {
|
||||
width: 210px;
|
||||
}
|
||||
|
||||
.control .e-datetime-wrap {
|
||||
width: 175px;
|
||||
}
|
||||
</style>
|
||||
}
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
@section MetaTags{
|
||||
<meta name="description" content="This example demonstrates the various methods like show, hide, enable, getValue and disable in a ASP.NET Core DateTimePicker">
|
||||
}
|
||||
|
||||
|
||||
@section ScriptReferenceSection{
|
||||
<script src="@Url.Content("~/Scripts/cultures/ej.culture.en-US.min.js")"></script>
|
||||
}
|
||||
@section SampleHeading{<span class="sampleName">DateTimePicker / Methods </span>}
|
||||
@section ControlsSection{
|
||||
<div class="frame">
|
||||
<div class="control">
|
||||
<ej-date-time-picker id="dateTime" value="@DateTime.Now"></ej-date-time-picker>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
@section PropertiesSection{
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<ej-toggle-button id="togbtn" width="95px" default-text="Disable" active-text="Enable" click="changeState"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<ej-button id="gettime" width="95px" size="@ButtonSize.Small" text="Get Time" click="getTime"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<ej-toggle-button id="togvisible" width="95px" default-text="Show" active-text="Hide" click="changeVisible" />
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
@section ScriptSection{
|
||||
<script type="text/javascript">
|
||||
|
||||
function changeState(args) {
|
||||
var dateTimeObj = $('#dateTime').data("ejDateTimePicker");
|
||||
if (args.isChecked) dateTimeObj.disable();
|
||||
else dateTimeObj.enable();
|
||||
}
|
||||
function changeVisible(args) {
|
||||
var dateTimeObj = $('#dateTime').data("ejDateTimePicker");
|
||||
if (args.isChecked)
|
||||
dateTimeObj.show();
|
||||
else dateTimeObj.hide();
|
||||
}
|
||||
function getTime(args) {
|
||||
var dateTimeObj = $('#dateTime').data("ejDateTimePicker");
|
||||
alert("Selected time is : " + dateTimeObj.getValue());
|
||||
}
|
||||
$(function () {
|
||||
$("#sampleProperties").ejPropertiesPanel();
|
||||
});
|
||||
</script>
|
||||
}
|
||||
@section StyleSection{
|
||||
<style>
|
||||
.control {
|
||||
width: 210px;
|
||||
}
|
||||
|
||||
.control .e-datetime-wrap {
|
||||
width: 175px;
|
||||
}
|
||||
</style>
|
||||
}
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
@section MetaTags{
|
||||
<meta name="description" content="This example demonstrates how to enable the rtl property in a ASP.NET Core DateTimePicker">
|
||||
}
|
||||
@section ScriptReferenceSection{
|
||||
<script src="@Url.Content("~/Scripts/cultures/ej.culture.en-US.min.js")"></script>
|
||||
}
|
||||
@section SampleHeading{<span class="sampleName">DateTimePicker / Rtl</span> }
|
||||
@section ControlsSection{
|
||||
<div class="frame">
|
||||
<div class="control">
|
||||
<ej-date-time-picker id="DateTime" value="@DateTime.Now" enable-rtl="true"></ej-date-time-picker>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
@section StyleSection{
|
||||
<style>
|
||||
.control {
|
||||
width: 210px;
|
||||
}
|
||||
|
||||
.control .e-datetime-wrap {
|
||||
width: 175px;
|
||||
}
|
||||
</style>
|
||||
}
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
@using Syncfusion.JavaScript;
|
||||
@using Syncfusion.JavaScript.DataVisualization.DiagramEnums;
|
||||
@section SampleHeading{ <span class="sampleName">Diagram / Default Functionalities</span>}
|
||||
@section MetaTags{
|
||||
<meta name="description" content="This sample demonstrates a generating business management organizational chart with an external data source and ASP.NET CORE diagram’s built-in org chart layout algorithm.">
|
||||
}
|
||||
@section ControlsSection{
|
||||
<ej-diagram id="diagram" width="100%" height="650px" enable-context-menu="false" tool="ZoomPan" node-template="nodeTemplate" create="Create">
|
||||
<e-snap-settings snap-constraints="None">
|
||||
</e-snap-settings>
|
||||
<e-page-settings scroll-limit="@ScrollLimit.Diagram"></e-page-settings>
|
||||
<e-default-settings>
|
||||
<e-node width="150" height="50" border-color="transparent">
|
||||
<e-labels>
|
||||
<e-diagram-label name="label1" font-color="#ffffff" font-size="12">
|
||||
<e-margin left="5" right="5"></e-margin>
|
||||
</e-diagram-label>
|
||||
</e-labels>
|
||||
</e-node>
|
||||
<e-connector>
|
||||
<e-segments>
|
||||
<e-segment type="Orthogonal"></e-segment>
|
||||
</e-segments>
|
||||
<e-target-decorator shape="None"></e-target-decorator>
|
||||
</e-connector>
|
||||
</e-default-settings>
|
||||
<e-datasource-settings id="Id" parent="Manager" dataSource="ViewBag.datasource"></e-datasource-settings>
|
||||
<e-layout type="OrganizationalChart" horizontal-spacing="40" vertical-spacing="40" margin-y="30" get-layout-info="getLayoutInfo"></e-layout>
|
||||
</ej-diagram>
|
||||
}
|
||||
@section ScriptSection{
|
||||
<script type="text/javascript">
|
||||
|
||||
|
||||
//creating the node template
|
||||
function nodeTemplate(diagram, node) {
|
||||
node.labels[0].text = node.Role;
|
||||
node.fillColor = node.color;
|
||||
}
|
||||
|
||||
function getLayoutInfo(diagram, node, options) {
|
||||
if (node.labels[0].text == "General Manager") {
|
||||
options.assistants.push(options.children[0]);
|
||||
options.children.splice(0, 1);
|
||||
}
|
||||
if (!options.hasSubTree) {
|
||||
if (node.ChartType) {
|
||||
options.type = node.ChartType
|
||||
}
|
||||
options.offset = -58;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
function Create(args) {
|
||||
if (!(ej.browserInfo().name === "msie" && Number(ej.browserInfo().version) < 9)) {
|
||||
var diagram = $("#diagram").ejDiagram("instance");
|
||||
diagram.activateTool("panTool");
|
||||
}
|
||||
else {
|
||||
alert("Diagram will not be supported in IE Version < 9");
|
||||
}
|
||||
}
|
||||
</script>
|
||||
}
|
||||
<style>
|
||||
.svg-rotate-ie:hover {
|
||||
cursor: url("~/wwwroot/css/content/ej/common-images/rotate.cur"),default;
|
||||
}
|
||||
|
||||
.svg-rotate {
|
||||
cursor: url("~/wwwroot/css/content/ej/common-images/rotate.cur"),default;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,145 @@
|
|||
@using Syncfusion.JavaScript;
|
||||
@using Syncfusion.JavaScript.DataVisualization.DiagramEnums;
|
||||
@section SampleHeading{ <span class="sampleName">Diagram / Default Functionalities</span>}
|
||||
@section MetaTags{
|
||||
<meta name="description" content="This sample visualizes the simplified conventional graphical representation of an electrical circuit and its designed with ASP.NET MVC diagram's custom shapes feature.">
|
||||
}
|
||||
@section ControlsSection{
|
||||
<ej-diagram id="diagram" width="100%" height="700px" enable-context-menu="false" constraints="Default &~ DiagramConstraints.PageEditable">
|
||||
<e-snap-settings snap-constraints="None">
|
||||
</e-snap-settings>
|
||||
<e-page-settings scroll-limit="@ScrollLimit.Diagram"></e-page-settings>
|
||||
<e-default-settings>
|
||||
<e-node border-width="2"></e-node>
|
||||
<e-connector line-width="2" constraints="Default | ConnectorConstraints.Bridging">
|
||||
<e-segments><e-segment type="Straight"></e-segment></e-segments>
|
||||
<e-target-decorator shape="None"></e-target-decorator>
|
||||
</e-connector>
|
||||
</e-default-settings>
|
||||
</ej-diagram>
|
||||
}
|
||||
@section ScriptSection{
|
||||
<script type="text/javascript">
|
||||
var shapes = [];
|
||||
shapes["andgate"] = "M 289.461,72.4557L 286.776,72.4557L 286.776,147.629C 290.24,147.629 293.892,147.341 297.732,146.762C 301.572,146.186 305.252,145.464 308.774,144.597C 315.76,143.27 322.746,140.196 329.733,135.374C 336.717,130.554 340.99,122.598 342.55,111.514L 342.55,110.086L 342.55,108.57C 340.99,97.541 336.748,89.4011 329.82,84.1478C 322.89,78.8931 313.421,75.3438 301.413,73.4944C 298.93,73.149 296.894,72.8891 295.306,72.7158C 293.718,72.5424 291.769,72.4557 289.461,72.4557 Z M 344.889,108.57L 400.576,108.57L 400.576,111.514L 344.889,111.514C 344.253,119.828 341.814,126.512 337.57,131.564C 333.326,136.617 328.202,140.528 322.198,143.3C 316.192,146.07 309.77,147.92 302.929,148.841C 296.086,149.765 289.808,150.226 284.092,150.226L 284.092,133.598L 239.404,133.598L 239.404,130.568L 284.092,130.568L 284.092,88.8224L 239.404,88.8224L 239.404,86.485L 284.092,86.485L 284.092,69.8571C 297.429,69.8571 310.593,72.1384 323.584,76.6998C 336.574,81.261 343.676,91.885 344.889,108.57 Z ";
|
||||
shapes["diode"] = "M 360.324,68.4401L 360.324,7.38678L 367.039,7.38678L 367.039,68.4401L 456.947,4.92816L 456.947,68.4401L 456.94,68.4401L 456.94,83.1815L 456.947,83.1815L 456.947,135.824L 367.039,83.1815L 367.039,142.841L 360.324,142.841L 360.324,83.1815";
|
||||
shapes["verResistor"] = "M 363.62,168.975L 333.048,158.583L 363.014,146.113L 333.395,133.726L 363.014,118.917L 348.898,111.815L 348.898,84.9686L 352.535,84.9686L 352.535,109.477L 372.714,119.61L 342.143,133.381L 372.714,146.113L 342.143,158.237L 372.714,168.282L 342.143,180.753L 372.714,192.791L 341.795,207.255L 351.928,216.003L 351.928,246.226L 347.511,246.226L 347.511,217.647L 334.088,206.562L 363.014,193.138L 331.403,180.753L 363.62,168.975 Z";
|
||||
shapes["horResistor"] = "M 404.969,85.1068L 415.361,54.5334L 427.833,84.5001L 440.219,54.8801L 455.028,84.5001L 462.131,70.3828L 488.976,70.3828L 488.976,74.0215L 464.469,74.0215L 454.336,94.2001L 440.565,63.6281L 427.833,94.2001L 415.708,63.6281L 405.663,94.2001L 393.192,63.6281L 381.153,94.2001L 366.689,63.2814L 357.941,73.4135L 327.719,73.4135L 327.719,68.9975L 356.297,68.9975L 367.383,55.5735L 380.807,84.5001L 393.192,52.8881L 404.969,85.1068 Z";
|
||||
shapes["verCapacitor"] = "M 307.316,180.406C 335.896,171.458 364.65,171.458 393.575,180.406L 393.575,185.95C 386.3,184.564 379.428,183.294 372.963,182.14C 366.496,180.985 359.915,180.406 353.218,180.406L 353.218,246.314L 347.328,246.314L 347.328,180.406C 340.572,180.406 333.976,180.985 327.539,182.14C 321.1,183.294 314.36,184.564 307.316,185.95M 347.328,85.0543L 353.218,85.0543L 353.218,151.394L 393.575,151.394L 393.575,156.937L 307.316,156.937L 307.316,151.394L 347.328,151.394L 347.328,85.0543 Z ";
|
||||
shapes["horCapacitor"] = "M 391.299,21.6218C 401.965,55.6898 401.965,89.9684 391.299,124.454L 384.689,124.454C 386.341,115.782 387.856,107.588 389.232,99.8804C 390.609,92.1724 391.299,84.3231 391.299,76.3417L 312.727,76.3417L 312.727,69.319L 391.299,69.319C 391.299,61.2657 390.609,53.4031 389.232,45.7284C 387.856,38.0538 386.341,30.0164 384.689,21.6218M 504.971,69.319L 504.971,76.3417L 425.883,76.3417L 425.883,124.454L 419.277,124.454L 419.277,21.6218L 425.883,21.6218L 425.883,69.319L 504.971,69.319 Z ";
|
||||
shapes["junction"] = "M 349.019,84.9688C 370.959,84.9688 389.941,92.8208 405.962,108.525C 421.985,124.229 429.994,143.053 429.994,164.993C 429.994,187.567 421.985,206.75 405.962,222.541C 389.941,238.331 370.959,246.226 349.019,246.226C 327.369,246.226 308.575,238.331 292.639,222.541C 276.705,206.75 268.737,187.567 268.737,164.993C 268.737,143.053 276.705,124.229 292.639,108.525C 308.575,92.8208 327.369,84.9688 349.019,84.9688 Z";
|
||||
shapes["battery"] = "M 391.63,180.406L 391.63,183.352L 385.827,183.352L 385.827,188.201L 382.882,188.201L 382.882,183.352L 376.82,183.352L 376.82,180.406L 382.882,180.406L 382.882,173.997L 385.827,173.997L 385.827,180.406M 364.176,158.15L 366.774,158.15L 366.774,200.76L 429.995,200.76L 429.995,203.617L 366.774,203.617L 366.774,246.226L 364.176,246.226M 328.754,183.352L 317.148,183.352L 317.148,180.406L 328.754,180.406M 268.736,200.76L 340.012,200.76L 340.012,180.406L 345.815,180.406L 345.815,223.017L 340.012,223.017L 340.012,203.617L 268.736,203.617L 268.736,200.76 Z";
|
||||
shapes["switch"] = "M 388.586,48.2048C 388.613,58.2237 396.717,66.3329 406.745,66.3505C 416.764,66.3329 424.869,58.2237 424.886,48.2048C 424.869,38.1772 416.764,30.0726 406.745,30.0548C 396.717,30.0726 388.613,38.1772 388.586,48.2048 Z M 384.186,48.2048C 384.186,35.744 394.284,25.6505 406.745,25.6505C 419.188,25.6505 429.295,35.744 429.295,48.2048C 429.295,60.6569 419.188,70.7548 406.745,70.7548C 394.284,70.7548 384.186,60.6569 384.186,48.2048 Z F1 M 388.586,257.205C 388.613,267.224 396.717,275.329 406.745,275.346C 416.764,275.329 424.869,267.224 424.886,257.205C 424.869,247.177 416.764,239.073 406.745,239.055C 396.717,239.073 388.613,247.177 388.586,257.205 Z M 384.186,257.205C 384.186,244.744 394.284,234.651 406.745,234.651C 419.188,234.651 429.295,244.744 429.295,257.205C 429.295,269.657 419.188,279.755 406.745,279.755C 394.284,279.755 384.186,269.657 384.186,257.205 Z F1 M 404.523,235.205L 404.523,83.066L 380.904,106.109L 380.904,96.5169L 406.815,70.7548L 432.577,96.5169L 432.577,106.109L 409.535,83.066L 409.535,235.205L 404.523,235.205 Z";
|
||||
shapes["coil"] = "M 382.478,165.944L 373.73,144.12L 375.723,144.12L 383.43,162.913L 390.878,144.12L 393.217,144.12L 384.47,165.944M 359.267,111.556C 356.15,111.093 353.926,110.863 352.599,110.863L 352.599,125.585L 366.023,136.065L 337.443,148.104L 356.583,154.86C 358.43,155.552 360.321,156.245 362.255,156.937C 364.189,157.631 366.11,158.38 368.014,159.189C 362.991,160.92 357.969,162.74 352.946,164.644C 347.922,166.549 342.986,168.312 338.137,169.927C 342.986,171.66 347.879,173.305 352.815,174.864C 357.753,176.423 362.473,178.04 366.975,179.713L 344.198,190.8L 336.403,194.524L 352.599,203.531L 352.599,219.639C 357.679,219.639 363.049,218.659 368.707,216.695C 383.43,211.383 394.053,201.279 400.578,186.383C 403.753,178.531 404.995,170.217 404.302,161.44C 403.61,152.664 401.242,144.639 397.201,137.364C 393.159,130.841 387.919,125.255 381.482,120.607C 375.043,115.959 367.639,112.941 359.267,111.556 Z M 347.143,110.516C 345.757,110.691 344.399,110.863 343.073,111.036C 341.743,111.209 340.417,111.383 339.089,111.556C 331.525,113.057 324.957,115.771 319.386,119.696C 313.813,123.624 308.863,128.503 304.534,134.333C 300.838,139.587 298.167,145.895 296.522,153.256C 294.877,160.617 294.747,167.648 296.133,174.344C 296.133,175.211 296.247,175.875 296.478,176.336C 298.267,185.576 302.05,193.557 307.825,200.284C 313.597,207.011 320.439,212.135 328.35,215.656C 330.023,216.175 331.654,216.724 333.243,217.301C 334.83,217.879 336.577,218.34 338.482,218.687C 338.943,218.86 339.435,218.976 339.954,219.033C 340.474,219.091 340.994,219.205 341.514,219.38C 342.669,219.38 344.097,219.524 345.801,219.812C 347.503,220.101 348.875,220.159 349.914,219.985L 349.914,205.263L 336.403,197.469L 330.687,194.524L 359.961,180.06L 329.735,169.927L 357.622,159.881L 359.614,158.843L 329.735,148.451L 360.653,135.372L 349.914,126.972L 349.914,110.516M 352.599,84.9693L 352.599,107.832C 353.407,108.005 354.403,108.121 355.587,108.179C 356.77,108.237 357.882,108.352 358.922,108.525C 375.203,111.181 388.194,119.467 397.894,133.38C 401.934,139.385 404.85,146.661 406.641,155.205C 408.142,164.789 407.39,174.257 404.389,183.612C 401.386,192.965 396.537,200.732 389.839,206.909C 384.815,211.471 379.187,215.165 372.951,217.993C 366.715,220.823 359.93,222.383 352.599,222.671L 352.599,246.227L 349.914,246.227L 349.914,223.017C 348.875,222.729 347.431,222.583 345.585,222.583C 343.735,222.583 342.147,222.412 340.821,222.064C 338.742,221.717 336.881,221.315 335.234,220.852C 333.589,220.391 331.87,219.899 330.082,219.38C 324.193,217.013 318.693,213.78 313.583,209.68C 308.474,205.581 304.33,200.847 301.155,195.476C 296.767,188.779 294.039,181.013 292.971,172.18C 291.902,163.347 292.725,154.888 295.439,146.805C 298.267,138.26 302.858,130.856 309.21,124.589C 315.561,118.325 322.95,113.749 331.381,110.863C 332.13,110.863 332.91,110.633 333.719,110.169C 334.931,109.708 336.634,109.248 338.829,108.784C 342.639,108.149 346.334,107.832 349.914,107.832L 349.914,84.9693L 352.599,84.9693 Z";
|
||||
shapes["transistor"] = "M 341.454,133.339C 341.541,182.128 381.022,221.609 429.822,221.697C 478.622,221.609 518.103,182.128 518.19,133.339C 518.103,84.5283 478.622,45.052 429.822,44.9649C 381.022,45.052 341.541,84.5283 341.454,133.339 Z M 333.769,133.339C 333.769,80.2816 376.775,37.2807 429.822,37.2704C 482.874,37.2807 525.875,80.2816 525.88,133.339C 525.875,186.38 482.874,229.381 429.822,229.391C 376.775,229.381 333.769,186.38 333.769,133.339 Z F1 M 358.876,72.2849L 267.603,72.2849L 267.603,64.6006L 360.746,64.6006L 414.504,92.3509L 410.985,99.1796L 358.876,72.2849 Z F1 M 267.601,203.762L 267.601,196.083L 364.073,196.083L 446.976,157.175L 450.234,164.132L 365.795,203.762 F1 M 444.758,83.8008L 452.447,83.8008L 452.447,194.807L 444.758,194.807L 444.758,83.8008 Z F1 M 448.605,132.903L 547.649,132.903L 547.649,140.592L 448.605,140.592L 448.605,132.903 Z F1 M 449.961,119.831L 420.925,118.422L 391.894,117.003L 406.079,93.4282L 420.259,69.8582L 435.115,94.8473L 449.961,119.831 Z";
|
||||
shapes["earth"] = "M 325.579,240.685L 373.557,240.685L 373.557,246.488L 325.579,246.488M 313.627,222.671L 385.423,222.671L 385.423,228.385L 313.627,228.385M 301.761,204.656L 397.373,204.656L 397.373,210.719L 301.761,210.719M 343.592,85.228L 355.457,85.228L 355.457,186.556L 409.585,186.556L 409.585,192.705L 289.809,192.705L 289.809,186.556L 343.592,186.556L 343.592,85.228 Z";
|
||||
shapes["lamp"] = "M 366.6,214.529C 364.868,214.529 364.003,215.425 364.003,217.214C 364.003,219.177 364.868,220.159 366.6,220.159C 368.622,220.159 369.631,219.177 369.631,217.214C 369.631,215.425 368.622,214.529 366.6,214.529 Z M 359.672,217.214L 315.676,192.359L 315.676,242.07M 362.356,215.915C 363.164,213.953 364.623,212.971 366.731,212.971C 368.838,212.971 370.238,213.953 370.931,215.915L 429.908,215.915L 429.908,218.513L 370.931,218.513C 370.238,220.709 368.838,221.805 366.731,221.805C 364.623,221.805 363.164,220.709 362.356,218.513C 354.043,222.843 345.8,227.535 337.631,232.586C 329.46,237.639 321.248,242.215 312.991,246.314L 312.991,218.513L 268.65,218.513L 268.65,215.915L 312.991,215.915L 312.991,188.029L 362.356,215.915 Z";
|
||||
shapes["storage"] = "M 363.552,161.18L 340.081,161.18L 340.081,170.188L 363.552,170.188M 365.976,158.409L 365.976,172.959L 337.311,172.959L 337.311,165.685L 337.311,158.409M 374.984,181.62L 374.984,184.391L 353.247,184.391L 353.247,213.489L 353.247,246.313L 350.475,246.313L 350.475,184.391L 328.649,184.391L 328.649,181.62M 353.247,85.0546L 353.247,146.976L 374.984,146.976L 374.984,149.749L 328.649,149.749L 328.649,146.976L 350.475,146.976L 350.475,85.0546L 353.247,85.0546 Z";
|
||||
shapes["power"] = "M 381.324,170.62C 380.804,170.62 379.474,170.477 377.34,170.188C 375.204,169.898 373.644,169.841 372.662,170.014L 372.662,227L 379.937,226.308C 381.265,225.961 382.622,225.673 384.008,225.441C 385.394,225.21 386.924,224.836 388.598,224.314C 392.582,223.161 396.189,221.776 399.424,220.158C 402.657,218.542 405.601,216.146 408.258,212.972C 410.566,210.026 412.156,206.42 413.021,202.146C 413.886,197.872 413.742,193.83 412.589,190.021C 411.029,185.344 408.432,181.736 404.794,179.196C 401.157,176.653 397.085,174.69 392.582,173.305C 387.906,171.805 384.152,170.91 381.324,170.62 Z M 372.662,167.329C 379.937,167.502 387.184,168.586 394.401,170.578C 401.617,172.569 407.565,176.481 412.242,182.313L 429.909,182.313L 429.909,184.997L 413.628,184.997C 416.166,190.482 416.946,196.141 415.966,201.972C 415.62,203.532 415.144,205.033 414.537,206.476C 413.93,207.92 413.396,209.305 412.934,210.633L 429.909,210.633L 429.909,213.664L 411.636,213.664C 405.802,220.592 397.576,225.24 386.953,227.606C 380.601,229.281 375.058,229.945 370.324,229.598L 370.324,215.309L 354.996,215.309L 354.996,210.286L 370.324,209.94L 369.978,183.958L 354.996,183.958L 354.996,178.674L 370.324,178.674L 370.324,167.329M 301.3,168.976L 301.3,177.636L 311.953,177.636L 311.953,182.658L 287.704,182.658L 287.704,177.636L 298.702,177.636L 298.702,168.976C 297.778,168.976 296.998,169.092 296.364,169.321C 291.514,170.188 287.212,172.08 283.46,174.994C 279.706,177.91 276.674,181.36 274.366,185.344C 272.172,189.846 271.205,194.756 271.465,200.066C 271.725,205.378 273.124,210.112 275.665,214.269C 279.59,220.909 285.133,225.24 292.293,227.26C 292.466,227.433 292.769,227.549 293.202,227.606C 293.636,227.664 294.025,227.78 294.372,227.953C 294.66,228.126 295.034,228.242 295.497,228.3C 295.96,228.358 296.45,228.473 296.97,228.646C 297.144,228.646 297.388,228.704 297.706,228.818C 298.022,228.934 298.356,228.992 298.702,228.992L 298.702,218.946L 287.704,218.946L 287.704,213.664L 311.953,213.664L 311.953,218.946L 301.3,218.946L 301.3,228.992C 302.454,228.992 304.36,228.762 307.017,228.3C 311.52,227.492 315.59,225.702 319.228,222.929C 322.865,220.158 325.78,216.954 327.974,213.317C 332.305,204.253 332.536,195.246 328.668,186.297C 324.394,177.06 317.177,171.4 307.017,169.321C 305.861,169.092 303.956,168.976 301.3,168.976 Z M 301.3,151.308L 301.3,165.685C 302.281,166.032 303.336,166.202 304.461,166.202C 305.588,166.202 306.757,166.349 307.969,166.637C 316.457,168.541 323.472,173.336 329.014,181.013C 331.958,185.864 333.561,191.434 333.821,197.728C 334.08,204.021 332.796,209.65 329.966,214.616C 327.196,220.158 322.98,224.374 317.322,227.26C 312.645,230.148 307.304,231.592 301.3,231.592L 301.3,246.314L 298.702,246.314L 298.702,231.937C 298.817,232.109 297.922,231.909 296.017,231.33C 294.632,231.157 293.333,230.854 292.12,230.422C 290.908,229.988 289.637,229.513 288.309,228.992C 283.806,226.972 279.865,224.028 276.488,220.158C 273.11,216.292 270.844,211.672 269.689,206.302C 268.765,203.589 268.534,200.037 268.996,195.649C 268.996,194.726 269.226,193.398 269.689,191.665C 271.652,182.428 276.761,175.414 285.018,170.62C 288.309,168.6 291.744,167.273 295.324,166.637C 296.017,166.406 297.144,166.29 298.702,166.29L 298.702,151.308L 301.3,151.308 Z";
|
||||
|
||||
var nodes = [];
|
||||
addElement(200, 175, "junction", 10, 10);
|
||||
addElement(200, 100, "junction", 10, 10);
|
||||
addElement(300, 100, "junction", 10, 10);
|
||||
addElement(525, 100, "junction", 10, 10);
|
||||
addElement(525, 275, "junction", 10, 10);
|
||||
addElement(100, 350, "junction", 10, 10);
|
||||
addElement(200, 600, "junction", 10, 10);
|
||||
addElement(300, 600, "junction", 10, 10);
|
||||
addElement(375, 350, "junction", 10, 10);
|
||||
addElement(525, 600, "junction", 10, 10);
|
||||
addElement(600, 525, "junction", 10, 10);
|
||||
addElement(300, 275, "junction", 10, 10);
|
||||
addElement(375, 525, "junction", 10, 10);
|
||||
addElement(200, 275, "verCapacitor", 25, 45);
|
||||
addElement(200.5, 475, "verResistor", 15, 75);
|
||||
addElement(375, 100, "diode", 30, 30);
|
||||
addElement(450, 350, "diode", 30, 30);
|
||||
addElement(350, 275.25, "horCapacitor", 45, 25);
|
||||
addElement(450, 275.25, "horResistor", 75, 15);
|
||||
addElement(374.5, 450, "coil", 40, 50);
|
||||
addElement(375, 640, "earth", 30, 45);
|
||||
addElement(600, 250, "storage", 25, 75);
|
||||
addElement(599.5, 430, "coil", 40, 50);
|
||||
addElement(830.75, 260, "power", 100, 60);
|
||||
|
||||
var connectors = [];
|
||||
addConnection(100, 100, 600, 100);
|
||||
addConnection(100, 100, 100, 600);
|
||||
addConnection(600, 100, 600, 212.5);
|
||||
addConnection(100, 600, 600, 600);
|
||||
addConnection(100, 350, 800, 350);
|
||||
addConnection(202, 175, 800, 175);
|
||||
addConnection(800, 175, 800, 350);
|
||||
addConnection(200, 100, 200, 175);
|
||||
addConnection(200, 175, 200, 253);
|
||||
addConnection(300, 100, 300, 600);
|
||||
addConnection(525, 100, 525, 600);
|
||||
addConnection(200, 297, 200, 438);
|
||||
addConnection(199.5, 510, 200, 600);
|
||||
addConnection(300, 275.25, 330, 275.25);
|
||||
addConnection(370, 275.25, 425, 275.25);
|
||||
addConnection(475, 275.25, 525, 275.25);
|
||||
addConnection(375, 350, 375, 425);
|
||||
addConnection(375, 473, 375, 625);
|
||||
addConnection(375, 525, 599, 525);
|
||||
addConnection(600, 286, 600, 406);
|
||||
addConnection(600, 454, 600, 600);
|
||||
|
||||
addLabel(150, 275, "C1 120 uF");
|
||||
addLabel(350, 250, "C2 20 uF");
|
||||
addLabel(450, 250, "R2 22K");
|
||||
addLabel(375, 75, "D1 IN4007");
|
||||
addLabel(235, 475, "R1 6.8K");
|
||||
addLabel(655, 425, "12V LAMP");
|
||||
addLabel(660, 250, "SPST SWITCH");
|
||||
|
||||
function addLabel(x, y, label) {
|
||||
nodes.push({
|
||||
name: "node" + nodes.length, labels: [{ text: label, bold: true, fontFamily: "Segoe UI", fontSize: 14 }],
|
||||
offsetX: x, offsetY: y, width: 100, height: 50, borderColor: "none", fillColor: "transparent"
|
||||
});
|
||||
}
|
||||
|
||||
function addConnection(x, y, x2, y2) {
|
||||
connectors.push({ name: "connector" + connectors.length, sourcePoint: { x: x, y: y }, targetPoint: { x: x2, y: y2 } });
|
||||
}
|
||||
|
||||
function addElement(x, y, shape, width, height) {
|
||||
var node;
|
||||
if (shape == "junction") {
|
||||
node = {
|
||||
name: "node" + nodes.length, offsetX: x, offsetY: y, type: "basic", shape: "ellipse",
|
||||
width: width, height: height, fillColor: "black"
|
||||
};
|
||||
}
|
||||
else {
|
||||
node = {
|
||||
name: "node" + nodes.length, offsetX: x, offsetY: y, type: "basic", shape: "path",
|
||||
pathData: shapes[shape], width: width, height: height, fillColor: "black", borderColor: "none", borderWidth: 1
|
||||
};
|
||||
}
|
||||
nodes.push(node);
|
||||
}
|
||||
|
||||
if (!(ej.browserInfo().name === "msie" && Number(ej.browserInfo().version) < 9)) {
|
||||
var diagram = $("#diagram").ejDiagram({
|
||||
nodes: nodes,
|
||||
connectors: connectors,
|
||||
});
|
||||
}
|
||||
else {
|
||||
alert("Diagram will not be supported in IE Version < 9");
|
||||
}
|
||||
</script>
|
||||
}
|
||||
<style>
|
||||
.svg-rotate-ie:hover {
|
||||
cursor: url("~/wwwroot/css/content/ej/common-images/rotate.cur"),default;
|
||||
}
|
||||
|
||||
.svg-rotate {
|
||||
cursor: url("~/wwwroot/css/content/ej/common-images/rotate.cur"),default;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,463 @@
|
|||
@using Syncfusion.JavaScript;
|
||||
@using Syncfusion.JavaScript.DataVisualization.DiagramEnums;
|
||||
@section SampleHeading{ <span class="sampleName">Diagram / Default Functionalities</span>}
|
||||
@section MetaTags{
|
||||
<meta name="description" content="This sample demonstrates the connector’s bridging and editing behavior and also how to customize the connector appearance in ASP.NET MVC diagram.">
|
||||
}
|
||||
@section ControlsSection{
|
||||
<ej-diagram id="diagram" width="700px" height="560px" enable-context-menu="false">
|
||||
<e-snap-settings snap-constraints="None">
|
||||
</e-snap-settings>
|
||||
<e-page-settings scroll-limit="@ScrollLimit.Diagram"></e-page-settings>
|
||||
<e-nodes>
|
||||
<e-flow-shape name="node1" width="90" height="40" offset-X="80" offset-Y="90" shape="Terminator">
|
||||
<e-labels>
|
||||
<e-diagram-label text="Start"></e-diagram-label>
|
||||
</e-labels>
|
||||
</e-flow-shape>
|
||||
<e-flow-shape name="node2" width="130" height="100" offset-X="260" offset-Y="90" shape="Decision">
|
||||
<e-labels>
|
||||
<e-diagram-label text="Already installed the software?"></e-diagram-label>
|
||||
</e-labels>
|
||||
</e-flow-shape>
|
||||
<e-flow-shape name="node3" width="100" height="50" offset-X="440" offset-Y="90" shape="Process">
|
||||
<e-labels>
|
||||
<e-diagram-label text="Show license agreement"></e-diagram-label>
|
||||
</e-labels>
|
||||
</e-flow-shape>
|
||||
<e-flow-shape name="node4" width="110" height="90" offset-X="610" offset-Y="90" shape="Decision">
|
||||
<e-labels>
|
||||
<e-diagram-label text="Agreed?"></e-diagram-label>
|
||||
</e-labels>
|
||||
</e-flow-shape>
|
||||
<e-flow-shape name="node5" width="130" height="100" offset-X="260" offset-Y="240" shape="Decision">
|
||||
<e-labels>
|
||||
<e-diagram-label text="Override existing version?">
|
||||
<e-margin left="10" right="10" top="2" bottom="2"></e-margin>
|
||||
</e-diagram-label>
|
||||
</e-labels>
|
||||
</e-flow-shape>
|
||||
<e-flow-shape name="node6" width="90" height="50" offset-X="610" offset-Y="240" shape="Process">
|
||||
<e-labels>
|
||||
<e-diagram-label text="Select destination folder"></e-diagram-label>
|
||||
</e-labels>
|
||||
</e-flow-shape>
|
||||
<e-flow-shape name="node7" width="110" height="90" offset-X="610" offset-Y="410" shape="Decision">
|
||||
<e-labels>
|
||||
<e-diagram-label text="Enough disk space?"></e-diagram-label>
|
||||
</e-labels>
|
||||
</e-flow-shape>
|
||||
<e-flow-shape name="node8" width="90" height="50" offset-X="440" offset-Y="410" shape="Process">
|
||||
<e-labels>
|
||||
<e-diagram-label text="Free Space"></e-diagram-label>
|
||||
</e-labels>
|
||||
</e-flow-shape>
|
||||
<e-flow-shape name="node9" width="90" height="50" offset-X="260" offset-Y="410" shape="Process">
|
||||
<e-labels>
|
||||
<e-diagram-label text="Copy files"></e-diagram-label>
|
||||
</e-labels>
|
||||
<e-ports>
|
||||
<e-port name="in" shape="Circle">
|
||||
<e-offset x="0.4f" y="0.01f"></e-offset>
|
||||
</e-port>
|
||||
<e-port name="inn" shape="Circle">
|
||||
<e-offset x="0.6f" y="0.01f"></e-offset>
|
||||
</e-port>
|
||||
</e-ports>
|
||||
</e-flow-shape>
|
||||
<e-flow-shape name="node10" width="90" height="40" offset-X="80" offset-Y="410" shape="Terminator">
|
||||
<e-labels>
|
||||
<e-diagram-label text="End"></e-diagram-label>
|
||||
</e-labels>
|
||||
</e-flow-shape>
|
||||
</e-nodes>
|
||||
<e-connectors>
|
||||
<e-connector name="connector1" source-node="node1" target-node="node2">
|
||||
</e-connector>
|
||||
<e-connector name="connector2" source-node="node2" target-node="node3">
|
||||
<e-labels>
|
||||
<e-diagram-label text="No" fill-color="white"></e-diagram-label>
|
||||
</e-labels>
|
||||
</e-connector>
|
||||
<e-connector name="connector3" source-node="node3" target-node="node4">
|
||||
</e-connector>
|
||||
<e-connector name="connector4" source-node="node4" target-node="node10">
|
||||
<e-labels>
|
||||
<e-diagram-label text="No" fill-color="white">
|
||||
<e-offset x="0.44f" y="0.27f"></e-offset>
|
||||
</e-diagram-label>
|
||||
</e-labels>
|
||||
<e-segments>
|
||||
<e-segment type="Orthogonal" length="30" direction="right"></e-segment>
|
||||
<e-segment type="Orthogonal" length="80" direction="bottom"></e-segment>
|
||||
<e-segment type="Orthogonal" length="620" direction="left"></e-segment>
|
||||
<e-segment type="Orthogonal" length="220" direction="bottom"></e-segment>
|
||||
</e-segments>
|
||||
</e-connector>
|
||||
<e-connector name="connector5" source-node="node2" target-node="node5">
|
||||
<e-labels>
|
||||
<e-diagram-label text="Yes" fill-color="white">
|
||||
<e-offset x="0.2f" y="0.2f"></e-offset>
|
||||
</e-diagram-label>
|
||||
</e-labels>
|
||||
</e-connector>
|
||||
<e-connector name="connector6" source-node="node4" target-node="node6">
|
||||
<e-labels>
|
||||
<e-diagram-label text="Yes" fill-color="white">
|
||||
<e-offset x="0.4f" y="0.2f"></e-offset>
|
||||
</e-diagram-label>
|
||||
</e-labels>
|
||||
</e-connector>
|
||||
<e-connector name="connector7" source-node="node6" target-node="node7">
|
||||
</e-connector>
|
||||
<e-connector name="connector8" source-node="node7" target-node="node8">
|
||||
<e-labels>
|
||||
<e-diagram-label text="No" fill-color="white"></e-diagram-label>
|
||||
</e-labels>
|
||||
</e-connector>
|
||||
<e-connector name="connector9" source-node="node8" target-node="node9">
|
||||
</e-connector>
|
||||
<e-connector name="connector10" source-node="node9" target-node="node10">
|
||||
</e-connector>
|
||||
<e-connector name="connector11" source-node="node5" target-node="node9" target-port="in">
|
||||
<e-labels>
|
||||
<e-diagram-label text="Yes" fill-color="white">
|
||||
<e-offset x="0.01f" y="0.38f"></e-offset>
|
||||
</e-diagram-label>
|
||||
</e-labels>
|
||||
<e-segments>
|
||||
<e-segment type="Orthogonal" length="20" direction="left"></e-segment>
|
||||
<e-segment type="Orthogonal" length="72" direction="bottom"></e-segment>
|
||||
<e-segment type="Orthogonal" length="20" direction="right"></e-segment>
|
||||
</e-segments>
|
||||
</e-connector>
|
||||
<e-connector name="connector12" source-node="node7" target-node="node9" target-port="inn">
|
||||
<e-labels>
|
||||
<e-diagram-label text="Yes" fill-color="white">
|
||||
<e-offset x="0.22f" y="0.01f"></e-offset>
|
||||
</e-diagram-label>
|
||||
</e-labels>
|
||||
<e-segments>
|
||||
<e-segment type="Orthogonal" length="20" direction="right"></e-segment>
|
||||
<e-segment type="Orthogonal" length="97" direction="top"></e-segment>
|
||||
<e-segment type="Orthogonal" length="416" direction="left"></e-segment>
|
||||
</e-segments>
|
||||
</e-connector>
|
||||
</e-connectors>
|
||||
<e-default-settings>
|
||||
<e-node border-color="#000000" fill-color="#6bbd45" constraints="Default &~ NodeConstraints.Drag">
|
||||
<e-labels>
|
||||
<e-diagram-label font-color="white">
|
||||
<e-margin left="20" right="20" top="2" bottom="2"></e-margin>
|
||||
</e-diagram-label>
|
||||
</e-labels>
|
||||
</e-node>
|
||||
<e-connector corner-radius="10" line-width="2" line-color="black" constraints="Default | ConnectorConstraints.Bridging">
|
||||
<e-segments><e-segment type="Orthogonal"></e-segment></e-segments>
|
||||
</e-connector>
|
||||
</e-default-settings>
|
||||
</ej-diagram>
|
||||
}
|
||||
|
||||
@section PropertiesSection{
|
||||
<div id="sampleProperties">
|
||||
<div class="prop-grid">
|
||||
<div class="row">
|
||||
<div class="col-md-6 aligntop">
|
||||
<b>Connectors</b>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3 aligntop" style="margin-right: -10px;">
|
||||
Segment
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<input type="text" id="segment" />
|
||||
<div id="segmentlistDiv">
|
||||
<ul>
|
||||
<li value="orthogonal">Orthogonal</li>
|
||||
<li value="straight">Straight</li>
|
||||
<li value="bezier">Bezier</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6 aligntop" style="margin-right: -10px;">
|
||||
Corner Radius
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<input type="text" id="cornerRadius" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-3 aligntop" style="margin-right: -10px;">
|
||||
Bridging
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<input type="checkbox" id="bridge" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-3 aligntop" style="margin-right: -10px;">
|
||||
Bridge Direction
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<input type="text" id="direction" />
|
||||
<div id="directionlistDiv">
|
||||
<ul>
|
||||
<li value="top">Top</li>
|
||||
<li value="bottom">Bottom</li>
|
||||
<li value="left">Left</li>
|
||||
<li value="right">Right</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3 aligntop">
|
||||
<b>Drag</b>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-3 aligntop" style="margin-right: -10px;">
|
||||
Connector
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<input type="checkbox" id="dragable" class="example" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-3 aligntop" style="margin-right: -10px;">
|
||||
Source
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<input type="checkbox" id="dragablesource" class="example" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-3 aligntop" style="margin-right: -10px;">
|
||||
Target
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<input type="checkbox" id="dragabletarget" class="example" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-3 aligntop" style="margin-right: -10px;">
|
||||
Segments
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<input type="checkbox" id="dragablesegment" class="example" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
@section ScriptSection{
|
||||
<script type="text/javascript">
|
||||
$("#sampleProperties").ejPropertiesPanel();
|
||||
//Check Box to enable/disable dragging
|
||||
$('#dragable').ejCheckBox({
|
||||
checked: true,
|
||||
change: function () {
|
||||
updateConnectors("dragable", ej.datavisualization.Diagram.ConnectorConstraints.Drag);
|
||||
}
|
||||
});
|
||||
|
||||
//Check Box to enable/disable dragging source end
|
||||
$("#dragablesource").ejCheckBox({
|
||||
checked: true,
|
||||
change: function () {
|
||||
updateConnectors("dragablesource", ej.datavisualization.Diagram.ConnectorConstraints.DragSourceEnd);
|
||||
}
|
||||
});
|
||||
|
||||
//Check Box to enable/disable dragging target end
|
||||
$("#dragabletarget").ejCheckBox({
|
||||
checked: true,
|
||||
change: function () {
|
||||
updateConnectors("dragabletarget", ej.datavisualization.Diagram.ConnectorConstraints.DragTargetEnd);
|
||||
}
|
||||
});
|
||||
|
||||
//Check Box to enable/disable dragging segment thumbs
|
||||
$("#dragablesegment").ejCheckBox({
|
||||
checked: true,
|
||||
change: function () {
|
||||
updateConnectors("dragablesegment", ej.datavisualization.Diagram.ConnectorConstraints.DragSegmentThumb);
|
||||
}
|
||||
});
|
||||
|
||||
//Check Box to enable/disable bridging
|
||||
$("#bridge").ejCheckBox({
|
||||
checked: true,
|
||||
change: function () {
|
||||
updateConnectors("bridge", ej.datavisualization.Diagram.ConnectorConstraints.Bridging);
|
||||
}
|
||||
});
|
||||
|
||||
//Drop down to change the bridge direction
|
||||
$("#direction").ejDropDownList({
|
||||
targetID: "directionlistDiv",
|
||||
text: "Top",
|
||||
value: "value",
|
||||
change: function changedirection(args) {
|
||||
$("#diagram").ejDiagram({ bridgeDirection: args.value });
|
||||
},
|
||||
width: "120px"
|
||||
});
|
||||
|
||||
//Dropdown to change the segments
|
||||
$("#segment").ejDropDownList({
|
||||
targetID: "segmentlistDiv",
|
||||
text: "Orthogonal",
|
||||
value: "value",
|
||||
change: "changeSegment",
|
||||
width: "120px"
|
||||
});
|
||||
|
||||
//Numeric text box to change the corner radius
|
||||
$("#cornerRadius").ejNumericTextbox({
|
||||
value: 10,
|
||||
minValue: 0,
|
||||
maxValue: 10,
|
||||
change: "changeCornerRadius",
|
||||
width: "120px"
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
//end region
|
||||
|
||||
//region helper methods
|
||||
|
||||
//Enable/Disable a particular behavior of connector
|
||||
function updateConnectors(id, constraints) {
|
||||
var diagram = $("#diagram").ejDiagram("instance");
|
||||
var checkbox = $("#" + id).ejCheckBox("instance");
|
||||
var selectedConnectors = getSelectedConnectors(diagram.model.selectedItems.children);
|
||||
var connectors = selectedConnectors.length ? selectedConnectors : diagram.model.connectors;
|
||||
for (var i = 0; i < connectors.length; i++) {
|
||||
var connector = connectors[i];
|
||||
if (diagram.getObjectType(connector) == "connector") {
|
||||
diagram.updateConnector(connector.name, {
|
||||
constraints: checkbox.isChecked() ?
|
||||
connector.constraints | constraints : connector.constraints & ~constraints
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//Modify the segment type
|
||||
function changeSegment(args) {
|
||||
var diagram = $("#diagram").ejDiagram("instance");
|
||||
var selectedConnectors = getSelectedConnectors(diagram.model.selectedItems.children);
|
||||
var connectors = selectedConnectors.length ? selectedConnectors : diagram.model.connectors;
|
||||
for (var i = 0; i < connectors.length; i++) {
|
||||
var connector = connectors[i];
|
||||
if (args.value == "orthogonal") {
|
||||
if (connector.addInfo.segments) {
|
||||
diagram.updateConnector(connector.name, { segments: connector.addInfo.segments });
|
||||
}
|
||||
else {
|
||||
diagram.updateConnector(connector.name, { segments: [{ type: args.value }] });
|
||||
}
|
||||
}
|
||||
else
|
||||
diagram.updateConnector(connector.name, { segments: [{ type: args.value }] });
|
||||
}
|
||||
}
|
||||
|
||||
//Update the corner radius
|
||||
function changeCornerRadius(args) {
|
||||
var diagram = $("#diagram").ejDiagram("instance");
|
||||
var selectedConnectors = getSelectedConnectors(diagram.model.selectedItems.children);
|
||||
var connectors = selectedConnectors.length ? selectedConnectors : diagram.model.connectors;
|
||||
for (var i = 0; i < connectors.length; i++) {
|
||||
var connector = connectors[i];
|
||||
diagram.updateConnector(connector.name, { cornerRadius: args.value });
|
||||
}
|
||||
}
|
||||
|
||||
//Selection change event handler
|
||||
function selectionChanged(args) {
|
||||
var diagram = $("#diagram").ejDiagram("instance");
|
||||
var ConnectorConstraints = ej.datavisualization.Diagram.ConnectorConstraints;
|
||||
var selectedConnectors = getSelectedConnectors(args.selectedItems);
|
||||
var connectors = selectedConnectors.length ? selectedConnectors : diagram.model.connectors;
|
||||
updateCheckBox("dragable", connectors, ConnectorConstraints.Drag);
|
||||
updateCheckBox("dragablesource", connectors, ConnectorConstraints.DragSourceEnd);
|
||||
updateCheckBox("dragabletarget", connectors, ConnectorConstraints.DragTargetEnd);
|
||||
updateCheckBox("dragablesegment", connectors, ConnectorConstraints.DragSegmentThumb);
|
||||
updateCheckBox("bridge", connectors, ConnectorConstraints.Bridging);
|
||||
|
||||
var checked;
|
||||
var radius = connectors[0].cornerRadius;
|
||||
for (i = 1; i < connectors.length; i++) {
|
||||
if (radius != connectors[i].cornerRadius) {
|
||||
$("#cornerRadius").ejNumericTextbox({ enabled: false });
|
||||
checked = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (!checked) {
|
||||
$("#cornerRadius").ejNumericTextbox({ enabled: true });
|
||||
$("#cornerRadius").ejNumericTextbox({ value: radius });
|
||||
}
|
||||
}
|
||||
|
||||
//Get the selected connectors
|
||||
function getSelectedConnectors(selectedItems) {
|
||||
var diagram = $("#diagram").ejDiagram("instance");
|
||||
var connectors = [];
|
||||
for (var i = 0; i < selectedItems.length; i++) {
|
||||
if (diagram.getObjectType(selectedItems[i]) == "connector")
|
||||
connectors.push(selectedItems[i]);
|
||||
}
|
||||
return connectors;
|
||||
}
|
||||
|
||||
//Update the check boxes based on the selected connectors
|
||||
function updateCheckBox(id, connectors, constraints) {
|
||||
var enabled, connector, checked;
|
||||
var diagram = $("#diagram").ejDiagram("instance");
|
||||
enabled = connectors[0].constraints & constraints ? true : false;
|
||||
if (connectors.length == 1) $("#" + id).ejCheckBox({ enabled: enabled });
|
||||
else {
|
||||
for (var i = 1; i < connectors.length; i++) {
|
||||
connector = connectors[i];
|
||||
if (diagram.getObjectType(connector) == "connector") {
|
||||
if ((connector.constraints & constraints ? true : false) != enabled) {
|
||||
$("#" + id).ejCheckBox({ enabled: false });
|
||||
checked = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
if (!checked) {
|
||||
$("#" + id).ejCheckBox({ enabled: true });
|
||||
$("#" + id).ejCheckBox({ checked: enabled });
|
||||
}
|
||||
}
|
||||
</script>
|
||||
}
|
||||
<style>
|
||||
.svg-rotate-ie:hover {
|
||||
cursor: url("~/wwwroot/css/content/ej/common-images/rotate.cur"),default;
|
||||
}
|
||||
|
||||
.svg-rotate {
|
||||
cursor: url("~/wwwroot/css/content/ej/common-images/rotate.cur"),default;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,89 @@
|
|||
@using Syncfusion.JavaScript;
|
||||
@using Syncfusion.JavaScript.DataVisualization.DiagramEnums;
|
||||
@section SampleHeading{ <span class="sampleName">Diagram / Default Functionalities</span>}
|
||||
@section MetaTags{
|
||||
<meta name="description" content="This sample demonstrates the simple flowchart diagram of an order placed using credit card and its designed with ASP.NET MVC diagram's built-in flow shapes feature.">
|
||||
}
|
||||
@section ControlsSection{
|
||||
<ej-diagram id="diagram" width="1000px" height="600px" enable-context-menu="false">
|
||||
<e-page-settings scroll-limit="@ScrollLimit.Diagram"></e-page-settings>
|
||||
<e-nodes>
|
||||
<e-flow-shape name="NewIdea" width="150" height="60" offset-X="300" offset-Y="60" fill-color="#1BA0E2" border-color="#1BA0E2" shape="@FlowShapes.Terminator">
|
||||
<e-labels>
|
||||
<e-diagram-label name="NewIdea_Label" text="New Idea Identified" font-color="White"></e-diagram-label>
|
||||
</e-labels>
|
||||
</e-flow-shape>
|
||||
<e-flow-shape name="Meeting" width="150" height="60" offset-X="300" offset-Y="155" fill-color="#1BA0E2" border-color="#1BA0E2" shape="@FlowShapes.Process">
|
||||
<e-labels>
|
||||
<e-diagram-label name="Meeting_Label" text="Meeting with board" font-color="White"></e-diagram-label>
|
||||
</e-labels>
|
||||
</e-flow-shape>
|
||||
<e-flow-shape name="BoardDecision" width="150" height="110" offset-X="300" offset-Y="280" fill-color="#1BA0E2" border-color="#1BA0E2" shape="@FlowShapes.Decision">
|
||||
<e-labels>
|
||||
<e-diagram-label name="BoardDecision_Label" text="Can proceed?" font-color="White">
|
||||
</e-diagram-label>
|
||||
</e-labels>
|
||||
</e-flow-shape>
|
||||
<e-flow-shape name="Project" width="150" height="100" offset-X="300" offset-Y="430" fill-color="#1BA0E2" border-color="#1BA0E2" shape="@FlowShapes.Decision">
|
||||
<e-labels>
|
||||
<e-diagram-label name="Project_Label" text="Find Project manager" font-color="White"></e-diagram-label>
|
||||
</e-labels>
|
||||
</e-flow-shape>
|
||||
<e-flow-shape name="End" width="150" height="60" offset-X="300" offset-Y="555" fill-color="#1BA0E2" border-color="#1BA0E2" shape="@FlowShapes.Process">
|
||||
<e-labels>
|
||||
<e-diagram-label name="End_Label" text="Implement and Deliver" font-color="White"></e-diagram-label>
|
||||
</e-labels>
|
||||
</e-flow-shape>
|
||||
<e-flow-shape name="Decision" width="250" height="60" offset-X="550" offset-Y="60" fill-color="#858585" border-color="#1BA0E2" shape="@FlowShapes.Process">
|
||||
<e-labels>
|
||||
<e-diagram-label name="Decision_Label" text="Decision Process for new software ideas" font-color="White"></e-diagram-label>
|
||||
</e-labels>
|
||||
</e-flow-shape>
|
||||
<e-flow-shape name="Reject" width="150" height="60" offset-X="550" offset-Y="275" fill-color="#1BA0E2" border-color="#1BA0E2" shape="@FlowShapes.Process">
|
||||
<e-labels>
|
||||
<e-diagram-label name="Reject_Label" text="Reject and write report" font-color="White"></e-diagram-label>
|
||||
</e-labels>
|
||||
</e-flow-shape>
|
||||
<e-flow-shape name="Resources" width="150" height="60" offset-X="550" offset-Y="430" fill-color="#1BA0E2" border-color="#1BA0E2" shape="@FlowShapes.Process">
|
||||
<e-labels>
|
||||
<e-diagram-label name="Resources_Label" text="Hire new resources" font-color="White"></e-diagram-label>
|
||||
</e-labels>
|
||||
</e-flow-shape>
|
||||
</e-nodes>
|
||||
<e-connectors>
|
||||
<e-connector name="Connector1" source-node="NewIdea" target-node="Meeting" line-color="#606060">
|
||||
</e-connector>
|
||||
<e-connector name="Connector2" source-node="Meeting" target-node="BoardDecision" line-color="#606060">
|
||||
</e-connector>
|
||||
<e-connector name="Connector3" source-node="BoardDecision" target-node="Reject" line-color="#606060">
|
||||
<e-labels>
|
||||
<e-diagram-label name="Connector3_Label" text="No" fill-color="white"></e-diagram-label>
|
||||
</e-labels>
|
||||
</e-connector>
|
||||
<e-connector name="Connector4" source-node="BoardDecision" target-node="Project" line-color="#606060">
|
||||
<e-labels>
|
||||
<e-diagram-label name="Connector4_Label" text="Yes" fill-color="white"></e-diagram-label>
|
||||
</e-labels>
|
||||
</e-connector>
|
||||
<e-connector name="Connector5" source-node="Project" target-node="Resources" line-color="#606060">
|
||||
<e-labels>
|
||||
<e-diagram-label name="Connector5_Label" text="No" fill-color="white"></e-diagram-label>
|
||||
</e-labels>
|
||||
</e-connector>
|
||||
<e-connector name="Connector6" source-node="Project" target-node="End" line-color="#606060">
|
||||
<e-labels>
|
||||
<e-diagram-label name="Connector6_Label" text="Yes" fill-color="white"></e-diagram-label>
|
||||
</e-labels>
|
||||
</e-connector>
|
||||
</e-connectors>
|
||||
</ej-diagram>
|
||||
|
||||
}
|
||||
<style>
|
||||
.svg-rotate-ie:hover {
|
||||
cursor: url("~/wwwroot/css/content/ej/common-images/rotate.cur"),default;
|
||||
}
|
||||
.svg-rotate {
|
||||
cursor: url("~/wwwroot/css/content/ej/common-images/rotate.cur"),default;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,268 @@
|
|||
@using Syncfusion.JavaScript;
|
||||
@using Syncfusion.JavaScript.DataVisualization.DiagramEnums;
|
||||
<style type="text/css">
|
||||
.e-toolbar > .e-horizontal.e-ul > li {
|
||||
margin: 5px;
|
||||
margin-left: .3px;
|
||||
margin-top: 0px;
|
||||
width: 36px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.toolBarIconStyle {
|
||||
font-size: 17px;
|
||||
color: #6B6B6B;
|
||||
margin-top: 4px;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.chkrad {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.icon-colors {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
#check:hover {
|
||||
background-color: transparent;
|
||||
color: #6B6B6B;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
#check {
|
||||
color: #5c5c5c;
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
}
|
||||
</style>
|
||||
<script id="htmlTemplate" type="text/x-jsrender">
|
||||
<div>
|
||||
<input type="button" value="button" style="color: #ffffff; background-color: #fbb139; border-color: #f89b1c" />
|
||||
</div>
|
||||
</script>
|
||||
<script id="svgTemplate" type="text/x-jsrender">
|
||||
<svg version="1.0" xmlns="//www.w3.org/2000/svg" width="350.000000pt" height="229.000000pt" viewBox="0 0 350.000000 229.000000" preserveAspectRatio="xMidYMid meet">
|
||||
<metadata>
|
||||
Created by potrace 1.11, written by Peter Selinger 2001-2013
|
||||
</metadata>
|
||||
<g transform="translate(0.000000,229.000000) scale(0.100000,-0.100000)" fill="#de6ca9" stroke="none">
|
||||
<path d="M0 1145 l0 -1145 1750 0 1750 0 0 1145 0 1145 -1750 0 -1750 0 0 -1145z m1434 186 c19 -8 26 -18 26 -37 0 -24 -3 -26 -27 -19 -16 3 -58 9 -94 12 -63 5 -67 4 -88 -23 -23 -29 -21 -60 6 -81 8 -6 47 -19 86 -29 55 -13 80 -25 106 -51 31 -31 33 -37 29 -88 -8 -94 -69 -133 -193 -122 -90 7 -115 20 -115 58 0 26 3 30 18 24 91 -38 168 -41 204 -8 23 21 23 75 1 96 -10 8 -49 23 -88 33 -88 22 -135 63 -135 118 0 92 67 140 181 131 31 -2 68 -9 83 -14z m854 -6 c38 -15 42 -21 42 -51 l0 -33 -47 25 c-41 22 -58 25 -115 22 -58 -3 -72 -8 -97 -32 -79 -75 -59 -259 32 -297 35 -15 106 -18 150 -6 26 7 27 10 27 67 l0 60 -50 0 c-47 0 -50 2 -50 25 0 25 1 25 80 25 l81 0 -3 -97 -3 -98 -40 -20 c-22 -10 -65 -21 -95 -23 -153 -11 -242 74 -243 230 0 145 93 235 233 224 30 -2 74 -12 98 -21z m-638 -169 l67 -178 40 103 c22 57 53 139 69 182 28 75 29 77 62 77 19 0 32 -4 30 -9 -1 -5 -39 -104 -83 -220 l-80 -211 -37 0 c-35 0 -37 2 -56 53 -11 28 -48 124 -81 211 -34 87 -61 163 -61 168 0 5 14 8 32 6 31 -3 32 -5 98 -182z" />
|
||||
</g>
|
||||
</svg>
|
||||
</script>
|
||||
|
||||
@section SampleHeading{ <span class="sampleName">Diagram / Default Functionalities</span>}
|
||||
@section MetaTags{
|
||||
<meta name="description" content="This sample visualizes how to build a diagram interactively using ASP.NET CORE diagram’s drawing tools feature.">
|
||||
}
|
||||
@section ControlsSection{
|
||||
<div float="left">
|
||||
<div id="ToolbarItem" class="e-toolbar e-js e-widget e-toolbarspan" style="background-color: #ebeced; border-bottom-color: #bbbbbb; border-top-style: none; border-left-style: none; border-right-style: none">
|
||||
<ul id="toolblock3" class="toolblock3rightBorderVisible">
|
||||
<li id="Rectangle_Tool" title="Rectangle">
|
||||
<div class="icon-Rectangle toolBarIconStyle" style="margin-left: 8px" />
|
||||
</li>
|
||||
<li id="RoundedRectangle_Tool" title="Rounded Rectangle">
|
||||
<div class="icon-RoundedRectangle toolBarIconStyle" style="margin-left: 8px" />
|
||||
</li>
|
||||
<li id="Ellipse_Tool" title="Ellipse">
|
||||
<div class="icon-Ellipse toolBarIconStyle" style="margin-left: 8px" />
|
||||
</li>
|
||||
<li id="Polygon_Tool" title="Polygon">
|
||||
<div class="icon-Polygon toolBarIconStyle" style="margin-left: 8px" />
|
||||
</li>
|
||||
<li id="Textbox_Tool" title="Textbox">
|
||||
<div class="icon-Textbox toolBarIconStyle" style="margin-left: 8px" />
|
||||
</li>
|
||||
<li id="Path_Tool" title="Path">
|
||||
<div class="icon-Path toolBarIconStyle" style="margin-left: 8px" />
|
||||
</li>
|
||||
<li id="Image_Tool" title="Image">
|
||||
<div class="icon-Image toolBarIconStyle" style="margin-left: 8px" />
|
||||
</li>
|
||||
<li id="Html_Tool" title="Html">
|
||||
<div class="icon-HTML toolBarIconStyle" style="margin-left: 8px" />
|
||||
</li>
|
||||
<li id="Native_Tool" title="Native">
|
||||
<div class="icon-Native toolBarIconStyle" style="margin-left: 8px" />
|
||||
</li>
|
||||
<li id="check" style="width: 140px; height: 50px">
|
||||
<table>
|
||||
<tr>
|
||||
<td class="chkrad">
|
||||
<input type="checkbox" id="Checkbox1" value="Continuous draw" />
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<ej-diagram id="diagram" width="700px" height="700px" enable-context-menu="false">
|
||||
<e-page-settings scroll-limit="@ScrollLimit.Diagram"></e-page-settings>
|
||||
<e-nodes>
|
||||
<e-basic-shape name="Rectangle" width="100" height="100" offset-X="150" offset-Y="150" fill-color="#fcbc7c" border-color="#f89b4c" shape="Rectangle">
|
||||
<e-labels>
|
||||
<e-diagram-label text="Rectangle" font-color="white"></e-diagram-label>
|
||||
</e-labels>
|
||||
</e-basic-shape>
|
||||
<e-basic-shape name="RoundedRectangle" width="100" height="100" offset-X="350" offset-Y="150" fill-color="#f58f7a" border-color="#f15e50" shape="Rectangle" corner-radius="5">
|
||||
<e-labels>
|
||||
<e-diagram-label text="Round Rect" font-color="white"></e-diagram-label>
|
||||
</e-labels>
|
||||
</e-basic-shape>
|
||||
<e-basic-shape name="Ellipse" width="100" height="100" offset-X="550" offset-Y="150" fill-color="#85cec1" border-color="#4bbca7" shape="Ellipse">
|
||||
<e-labels>
|
||||
<e-diagram-label text="Ellipse" wrap-text="true" font-color="white"></e-diagram-label>
|
||||
</e-labels>
|
||||
</e-basic-shape>
|
||||
<e-basic-shape name="Polygon" width="100" height="100" offset-X="150" offset-Y="350" fill-color="#c19ab8" border-color="#ad6fa1" shape="Polygon">
|
||||
<e-points>
|
||||
<e-shape-point x="13.560f" y="67.524f"></e-shape-point>
|
||||
<e-shape-point x="21.941f" y="41.731f"></e-shape-point>
|
||||
<e-shape-point x="0.000f" y="25.790f"></e-shape-point>
|
||||
<e-shape-point x="27.120f" y="25.790f"></e-shape-point>
|
||||
<e-shape-point x="35.501f" y="0.000f"></e-shape-point>
|
||||
<e-shape-point x="43.882f" y="25.790f"></e-shape-point>
|
||||
<e-shape-point x="71.000f" y="25.790f"></e-shape-point>
|
||||
<e-shape-point x="49.061f" y="41.731f"></e-shape-point>
|
||||
<e-shape-point x="57.441f" y="67.524f"></e-shape-point>
|
||||
<e-shape-point x="35.501f" y="51.583f"></e-shape-point>
|
||||
<e-shape-point x="13.560f" y="67.524f"></e-shape-point>
|
||||
</e-points>
|
||||
<e-labels>
|
||||
<e-diagram-label text="Polygon" font-color="white"></e-diagram-label>
|
||||
</e-labels>
|
||||
</e-basic-shape>
|
||||
<e-basic-shape name="Path" width="100" height="100" offset-X="350" offset-Y="350" shape="Path" fill-color="#fbe172" border-color="#f4cd2a" path-data="M78.631,3.425c-0.699-1.229-2.177-2.653-5.222-2.394c-8.975,0.759-26.612,16.34-30.804,22.411c-0.167-0.79-0.551-2.049-1.377-2.741c1.176-2.069,3.035-5.709,3.813-9.156c0.18-0.044,0.338-0.161,0.385-0.41c0.083-0.423,0.146-0.848,0.23-1.268c0.135-0.706-0.962-0.944-1.086-0.245c-0.078,0.431-0.158,0.852-0.234,1.286c-0.04,0.26,0.076,0.464,0.26,0.569c-0.756,3.361-2.575,6.93-3.737,8.975c-0.2-0.105-0.415-0.189-0.661-0.224c-0.07-0.009-0.132,0.005-0.199,0.003c-0.067,0.002-0.129-0.012-0.199-0.003c-0.246,0.035-0.461,0.119-0.661,0.224c-1.162-2.045-2.981-5.613-3.737-8.975c0.185-0.104,0.301-0.309,0.26-0.569c-0.076-0.434-0.156-0.855-0.234-1.286c-0.124-0.699-1.221-0.46-1.086,0.245c0.085,0.42,0.147,0.845,0.23,1.268c0.047,0.249,0.205,0.367,0.385,0.41c0.777,3.446,2.637,7.087,3.813,9.156c-0.826,0.692-1.21,1.951-1.377,2.741C33.203,17.371,15.566,1.789,6.591,1.031C3.546,0.772,2.068,2.196,1.369,3.425c-0.818,1.407-0.185,4.303,0.993,9.321c0.53,2.228,1.075,4.521,1.465,6.779c0.208,1.239,0.404,2.471,0.59,3.65c0.819,5.33,1.503,9.766,3.714,11.187c0.606,0.39,1.313,0.55,2.179,0.442c2.107-0.46,4.627-0.845,7.293-1.12c-2.613,1.77-5.88,4.65-6.953,8.474c-0.827,2.989-0.175,6.031,1.932,9.083c2.482,3.569,5.027,5.915,7.406,7.444c4.756,3.057,8.874,2.843,10.613,2.75c0.179-0.002,0.318-0.014,0.453-0.018c1.324-0.017,2.23-1.868,4.161-6.064c0.948-2.044,2.358-5.088,3.546-6.638c0.249,0.57,0.96,0.972,1.331,1.085c-0.03,0.014-0.067,0.039-0.094,0.049c0.034-0.007,0.074-0.03,0.111-0.042c0.022,0.006,0.055,0.023,0.074,0.027c-0.017-0.006-0.046-0.022-0.066-0.03c0.391-0.131,0.876-0.532,1.119-1.088c1.188,1.549,2.598,4.594,3.546,6.638c1.931,4.196,2.838,6.047,4.161,6.064c0.135,0.004,0.274,0.016,0.453,0.018c1.739,0.093,5.857,0.307,10.613-2.75c2.379-1.529,4.924-3.875,7.406-7.444c2.106-3.052,2.759-6.094,1.932-9.083c-1.073-3.823-4.34-6.704-6.953-8.474c2.667,0.274,5.186,0.659,7.293,1.12c0.866,0.108,1.573-0.053,2.179-0.442c2.211-1.421,2.895-5.857,3.714-11.187c0.185-1.18,0.382-2.411,0.59-3.65c0.39-2.258,0.935-4.551,1.465-6.779C78.816,7.728,79.448,4.832,78.631,3.425z M41.184,48.732c-0.343,0.551-0.781,0.918-1.082,1.065c-0.324-0.135-0.933-0.497-1.286-1.065c0,0-1.506-19.959-1.349-24.911c0,0,0.509-3.147,2.533-3.169c2.024,0.022,2.533,3.169,2.533,3.169C42.69,28.773,41.184,48.732,41.184,48.732z">
|
||||
<e-labels>
|
||||
<e-diagram-label text="Path" font-color="white"></e-diagram-label>
|
||||
</e-labels>
|
||||
</e-basic-shape>
|
||||
<e-image-node name="Image" width="100" height="100" offset-X="550" offset-Y="350" border-color="black" scale="Stretch" source="../images/Employee/6.png">
|
||||
</e-image-node>
|
||||
<e-html-node name="Html" width="100" height="100" offset-X="150" offset-Y="550" fill-color="#68a3d6" border-color="#3382c4" template-id="htmlTemplate">
|
||||
<e-labels>
|
||||
<e-diagram-label text="Html" font-color="white"></e-diagram-label>
|
||||
</e-labels>
|
||||
</e-html-node>
|
||||
<e-native-node name="Native" width="100" height="100" offset-X="350" offset-Y="550" fill-color="#de6ca9" border-color="#de6ca9" scale="Stretch" template-id="svgTemplate">
|
||||
</e-native-node>
|
||||
<e-text-node name="Text" width="100" height="100" offset-X="550" offset-Y="550" fill-color="transparent" border-color="transparent">
|
||||
<e-diagram-text-block text="Text Node" text-align="Center"></e-diagram-text-block>
|
||||
</e-text-node>
|
||||
</e-nodes>
|
||||
</ej-diagram>
|
||||
|
||||
}
|
||||
@section ScriptReferenceSection{
|
||||
<link href="@Url.Content("~/images/diagram/drawingtools/drawingtools.css")" rel="stylesheet" />
|
||||
}
|
||||
@section ScriptSection{
|
||||
<script type="text/javascript">
|
||||
$("#ToolbarItem").ejToolbar({
|
||||
width: "700px",
|
||||
height: "33px",
|
||||
click: "onItemclick"
|
||||
});
|
||||
|
||||
$("#Checkbox1").ejCheckBox({
|
||||
text: "Continuous Draw",
|
||||
change: "checkBoxChange",
|
||||
});
|
||||
function checkBoxChange(args) {
|
||||
checkbox();
|
||||
}
|
||||
|
||||
function onItemclick(args) {
|
||||
var diagram = $("#diagram").ejDiagram("instance");
|
||||
var option = args.currentTarget.id;
|
||||
switch (option) {
|
||||
case "Rectangle_Tool":
|
||||
diagram.model.drawType = { type: "basic", shape: "rectangle" };
|
||||
break;
|
||||
case "RoundedRectangle_Tool":
|
||||
diagram.model.drawType = { type: "basic", shape: "rectangle", "cornerRadius": 5 };
|
||||
break;
|
||||
case "Ellipse_Tool":
|
||||
diagram.model.drawType = { type: "basic", shape: "ellipse" };
|
||||
break;
|
||||
case "Polygon_Tool":
|
||||
diagram.model.drawType = { type: "basic", shape: "polygon", points: [{ x: 13.560, y: 67.524 }, { x: 21.941, y: 41.731 }, { x: 0.000, y: 25.790 }, { x: 27.120, y: 25.790 }, { x: 35.501, y: 0.000 }, { x: 43.882, y: 25.790 }, { x: 71.000, y: 25.790 }, { x: 49.061, y: 41.731 }, { x: 57.441, y: 67.524 }, { x: 35.501, y: 51.583 }, { x: 13.560, y: 67.524 }] };
|
||||
break;
|
||||
case "Path_Tool":
|
||||
diagram.model.drawType = { type: "basic", shape: "path", pathData: "M78.631,3.425c-0.699-1.229-2.177-2.653-5.222-2.394c-8.975,0.759-26.612,16.34-30.804,22.411c-0.167-0.79-0.551-2.049-1.377-2.741c1.176-2.069,3.035-5.709,3.813-9.156c0.18-0.044,0.338-0.161,0.385-0.41c0.083-0.423,0.146-0.848,0.23-1.268c0.135-0.706-0.962-0.944-1.086-0.245c-0.078,0.431-0.158,0.852-0.234,1.286c-0.04,0.26,0.076,0.464,0.26,0.569c-0.756,3.361-2.575,6.93-3.737,8.975c-0.2-0.105-0.415-0.189-0.661-0.224c-0.07-0.009-0.132,0.005-0.199,0.003c-0.067,0.002-0.129-0.012-0.199-0.003c-0.246,0.035-0.461,0.119-0.661,0.224c-1.162-2.045-2.981-5.613-3.737-8.975c0.185-0.104,0.301-0.309,0.26-0.569c-0.076-0.434-0.156-0.855-0.234-1.286c-0.124-0.699-1.221-0.46-1.086,0.245c0.085,0.42,0.147,0.845,0.23,1.268c0.047,0.249,0.205,0.367,0.385,0.41c0.777,3.446,2.637,7.087,3.813,9.156c-0.826,0.692-1.21,1.951-1.377,2.741C33.203,17.371,15.566,1.789,6.591,1.031C3.546,0.772,2.068,2.196,1.369,3.425c-0.818,1.407-0.185,4.303,0.993,9.321c0.53,2.228,1.075,4.521,1.465,6.779c0.208,1.239,0.404,2.471,0.59,3.65c0.819,5.33,1.503,9.766,3.714,11.187c0.606,0.39,1.313,0.55,2.179,0.442c2.107-0.46,4.627-0.845,7.293-1.12c-2.613,1.77-5.88,4.65-6.953,8.474c-0.827,2.989-0.175,6.031,1.932,9.083c2.482,3.569,5.027,5.915,7.406,7.444c4.756,3.057,8.874,2.843,10.613,2.75c0.179-0.002,0.318-0.014,0.453-0.018c1.324-0.017,2.23-1.868,4.161-6.064c0.948-2.044,2.358-5.088,3.546-6.638c0.249,0.57,0.96,0.972,1.331,1.085c-0.03,0.014-0.067,0.039-0.094,0.049c0.034-0.007,0.074-0.03,0.111-0.042c0.022,0.006,0.055,0.023,0.074,0.027c-0.017-0.006-0.046-0.022-0.066-0.03c0.391-0.131,0.876-0.532,1.119-1.088c1.188,1.549,2.598,4.594,3.546,6.638c1.931,4.196,2.838,6.047,4.161,6.064c0.135,0.004,0.274,0.016,0.453,0.018c1.739,0.093,5.857,0.307,10.613-2.75c2.379-1.529,4.924-3.875,7.406-7.444c2.106-3.052,2.759-6.094,1.932-9.083c-1.073-3.823-4.34-6.704-6.953-8.474c2.667,0.274,5.186,0.659,7.293,1.12c0.866,0.108,1.573-0.053,2.179-0.442c2.211-1.421,2.895-5.857,3.714-11.187c0.185-1.18,0.382-2.411,0.59-3.65c0.39-2.258,0.935-4.551,1.465-6.779C78.816,7.728,79.448,4.832,78.631,3.425z M41.184,48.732c-0.343,0.551-0.781,0.918-1.082,1.065c-0.324-0.135-0.933-0.497-1.286-1.065c0,0-1.506-19.959-1.349-24.911c0,0,0.509-3.147,2.533-3.169c2.024,0.022,2.533,3.169,2.533,3.169C42.69,28.773,41.184,48.732,41.184,48.732z" };
|
||||
break;
|
||||
case "Textbox_Tool":
|
||||
diagram.model.drawType = { type: "text", textBlock: { "text": "TextNode", textAlign: ej.datavisualization.Diagram.TextAlign.Center }, fillColor: "transparent", borderColor: "transparent" };
|
||||
break;
|
||||
case "Image_Tool":
|
||||
diagram.model.drawType = { type: "image", source: "../images/Employee/6.png" };
|
||||
break;
|
||||
case "Html_Tool":
|
||||
diagram.model.drawType = { type: "html", templateId: "htmlTemplate" };
|
||||
break;
|
||||
case "Native_Tool":
|
||||
diagram.model.drawType = { type: "native", templateId: "svgTemplate" };
|
||||
break;
|
||||
}
|
||||
if (option != "check") ToolbarCommandEnabled(option);
|
||||
checkbox();
|
||||
}
|
||||
|
||||
function checkbox() {
|
||||
var diagram = $("#diagram").ejDiagram("instance");
|
||||
var tool = diagram.tool();
|
||||
if ($("#Checkbox1").is(':checked')) {
|
||||
diagram.update({ tool: tool | ej.datavisualization.Diagram.Tool.ContinuesDraw })
|
||||
}
|
||||
else {
|
||||
tool = tool & ~ej.datavisualization.Diagram.Tool.ContinuesDraw;
|
||||
diagram.update({ tool: tool | ej.datavisualization.Diagram.Tool.DrawOnce })
|
||||
}
|
||||
}
|
||||
|
||||
function nodeCollectionChange(args) {
|
||||
var diagram = $("#diagram").ejDiagram("instance");
|
||||
if (!$("#Checkbox1").is(':checked') && diagram.model.drawType.type) {
|
||||
ToolbarCommandEnabled();
|
||||
diagram.model.drawType = {};
|
||||
}
|
||||
}
|
||||
|
||||
function ToolbarCommandEnabled(id) {
|
||||
$('#Rectangle_Tool').css('background-color', '#ebeced');
|
||||
$("#Rectangle_Tool").find("div").removeClass("icon-colors");
|
||||
$('#RoundedRectangle_Tool').css('background-color', '#ebeced');
|
||||
$("#RoundedRectangle_Tool").find("div").removeClass("icon-colors");
|
||||
$('#Textbox_Tool').css('background-color', '#ebeced');
|
||||
$("#Textbox_Tool").find("div").removeClass("icon-colors");
|
||||
$('#Native_Tool').css('background-color', '#ebeced');
|
||||
$("#Native_Tool").find("div").removeClass("icon-colors");
|
||||
$('#Html_Tool').css('background-color', '#ebeced');
|
||||
$("#Html_Tool").find("div").removeClass("icon-colors");
|
||||
$('#Image_Tool').css('background-color', '#ebeced');
|
||||
$("#Image_Tool").find("div").removeClass("icon-colors");
|
||||
$('#Path_Tool').css('background-color', '#ebeced');
|
||||
$("#Path_Tool").find("div").removeClass("icon-colors");
|
||||
$('#Polygon_Tool').css('background-color', '#ebeced');
|
||||
$("#Polygon_Tool").find("div").removeClass("icon-colors");
|
||||
$('#Ellipse_Tool').css('background-color', '#ebeced');
|
||||
$("#Ellipse_Tool").find("div").removeClass("icon-colors");
|
||||
if (id) {
|
||||
$('#' + id).css('background-color', '#2282c3');
|
||||
$("#" + id).find("div").addClass("icon-colors");
|
||||
}
|
||||
}
|
||||
</script>
|
||||
}
|
||||
<style>
|
||||
.svg-rotate-ie:hover {
|
||||
cursor: url("~/wwwroot/css/content/ej/common-images/rotate.cur"),default;
|
||||
}
|
||||
|
||||
.svg-rotate {
|
||||
cursor: url("~/wwwroot/css/content/ej/common-images/rotate.cur"),default;
|
||||
}
|
||||
</style>
|
||||
Некоторые файлы не были показаны из-за слишком большого количества измененных файлов Показать больше
Загрузка…
Ссылка в новой задаче