+91 9422537131 | info@adhvik.online |
Sports Sagaa | Simplicity Global Services Register
by 453
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
/**
* DropDownList Template Sample
*/
import { MultiSelect } from '@syncfusion/ej2-dropdowns';



let dataSource: { [key: string]: Object; }[] = [
{ emailid: 'robert@example.com', text: 'Robert', avatar: '', pic: 'Robert', badge: 'away', Designation: 'Team Lead' },
{ emailid: 'nancy@example.com', text: 'Nancy', avatar: '', pic: 'Nancy', badge: 'available', Designation: 'Developer' },
{ emailid: 'john@example.com', text: 'John', pic: 'john', avatar: '', badge: 'busy', Designation: 'HR' },
{ emailid: 'andrew@example.com', text: 'Andrew', avatar: '', pic: 'andrew',badge: 'available', Designation: 'Team Lead' },
{ emailid: 'anne@example.com', text: 'Anne Dodsworth', pic: 'Anne', avatar: '',badge: 'busy', Designation: 'Developer' },
{ emailid: 'steven@example.com', text: 'Steven', pic: 'steven', avatar: '',badge: 'away', Designation: 'HR' },
{ emailid: 'margaret@example.com', text: 'Margaret', avatar: '', pic: 'margaret',badge: 'busy', Designation: 'HR' },
{ emailid: 'timer@example.com', text: 'Tamer Andrew', avatar: '', pic: 'Tamer',badge: 'available', Designation: 'HR' },
{ emailid: 'vinet@example.com', text: 'Vinet Zachery', avatar: '', pic: 'Vinet',badge: 'away', Designation: 'Developer' }
];

// initialize DropDownList component
let dropDownListObj: MultiSelect = new MultiSelect ({
// set the employees data to dataSource property
dataSource: dataSource,
// map the appropriate columns to fields property
fields: { text: 'text', groupBy: 'Designation' },
// set the template content for popup header element
// set the template content for list items
itemTemplate: '<div class="listWrapper">' +
'${if(avatar!=="")}' +
'<span class="${text} ${badge} e-avatar e-avatar-small e-avatar-circle"><span class="text">${avatar}</span></span>' +
'${else}' +
'<span class="${pic} e-avatar e-avatar-small e-avatar-circle"> </span>' +
'${/if}' +
'<span class="e-badge icons"><span class="${badge}"></span></span><div class="list-text"><div class="name">' +
'${text} </div><div class="email">' +
'${emailid}</div></div></div>',
// set the template content for displays the selected items in input element.
valueTemplate: '<div class="listWrapper ${badge}" style="width:100%;height:100%;">'
+
'${if(avatar!=="")}' +
'<span class="${text} e-avatar e-avatar-small e-avatar-circle"><span class="text">${avatar}</span></span>' +
'${else}' +
'<span class="${pic} e-avatar e-avatar-small e-avatar-circle"> </span>' +
'${/if}' +
'<span class="list-text">' +
'${text} </span></div>',
// set the placeholder to DropDownList input element
placeholder: 'Select an employee',
// set the height of the popup element
popupHeight: '235px',
sortOrder: 'Ascending',
mode: 'Box',
value:['Andrew','John'],
hideSelectedItem: false
});
dropDownListObj.appendTo('#employees');
dropDownListObj.showPopup();
(dropDownListObj as any).inputElement.focus();
(dropDownListObj as any).overAllWrapper.classList.add('e-input-focus');
HTML ===============================
<head>

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 TypeScript Components" />
<meta name="author" content="Syncfusion" />
<link href="https://ej2.syncfusion.com/products/dist/material.css" rel="stylesheet" />
<script type="text/javascript">
if (/MSIE \d|Trident.*rv:/.test(navigator.userAgent)) {
document.write('<script src="https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.5.1/bluebird.min.js"><\/script>');
}
</script>
</head>
</head>


<body>
<div id="container">
<input type="text" tabindex="1" id="employees">
</div>
<style>
#control-container {
padding: 0px !important;
}

#container {
margin: 0px 25%;
}

.listWrapper {
width: inherit;
height: inherit;
position: relative;
}


.e-list-item {
cursor: pointer;
height: 50px;
line-height: 44px;
border: 0;
}

/* Badge Positioning */

.e-chips .listWrapper .list-text {
margin: 4px 0px 3px 40px;
}

.e-chips .listWrapper .text {
margin-right: 0px;
}

.e-chips .listWrapper .e-avatar {
top: calc(100% - 39px);
font-size: 10px;
left: 0px;
height: 3.4em;
width: 3.4em;
}

.e-multi-select-wrapper .e-chips>.e-chipcontent {
height: 34px;
}

.e-chipcontent .listWrapper {
top: 5px;
}

.e-chipcontent .listWrapper.available .e-avatar {
background-color: #98E16E;
}

.e-chipcontent .listWrapper.away .e-avatar {
background-color: #FFE65E;
}

.e-chipcontent .listWrapper.busy .e-avatar {
background-color: #FF4B4B;
}

.listWrapper .list-text {
display: inline-block;
vertical-align: middle;
margin: 12px 25px;
font-size: 14px;
}

/* Avatar Positioning */

.listWrapper .e-avatar {
position: absolute;
top: calc(100% - 42px);
font-size: 10px;
left: 5px;
}

.e-list-item .e-avatar {
background-color: #EBEBEB;
height: 4em;
width: 4em;
}

/* Avatar Background Customization */
.text {
font-size: 15px;
margin-right: 10px;
}

.email {
color: #979A9C;
font-size: 12px;
line-height: 17px;
}

.e-list-item .list-text .name {
color: #263545;
font-size: 14px;
font-weight: 500;
line-height: 19px;
}

/* Avatar images using 'background-image' property */

.Robert {
background-image: url('../../../images/multiselect/Robert.png');
}

.Nancy {
background-image: url('../../../images/multiselect/Nancy.png');
}

.john {
background-image: url('../../../images/multiselect/john.png');
}

.andrew {
background-image: url('../../../images/multiselect/andrew.png');
}

.Anne {
background-image: url('../../../images/multiselect/Anne.png');
}

.steven {
background-image: url('../../../images/multiselect/steven.png');
}

.margaret {
background-image: url('../../../images/multiselect/margaret.png');
}

.Tamer {
background-image: url('../../../images/multiselect/Tamer.png');
}

.Vinet {
background-image: url('../../../images/multiselect/Vinet.png');
}

.e-badge.icons {
padding: 0;
right: 0;
position: absolute;
top: 25px;
background: transparent;
}

.e-chips .e-badge.icons {
left: 18px;
top: 4px
}

.e-list-item .e-badge .available {
background-color: #98E16E;
width: 8px;
height: 8px;
display: inline-block;
border-radius: 50%;
}

.e-list-item .e-badge .away {
background-color: #FFE65E;
width: 8px;
height: 8px;
display: inline-block;
border-radius: 50%;
}

.e-list-item .e-badge .busy {
background-color: #FF4B4B;
width: 8px;
height: 8px;
display: inline-block;
border-radius: 50%;
}

.e-input-group:not(.e-float-icon-left):not(.e-float-input)::before,
.e-input-group:not(.e-float-icon-left):not(.e-float-input)::after,
.e-input-group.e-control-wrapper:not(.e-float-icon-left):not(.e-float-input)::before,
.e-input-group.e-control-wrapper:not(.e-float-icon-left):not(.e-float-input)::after {
background: #FF4800;
}

.e-dropdownbase .e-list-item.e-item-focus {
background: #F5F5F5;
}

.e-popup.e-multi-select-list-wrapper .e-list-item {
line-height: 40px;
min-height: 60px;
padding-left: 10px;
}

.e-dropdownbase .e-list-group-item,
.e-fixed-head {
color: #FF4800;
font-size: 14px;
font-weight: normal;
line-height: 52px;
min-height: 52px;
}

.e-multi-select-wrapper .e-chips {
height: 34px;
padding: 0 7px 0 0px;
}

.e-multi-select-wrapper input[type='text'] {
height: 40px;
min-height: 40px;
}

.e-multi-select-wrapper .e-chips .e-chips-close::before {
color: rgba(0, 0, 0, 0.4);
}

.e-multi-select-wrapper .e-chips.e-chip-selected,
.e-multi-select-wrapper .e-chips.e-chip-selected:hover,
.e-multi-select-wrapper .e-chips.e-mob-chip.e-chip-selected,
.e-multi-select-wrapper .e-chips.e-mob-chip.e-chip-selected:hover {
background-color: #FF4800;
}

.e-dropdownbase .e-list-item.e-item-focus {
background-color: transparent;
}

.e-dropdownbase .e-list-item.e-hover {
background-color: #F5F5F5;
}

.e-dropdownbase .e-list-item.e-active,
.e-dropdownbase .e-list-item.e-active.e-hover,
.e-popup.e-multi-select-list-wrapper .e-list-item.e-active.e-item-focus {
background-color: #FFF3E3;
border-color: #FFF3E3;
}

.e-multi-select-wrapper .e-chips-close.e-close-hooker {
font-size: 16px;
margin-top: -2em;
}

div#employees_popup,
div#employees_popup .e-dropdownbase.e-content {
border-radius: 5px;
}

.e-popup.e-multi-select-list-wrapper {
box-shadow: 0 3px 10px 0px rgba(0, 0, 0, 0.10);
}

div#employees_popup,
.e-dropdownbase .e-list-parent {
padding-right: 8px;
}


div#employees_popup .e-content.e-dropdownbase::-webkit-scrollbar {
width: 8px;
border-radius: 4px;
}

div#employees_popup .e-content.e-dropdownbase::-webkit-scrollbar-track {
-webkit-box-shadow: none;
background-color: transparent;
box-shadow: none;
}

div#employees_popup .e-content.e-dropdownbase::-webkit-scrollbar-thumb {
background-color: #DEDEDE;
border-radius: 10px;
}

.e-popup.e-multi-select-list-wrapper .e-list-item.e-active,
.e-popup.e-multi-select-list-wrapper .e-list-item.e-active:hover {
border: 1px solid #FFF3E3;
}
</style>

</body>
Tags:
Share Post
by 241
Add each company registration form to the .z file so that it can be changed as per the company.
24 Aug 19 by Administrator 250
There are few web safe fonts which can be widely used in websites. Arial Helvetica Times New Roman Times Courier New Courier Verdana Georgia Palatino Garamond Bookman Comic Sans MS Treb
by 269
Add the following nos to the data-formview="1" etc to the link View Only List and View Only Entry Only Entry First on update go to List List Only List First on Edit or Add go to Entry Show Bo
16 Nov 19 by Administrator 167
Data Query
03 Jan 20 by Administrator 79
ALTER TABLE Item ADD ILink varchar(3500)ALTER TABLE Item ADD IDImages varchar(7000) ALTER TABLE generalsettings ADD GLink varchar(3500) GO ALTER VIEW [dbo].[vItem]ASSELECT i1.ILink,i1.CompanyId, i1
12590

We are simpliy creative. We create stunning identities for our clients that people recommand.

Login
×
Remember me
Forgot password?