Skip to content

Instantly share code, notes, and snippets.

@ArunPnurA

ArunPnurA/app.html

Created November 19, 2018 09:51
Show Gist options
  • Save ArunPnurA/f715e41694741c01013192292957b338 to your computer and use it in GitHub Desktop.
Save ArunPnurA/f715e41694741c01013192292957b338 to your computer and use it in GitHub Desktop.
Download ZIP
Splitter : integration
Raw
app.html
<template>
<require from="./integration.css"></require>
<require from="./test"></require>
<div class="content-container-fluid">
<div class="row">
<div class="cols-sample-area splitter-width">
<!----------------Autocomplete Control---------------->
<input type="text" id="selectTags" e-on-select.trigger='onselect($event.detail)'
ej-autocomplete.ref="autocomplete" ej-autocomplete="e-value.bind:itemTags;e-allow-add-new:true;e-width.bind:width;e-show-popup-button:true;e-multi-select-mode:VisualMode; e-watermark-text:Select Tags; e-data-source.bind:filteredTags;e-fields.bind: { text: 'name', key: 'id' };"/>
<!------------------------------------------------->
</div>
</div>
</div>
</template>
Raw
app.js
import {Test} from './test'
export class BasicUse {
constructor() {
this.itemTags = "Alabama,Alaska,California,Delaware"
this.filteredTags = [
{ id: 's1', name: 'Alabama' }, { id: 's2', name: 'Alaska' },
{ id: 's3', name: 'Arizona' }, { id: 's4', name: 'Arkansas' },
{ id: 's5', name: 'California' }, { id: 's6', name: 'Colorado' },
{ id: 's7', name: 'Connecticut' },
{ id: 's8', name: 'Delaware' },
{ id: 's9', name: 'Florida' },
{ id: 's10', name: 'Georgia' },
{ id: 's11', name: 'Hawaii' },
{ id: 's12', name: 'Idaho' }, { id: 's13', name: 'Illinois' },
{ id: 's14', name: 'Indiana' }, { id: 's15', name: 'Iowa' },
{ id: 's16', name: 'Kansas' }, { id: 's17', name: 'Kentucky' },
{ id: 's18', name: 'Louisiana' }, { id: 's19', name: 'Maine' },
{ id: 's20', name: 'Maryland' }, { id: 's21', name: 'Massachusetts' },
{ id: 's22', name: 'Michigan' }, { id: 's23', name: 'Montana' },
{ id: 's24', name: 'New Mexico' }, { id: '25', name: 'New York' },
{ id: '26', name: 'North Carolina' }, { id: 's27', name: 'Nevada' },
{ id: 's28', name: 'New Jersey' }, { id: 's29', name: 'Pennsylvania' },
{ id: 's30', name: 'Ohio' }, { id: 's31', name: 'Oklahoma' },
{ id: 's32', name: 'Oregon' },
{ id: 's33', name: 'Rhode Island' },
{ id: 's34', name: 'South Carolina' }, { id: 's35', name: 'South Dakota' },
{ id: 's36', name: 'Tennessee' }, { id: 's37', name: 'Texas' },
{ id: 's38', name: 'Utah' },
{ id: 's39', name: 'Vermont' }, { id: 's40', name: 'Virginia' },
{ id: 's41', name: 'Washington' }, { id: 's42', name: 'West Virginia' },
{ id: 's43', name: 'Wisconsin' }, { id: 's44', name: 'Wyoming' }
];
}
onselect(args) {
if(args.text.indexOf('Add New') >= 0){
// different event that fires for adding a new item
var newval = args.text.replace('(Add New)','').trim();
alert("New value: " + newval)
this.autocomplete.widget.model.dataSource.push({name: newval ,id: '101'});
}
else
{
//do for normal select operation
}
}
}
Raw
index.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Essential Studio for JavaScript">
<meta name="author" content="Syncfusion">
<title>Untitled</title>
<!-- Essential Studio for JavaScript theme reference -->
<link rel="stylesheet" href="https://cdn.syncfusion.com/14.2.0.28/js/web/flat-azure/ej.web.all.min.css" />
</head>
<body aurelia-app="main">
<h1>Loading...</h1>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.6/system.js"></script>
<script src="https://rawgit.com/aurelia-ui-toolkits/aurelia-syncfusion-bundles/0.0.1/config2.js"></script>
<script>
System.import('aurelia-bootstrapper');
</script>
</body>
</html>
Raw
integration.css
.e-splitter{
display: block;
}
.cont {
padding: 20px;
min-width: 50px;
}
.cont #treeView_Container {
margin-bottom: 0;
border: none;
}
.h3 {
font-size: 14px;
margin: 0;
}
.spe {
display: none;
}
@media (max-width: 1920px) and (min-width: 1024px){
.row .cols-sample-area {
min-height: 406px;
}
}
.row .cols-sample-area {
background-color: white;
margin-bottom: 25px;
padding: 25px;
min-width: 250px;
}
Raw
main.js
export function configure(aurelia) {
aurelia.use
.standardConfiguration()
.developmentLogging()
.plugin('aurelia-syncfusion-bridge', syncfusion => syncfusion.useAll());
aurelia.start().then(a => a.setRoot());
}
Raw
test.html
<template>
<div>
<ej-tab id="defaultTab">
<ul>
<li><a href="#steelman">Man of Steel</a></li>
<li><a href="#woldwar">World War Z</a></li>
<li><a href="#unive">Monsters University</a></li>
</ul>
<div id="steelman">
<div class="row">
<div class="col-md-6">
<div>
<span class="movie-header">Man of Steel</span>
<br />
<span>Movie Info:</span>
<p>
A young boy learns that he has powers and is not of this Earth.
</p>
</div>
</div>
</div>
</div>
<div id="woldwar">
<div class="row">
<div class="col-md-6">
<div>
<span class="movie-header">World War Z</span>
<br />
<span>Movie Info:</span>
<p>
The story revolves around United Nations employee Gerry Lane (Pitt).
</p>
</div>
</div>
</div>
</div>
<div id="unive">
<div class="row">
<div class="col-md-6">
<div>
<span class="movie-header">Monsters University</span>
<br />
<span>Movie Info:</span>
<p>
Mike Wazowski and James P. Sullivan are an inseparable pair, but that wasn't always the case.
</p>
</div>
</div>
</div>
</div>
</ej-tab>
</div>
</template>
Raw
test.js
export class Test {
constructor() {
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment