group-template-plnkr.json

{"index.css":" /* ListView position alignment */\r\n\r\n #groupedList.e-listview {\r\n    display: block;\r\n    max-width: 350px;\r\n    margin: auto;\r\n    border: 1px solid;\r\n    line-height: initial;\r\n    border-color: rgba(0, 0, 0, 0.12);\r\n}\r\n\r\n/* ListView header alignment */\r\n\r\n#groupedList.e-listview .e-headertext:after {\r\n    font-family: 'e-list-group';\r\n    position: absolute;\r\n    content: \"\\e712\";\r\n    right: 16px;\r\n}\r\n\r\n#groupedList.e-listview .e-list-header {\r\n    color: white;\r\n    height: 57px;\r\n    background-color: #56697f;\r\n    padding-left: 15px;\r\n    position: sticky;\r\n    top: -1px;\r\n    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);\r\n}\r\n\r\n#groupedList.e-listview .e-list-header .e-text {\r\n    font-family: sans-serif;\r\n    font-size: 18px;\r\n    line-height: 26px;\r\n}\r\n\r\n/* ListView template customization */\r\n\r\n@font-face {\r\n    font-family: 'e-list-group';\r\n    src: url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');\r\n    font-weight: normal;\r\n    font-style: normal;\r\n}\r\n\r\n#groupedList.e-listview .e-list-item {\r\n    cursor: pointer;\r\n}\r\n\r\n#groupedList.e-listview .e-content {\r\n    height: 450px;\r\n    overflow-y: scroll;\r\n}\r\n\r\n#groupedList.e-listview .e-list-group-item {\r\n    padding: 0;\r\n    height: inherit;\r\n}\r\n\r\n#groupedList.e-listview .icon {\r\n    background: transparent;\r\n    font-family: 'e-list-group';\r\n    color: #FF4081;\r\n}\r\n\r\n#groupedList.e-listview .wifi:before {\r\n    content: \"\\e700\";\r\n    font-size: 25px;\r\n}\r\n\r\n#groupedList.e-listview .bluetooth:before {\r\n    content: \"\\e702\";\r\n    font-size: 25px;\r\n}\r\n\r\n#groupedList.e-listview .sim:before {\r\n    content: \"\\e705\";\r\n    font-size: 25px;\r\n}\r\n\r\n#groupedList.e-listview .display:before {\r\n    content: \"\\e704\";\r\n    font-size: 25px;\r\n}\r\n\r\n#groupedList.e-listview .sound:before {\r\n    content: \"\\e703\";\r\n    font-size: 25px;\r\n}\r\n\r\n#groupedList.e-listview .battery:before {\r\n    content: \"\\e711\";\r\n    font-size: 25px;\r\n}\r\n\r\n#groupedList.e-listview .user:before {\r\n    content: \"\\e707\";\r\n    font-size: 25px;\r\n}\r\n\r\n#groupedList.e-listview .location:before {\r\n    content: \"\\e708\";\r\n    font-size: 25px;\r\n}\r\n\r\n#groupedList.e-listview .security:before {\r\n    content: \"\\e709\";\r\n    font-size: 25px;\r\n}\r\n\r\n#groupedList.e-listview .language:before {\r\n    content: \"\\e710\";\r\n    font-size: 25px;\r\n}\r\n\r\n#groupedList.e-listview .e-hover {\r\n    transition: 0.5s;\r\n}\r\n\r\n/* ListView theme customization */\r\n\r\n.bootstrap #groupedList.e-listview .e-list-header .e-text {\r\n    line-height: 18px;\r\n}\r\n\r\n.highcontrast #groupedList.e-listview .e-list-header .e-text {\r\n    line-height: 26px;\r\n}\r\n\r\n.highcontrast #groupedList.e-listview .e-list-header {\r\n    color: #ffd939;\r\n    background-color: #000;\r\n}\r\n\r\n.fabric #groupedList.e-listview .icon {\r\n    color: #0078D7;\r\n}\r\n\r\n.bootstrap #groupedList.e-listview .icon {\r\n    color: #1073B1;\r\n}\r\n\r\n.highcontrast #groupedList.e-listview .icon {\r\n    color: #fff;\r\n}\r\n\r\n.highcontrast #groupedList.e-listview .e-active .icon {\r\n    color: black;\r\n}\r\n\r\n.material #groupedList.e-list-template .e-active .e-list-item-header,\r\n.material #groupedList.e-list-template .e-active .e-list-content {\r\n    color: #FF4081;\r\n}\r\n\r\n.fabric #groupedList.e-list-template .e-active .e-list-item-header,\r\n.fabric #groupedList.e-list-template .e-active .e-list-content {\r\n    color: black;\r\n}\r\n\r\n.bootstrap #groupedList.e-list-template .e-active .e-list-item-header,\r\n.bootstrap #groupedList.e-list-template .e-active .e-list-content {\r\n    color: #1073B1;\r\n}\r\n\r\n.highcontrast #groupedList.e-list-template .e-active .e-list-item-header,\r\n.highcontrast #groupedList.e-list-template .e-active .e-list-content {\r\n    color: #000;\r\n}\r\n","newsData":"/**\r\n * ListView Datasource\r\n */\r\nexport let newsData: any = [\r\n    {\r\n        'title': '\tIBM Open-Sources WebSphere Liberty Code',\r\n        'description': 'In late September, IBM announced that it would be open-sourcing the code for WebSphere...',\r\n        'content': '<p>In late September, IBM announced that it would be open-sourcing the code for'\r\n        + ' WebSphere Liberty, an application server intended to facilitate the development of Java'\r\n        + 'apps and microservices. Liberty is intended to allow developers to quickly develop and'\r\n        + 'deploy applications in a variety of environments while functioning seamlessly with other'\r\n        + 'solutions. IBM will continue to offer commercial versions of Liberty that include access to'\r\n        + 'dedicated technical support and advanced capabilities, but the core of the software will be'\r\n        + 'available to any developer.</p><p>By open-sourcing the code, IBM hopes to make Liberty a'\r\n        + 'relevant piece of software for some time to come while further improving the Java'\r\n        + 'development community. This fits in well with IBM’s earlier open-source contributions,'\r\n        + 'including Eclipse OpenJ9. In fact, with WebSphere Liberty, Eclipse OpenJ9, Eclipse'\r\n        + 'MicroProfile—which  IBM was a founding member of—and Java EE, it is possible to have a'\r\n        + 'fully open-licensed Java stack model to build, test, run, and scale Java applications. This'\r\n        + 'is fantastic news for Java developers, and an excellent opportunity to further the'\r\n        + 'standards of Java development for the entire community.</p><p>Are you a Java developer?'\r\n        + 'What do you think of this development? Let us know in the comments below or on Facebook or'\r\n        + ' Twitter.</p>'\r\n    },\r\n    {\r\n        'title': 'The Syncfusion Global License: Your Questions, Answered ',\r\n        'description': 'Syncfusion recently hosted a webinar to cover the ins and outs of the Syncfusion global...',\r\n        'content': '<p>Syncfusion recently hosted a webinar to cover the ins and outs of the'\r\n        + 'Syncfusion global license. We received many questions about the license, and our client'\r\n        + 'relations team, led by Pat Staley, has provided answers. Read on for a full overview of the'\r\n        + 'Syncfusion global license, or visit Syncfusion’s YouTube channel to watch the webinar in'\r\n        + 'full.</p><p>Q: Regarding the free license for companies with 5 developers or less than $1m'\r\n        + 'in annual revenue: when does that license expire?</p><p>A: The Community License has'\r\n        + 'several criteria that make it distinct from the global license, so there is no single'\r\n        + 'answer to that question. Any customers with questions about the Community License should'\r\n        + 'contact a Syncfusion sales representative.</p><p>Q: Our business line in health care'\r\n        + 'requires that we obtain business agreements with contractors and vendors. Has Syncfusion'\r\n        + 'signed these kinds of BAs in the past?</p><p>A: We work with many companies that request'\r\n        + 'such documents, and we can always put you in touch with our legal team for'\r\n        + 'specifics.</p><p>Q: We develop products. If we want to use dashboards, do our clients need'\r\n        + 'to buy the Dashboard Server or is it royalty-free?</p><p>A: Please contact'\r\n        + 'clientrelations@syncfusion.com with your contact information and company details. In'\r\n        + 'situations like this, we work with our clients to reach the best solution; there is no'\r\n        + 'single answer.</p><p>Q: Is there a time limit?</p><p>A: Our license model reflects a 1-year'\r\n        + 'term unless you make other arrangements during the sales process.</p><p>Q: Can I use my'\r\n        + 'global license to create software that has Syncfusion controls embedded within it and sell'\r\n        + 'this software to my clients, or does that require a reseller or runtime license?</p><p>A:'\r\n        + 'If you are providing an end-product to your client, and additional coding will not be'\r\n        + 'needed, you may sell your software to your client with just the global license. If the'\r\n        + 'software requires additional work over time, you will need to speak with your Syncfusion'\r\n        + 'sales representative to ensure you have the correct license.</p><p>Q: When does my license'\r\n        + 'expire?</p><p>A: You can log into your portal and view the expiration date under License'\r\n        + 'and Keys.</p><p>Q:  Who is my client relations representative?</p><p>A:  Please send an'\r\n        + 'email to clientrelations@syncfusion.com and we will be happy to have your dedicated client'\r\n        + 'relations representative reach out to you.</p><p>Q:  How do I get added to a portal?'\r\n        + '</p><p>A:  Reach out to your portal administrator, or send an email to'\r\n        + 'clientrelations@syncfusion.com and we will reach out to you to assist.</p><p>Q:  The portal'\r\n        + 'shows my license is expired. How do I get this updated?</p><p>A: Please contact your portal'\r\n        + 'administrator to ensure that you are added to the portal, or you can contact'\r\n        + 'clientrelations@syncfusion.com and our team will assist you.</p><p>Q:  Why don’t I see the'\r\n        + 'global license under My Orders?</p><p>A:  The order may be under a different profile; only'\r\n        + 'orders placed under your login will show.</p><p>Q:  Is the purchase price a one-time fee?'\r\n        + '</p><p>A:  The global license is a subscription, renewing annually unless otherwise'\r\n        + 'negotiated.</p><p>Q:  Is support charged separately?</p><p>A:  No, all support is included'\r\n        + 'in your standard license subscription. However, we do offer consulting services for custom'\r\n        + 'development separate from the global license. You can contact'\r\n        + 'clientrelations@syncfusion.com for more information on consulting if you are'\r\n        + 'interested.</p><p>Q:  I have contractors that do my development. Are they covered by the'\r\n        + 'global license?</p><p>A:  They can be! The flat license structure (project, division, and'\r\n        + 'global) is designed for use by third-party contractors. If that is requested and agreed'\r\n        + 'upon, we will include that information in your Master License Agreement.</p><p>Q:  What is'\r\n        + 'the benefit of including all my users in the portal?</p><p>A:  Developers can see support'\r\n        + 'incidents created within the portal and can receive patches and updates so users are all'\r\n        + 'working on the same version of Syncfusion. Our client relations team also monitors accounts'\r\n        + 'to ensure that you do not have an excessive amount of support incidents open at one time.'\r\n        + 'Ensuring that all of your users are in the portal helps us to manage your account and'\r\n        + 'incidents.</p><p>Q:  Can you tell me more about the client relations department?</p><p>A: '\r\n        + 'The CRD is your trusted advisor within Syncfusion. You will have direct contact with a'\r\n        + 'representative who can assist with service, support, and product education, and who can be'\r\n        + 'the ally you need for your development.</p><p>Q:  If I have a flat license, do I have to'\r\n        + 'update Syncfusion with users I need added to the portal?</p><p>A:  Syncfusion does not need'\r\n        + 'to be notified when a user needs to be added.</p><p>Q:  Why would I want to create a new'\r\n        + 'portal each time I start a new project?</p><p>A:  Not only is this a great organizational'\r\n        + 'feature that keeps your projects autonomous from one another, each portal can support a'\r\n        + 'different product version, allowing you to upgrade each project as needed. There is no'\r\n        + 'co-dependency here.</p><p>Q:   Do I have to assign a platform or component to each project?'\r\n        + 'What if I have multiple components being used on one project?</p><p>A:  The only time'\r\n        + 'Syncfusion will ask you to associate a platform or component with a project is during'\r\n        + 'incident creation. You can use multiple controls or components on one project, but only if'\r\n        + 'the components are using the same product version. As mentioned, the portal can only'\r\n        + 'support one product version at a time.</p><p>'\r\n    },\r\n    {\r\n        'title': 'Interview with Application Security in .NET Succinctly Author Stan Drapkin ',\r\n        'description': 'The following is a short interview with Succinctly series author Stan Drapkin, whose latest book...',\r\n        'content': '<p>The following is a short interview with Succinctly series author Stan Drapkin, whose latest book'\r\n        + 'Application Security in .NET Succinctly was published on Tuesday, October 12. You can download the book'\r\n        + 'here.</p><p>What should people know about application security in the .NET Framework? Why is it important?'\r\n        + '</p><p>Microsoft’s .NET Framework ushered a new era of rapid application development that was almost as powerful as'\r\n        + 'C/C++ development on one hand, but did not have as many sharp edges and opportunities to \"shoot yourself in the'\r\n        + 'foot\" on the other hand. The unfortunate side effect was that .NET developers\\' efforts were mostly spent'\r\n        + 'discovering and calling the APIs provided by the .NET ecosystem, not learning how to use these APIs correctly. Many'\r\n        + 'of the .NET security-related APIs are not safe to use by a casual .NET developer. This book tries to raise'\r\n        + 'awareness of many important application security topics that most .NET developers are bound to run into.</p><p>The'\r\n        + 'importance of understanding the challenges and pitfalls of application security is hard to underestimate. The'\r\n        + 'security breaches are happening weekly if not daily, and their scope and magnitude continue to grow as users'\r\n        + 'entrust (or are forced to entrust) more of their information to digital repositories and their'\r\n        + 'operators.</p><p>When did you first become interested in application security?</p><p>I became interested in'\r\n        + 'application security through a fascination with cryptography when I was 15 years old. I wrote an \"unbreakable\"'\r\n        + 'XOR-based encryption mechanism in Turbo Pascal that I was very proud of. As laughable as it is now, I\\'m sure many'\r\n        + 'folks in the security field have a similar story to share. The writings of Bruce Schneier fueled my interest and'\r\n        + 'made me realize that the information security domain is too focused on cryptographic tools and primitives, and not'\r\n        + 'focused enough on how to use these tools to engineer secure systems.</p><p>By writing this e-book, did you learn'\r\n        + 'anything new yourself?</p><p>I learned that application security and security in general are difficult topics to'\r\n        + 'write about. Unlike basic things like math or computer science, application security is a rapidly moving and'\r\n        + 'evolving field, with new threats, vulnerabilities, exploits, and countermeasures arriving nonstop. The prescriptive'\r\n        + '\"do X, Y, and Z to be safe\" approach to security might work today, but is inadequate tomorrow. Rather than \"giving'\r\n        + 'readers a fish,\" I’ve tried to \"teach them how to fish\" in hopes that a foundational understanding of core concepts'\r\n        + 'will provide longer-term value.</p><p>How will application security change over the next few years?</p><p>I think'\r\n        + 'the security field has come to a threshold where it will start to be regulated. The amount of incompetence and'\r\n        + 'negligence in this field is only matched by the magnitude of damages, and that creates a lethal combination that'\r\n        + 'everyone in our digital economy suffers from. We already regulate doctors, lawyers, pilots, and many other'\r\n        + 'professions, as well as organizations employing them.</p><p>I think that the regulatory changes will affect not'\r\n        + 'only the technical in-the-field professionals, but will also impact the C-suite, and force senior leadership to'\r\n        + 'give security pros a seat at the table. One of the highlights of this profound lack of senior-level understanding'\r\n        + 'was in the Equifax Personnel-Change statement that followed the recent massive Equifax data breach. Equifax'\r\n        + 'appointed a new Chief Security Officer (CSO), and made the CSO report to the CIO. When the just-been-breached'\r\n        + 'Equifax does not understand why the CSO must report to the CEO and not the CIO, that\\'s another sign that executive'\r\n        + 'leadership still does not have the right perspective on security.</p><p>Another industry-wide change in perspective'\r\n        + 'that I’m anticipating is a shift from “defend the castle” to “inmates are running the asylum.” Insider threats are'\r\n        + 'already among the main security threats of 2017, and yet most security efforts are still just building'\r\n        + 'walls.</p><p>Do you see the application security as part of a larger trend in software development?</p><p>I believe'\r\n        + 'that thinking of application security as a larger trend in software development is like thinking of mathematics as'\r\n        + 'a larger trend in physics, or thinking of backups as a larger trend in disaster recovery. Not everyone must be a'\r\n        + 'highly skilled application-security professional, just like not everyone must be a highly-skilled accountant,'\r\n        + 'lawyer, or engineer. Yet most IT companies rely on professional services of a relatively small number of skilled'\r\n        + 'experts with unique domains of expertise. As software continues to \"eat the world,\" software development as a field'\r\n        + 'has long been vast enough and important enough to warrant domain specializations. Boeing does not advertise'\r\n        + '\"full-stack aerospace engineer\" positions, and yet one of the core \"career areas\" for Boeing is \"cybersecurity.\"'\r\n        + 'Ten years ago, every company became a software company. In 2017, every software company must become a'\r\n        + 'cybersecurity-focused company. Cybersecurity begins in the C-suite.</p><p>What other books or resources on'\r\n        + 'application security do you recommend?</p><p>Microsoft’s Security Development Lifecycle book is a good read for'\r\n        + 'software development managers and architects. Those interested in the foundations of cryptography may find Crypto'\r\n        + '101 or the Serious Cryptography book suitable. Those interested in the fundamentals of TLS, the largest application'\r\n        + 'of cryptography to the web, should check out Bulletproof SSL and TLS. Tangled Web is another favorite of mine,'\r\n        + 'which covers the insanity of the modern web.</p>'\r\n    },\r\n    {\r\n        'title': 'Employees Wake Up and Lace Up for Making Strides',\r\n        'description': 'The American Cancer Society reports that each year collectively more than one million people...',\r\n        'content': '<p>The American Cancer Society reports that each year collectively more than one'\r\n        + 'million people participate in nearly 300 Making Strides Against Breast Cancer events in the'\r\n        + 'US, raising at least $60 million. That’s why this weekend a number of Syncfusion employees'\r\n        + 'from the client relations, marketing, and sales teams will lace up their shoes to'\r\n        + 'participate in Raleigh’s Making Strides Against Breast Cancer event, happening this'\r\n        + 'Saturday morning, October 14, at Midtown Park Event Stage.</p><p>Team Brett-y and the Jets,'\r\n        + 'assembled by Enterprise License Renewal Representative Brett Jarrett, will take an early'\r\n        + 'morning walk around Raleigh to help raise funds, increase awareness, and consolidate a'\r\n        + 'community in the fight against breast cancer.</p><p>They invite you to join in the walk, or'\r\n        + 'make a donation to the cause.</p><p>Making Strides Information</p><p>Where: Midtown Park'\r\n        + 'Event Stage, Raleigh, NC</p><p>When: Saturday, October 14, 2017</p><p>Time: Check-in at'\r\n        + '7:30 AM, opening ceremony at 8:00 AM, walk begins at 9:15 AM</p><p>Video: '\r\n        + 'https://www.youtube.com/watch?v=QaAy1tW0xbE</p><p>Website:'\r\n        + 'http://main.acsevents.org/site/TR?pg=entry&fr_id=84845</p> '\r\n    }\r\n];\r\n//Define an array of JSON data\r\nexport let dataSource: any = [\r\n    {\r\n        id: '01',\r\n        title: newsData[0].title,\r\n        description: newsData[0].description,\r\n        text: 'Syncfusion Blog',\r\n        imgSrc: 'src/listview/images/1.png', timeStamp: 'Syncfusion Blog - October 19, 2017',\r\n        child: [{\r\n            id: '01_1', title: newsData[0].title, category: newsData[0].title, text: newsData[0].title,\r\n            imgSrc: '', heading: '', timeStamp: '', description: newsData[0].content\r\n        }]\r\n    },\r\n    {\r\n        id: '02',\r\n        title: newsData[1].title,\r\n        description: newsData[1].description,\r\n        text: 'Syncfusion Blog',\r\n        imgSrc: 'src/listview/images/3.png', timeStamp: 'Syncfusion Blog - October 18, 2017',\r\n        child: [{\r\n            id: '03_1', title: newsData[1].title, category: newsData[1].title, text: newsData[1].title,\r\n            imgSrc: '', heading: '', timeStamp: '', description: newsData[1].content\r\n        }]\r\n    },\r\n    {\r\n        id: '03',\r\n        title: newsData[2].title,\r\n        description: newsData[2].description,\r\n        text: 'Syncfusion Blog',\r\n        imgSrc: 'src/listview/images/4.png', timeStamp: 'Syncfusion Blog - October 18, 2017',\r\n        child: [{\r\n            id: '04_1', title: newsData[2].title, category: newsData[2].title, text: newsData[2].title,\r\n            imgSrc: '', heading: '', timeStamp: '', description: newsData[2].content\r\n        }]\r\n    },\r\n    {\r\n        id: '04',\r\n        title: newsData[3].title,\r\n        description: newsData[3].description,\r\n        text: 'Syncfusion Blog',\r\n        imgSrc: 'src/listview/images/7.png', timeStamp: 'Syncfusion Blog - October 13, 2017',\r\n        child: [{\r\n            id: '07_1', title: newsData[3].title, category: newsData[3].title, text: newsData[3].title,\r\n            imgSrc: '', heading: '', timeStamp: '', description: newsData[3].content\r\n        }]\r\n    }\r\n\r\n];\r\n\r\nexport let groupDataSource: any = [\r\n    { Name: 'WI-FI', content: 'Disabled', id: '1', class: 'wifi', category: 'Wireless & networks', order: 0 },\r\n    { Name: 'Bluetooth', content: 'Disabled', id: '2', class: 'bluetooth', category: 'Wireless & networks', order: 0 },\r\n    { Name: 'SIM cards', id: '3', content: 'AT&T', class: 'sim', category: 'Wireless & networks', order: 0 },\r\n    { Name: 'Display', content: 'Adaptive brightness is OFF', id: '4', class: 'display', category: 'Device', order: 1 },\r\n    { Name: 'Sound', content: 'Ringer volume at 50%', id: '5', class: 'sound', category: 'Device', order: 1 },\r\n    { Name: 'Battery', content: '85%', id: '5', class: 'battery', category: 'Device', order: 1 },\r\n    { Name: 'Users', content: 'Signed in as Albert', id: '6', class: 'user', category: 'Device', order: 1 },\r\n    { Name: 'Location', content: 'ON / High accuracy', id: '7', class: 'location', category: 'Personal', order: 2 },\r\n    { Name: 'Security', id: '8', content: 'Screen Lock', class: 'security', category: 'Personal', order: 2 },\r\n    { Name: 'Languages & input', content: 'English (US)', id: '9', class: 'language', category: 'Personal', order: 2 }\r\n];\r\n\r\nexport let data1: { [key: string]: Object }[] = [\r\n    { text: 'Smith', id: 'received-01', icon: 'e-custom', type: 'received', group: 'Received', time: '2 hours ago', category: 'Today' },\r\n    { text: 'Johnson', id: 'received-02', icon: 'e-custom', type: 'received',\r\n        group: 'Received', time: 'Yesterday', category: 'Yesterday' },\r\n    { text: 'Williams', id: 'missed-01', icon: 'e-custom', type: 'missed', group: 'Missed', time: '4 hours ago', category: 'Today' },\r\n    { text: 'Jones', id: 'missed-02', icon: 'e-custom', type: 'missed', group: 'Missed', time: 'Yesterday', category: 'Yesterday' },\r\n    { text: 'Brown', id: 'received-03', icon: 'e-custom', type: 'received',\r\n        group: 'Received', time: 'Yesterday', category: 'Yesterday' },\r\n    { text: 'Anderson', id: 'received-01', icon: 'e-custom', type: 'received',\r\n        group: 'Received', time: '12 hours ago', category: 'Today' },\r\n    { text: 'Thomas', id: 'received-02', icon: 'e-custom', type: 'received',\r\n        group: 'Received', time: 'Yesterday', category: 'Yesterday' },\r\n    { text: 'Jackson', id: 'missed-01', icon: 'e-custom', type: 'missed', group: 'Missed', time: 'Yesterday', category: 'Yesterday' },\r\n    { text: 'Emily', id: 'missed-01', icon: 'e-custom', type: 'missed', group: 'Missed', time: '14 hours ago', category: 'Today' },\r\n    { text: 'White', id: 'missed-02', icon: 'e-custom', type: 'missed', group: 'Missed', time: 'Yesterday', category: 'Yesterday' },\r\n    { text: 'Jones', id: 'missed-02', icon: 'e-custom', type: 'missed', group: 'Missed', time: '18 hours ago', category: 'Today' },\r\n    { text: 'Grace', id: 'missed-02', icon: 'e-custom', type: 'missed', group: 'Missed', time: 'Yesterday', category: 'Yesterday' },\r\n    { text: 'Brooklyn', id: 'missed-02', icon: 'e-custom', type: 'missed', group: 'Missed', time: 'Yesterday', category: 'Yesterday' },\r\n    { text: 'Arianna', id: 'received-01', icon: 'e-custom', type: 'received',\r\n        group: 'Received', time: 'Yesterday', category: 'Yesterday' },\r\n    { text: 'Katherine', id: 'received-02', icon: 'e-custom', type: 'received',\r\n        group: 'Received', time: 'Yesterday', category: 'Yesterday' },\r\n];\r\n","systemjs.config.js":"System.config({\r\n    transpiler: \"ts\",\r\n    typescriptOptions: {\r\n            target: \"es5\",\r\n            module: \"commonjs\",\r\n            moduleResolution: \"node\",\r\n            emitDecoratorMetadata: true,\r\n            experimentalDecorators: true,\r\n            \"jsx\": \"react\"\r\n    },\r\n     meta: {\r\n      'typescript': {\r\n        \"exports\": \"ts\"\r\n      },\r\n      '*.json': { loader: 'plugin-json' }\r\n    },\r\n    paths: {\r\n        \"syncfusion:\": \"http://cdn.syncfusion.com/ej2/\"},\r\n    map: {\r\n        app: 'app',\r\n        ts: \"https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js\",\r\n        typescript: \"https://unpkg.com/typescript@2.2.2/lib/typescript.js\",\r\n        \"plugin-json\":\"https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js\",\r\n        \"@syncfusion/ej2-base\": \"syncfusion:ej2-base/dist/ej2-base.umd.min.js\",\r\n        \"@syncfusion/ej2-buttons\": \"syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js\",\r\n        \"@syncfusion/ej2-splitbuttons\": \"syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js\",\r\n        \"@syncfusion/ej2-charts\": \"syncfusion:ej2-charts/dist/ej2-charts.umd.min.js\",\r\n        \"@syncfusion/ej2-maps\": \"syncfusion:ej2-maps/dist/ej2-maps.umd.min.js\",\r\n        \"@syncfusion/ej2-treemap\": \"syncfusion:ej2-treemap/dist/ej2-treemap.umd.min.js\",\r\n        \"@syncfusion/ej2-circulargauge\": \"syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js\",\r\n        \"@syncfusion/ej2-lineargauge\": \"syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js\",\r\n        \"@syncfusion/ej2-calendars\": \"syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js\",\r\n        \"@syncfusion/ej2-data\": \"syncfusion:ej2-data/dist/ej2-data.umd.min.js\",\r\n        \"@syncfusion/ej2-dropdowns\": \"syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js\",\r\n        \"@syncfusion/ej2-grids\": \"syncfusion:ej2-grids/dist/ej2-grids.umd.min.js\",\r\n        \"@syncfusion/ej2-lists\": \"syncfusion:ej2-lists/dist/ej2-lists.umd.min.js\",\r\n        \"@syncfusion/ej2-inputs\": \"syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js\",\r\n        \"@syncfusion/ej2-navigations\": \"syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js\",\r\n        \"@syncfusion/ej2-popups\": \"syncfusion:ej2-popups/dist/ej2-popups.umd.min.js\",\r\n        \"@syncfusion/ej2-schedule\": \"syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js\",\r\n        \"@syncfusion/ej2-pdf-export\": \"syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js\",        \r\n        \"@syncfusion/ej2-compression\": \"syncfusion:ej2-compression/dist/ej2-compression.umd.min.js\",\r\n        \"@syncfusion/ej2-excel-export\": \"syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js\",        \r\n        \"@syncfusion/ej2-file-utils\": \"syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js\",\r\n        \"@syncfusion/ej2-documenteditor\": \"syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js\",\r\n        \"@syncfusion/ej2-notifications\": \"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js\",\r\n        \"@syncfusion/ej2-richtexteditor\": \"syncfusion:ej2-richtexteditor/dist/ej2-richtexteditor.umd.min.js\",\r\n\t\t\"@syncfusion/ej2-svg-base\": \"syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js\",\r\n        \"@syncfusion/ej2-pivotview\": \"syncfusion:ej2-pivotview/dist/ej2-pivotview.umd.min.js\",\r\n        \"@syncfusion/ej2-heatmap\": \"syncfusion:ej2-heatmap/dist/ej2-heatmap.umd.min.js\",\r\n        \"@syncfusion/ej2-react-base\": \"syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js\",\r\n        \"@syncfusion/ej2-react-buttons\": \"syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js\",\r\n        \"@syncfusion/ej2-react-splitbuttons\": \"syncfusion:ej2-react-splitbuttons/dist/ej2-react-splitbuttons.umd.min.js\",\r\n        \"@syncfusion/ej2-react-charts\": \"syncfusion:ej2-react-charts/dist/ej2-react-charts.umd.min.js\",\r\n        \"@syncfusion/ej2-react-maps\": \"syncfusion:ej2-react-maps/dist/ej2-react-maps.umd.min.js\",\r\n        \"@syncfusion/ej2-react-treemap\": \"syncfusion:ej2-react-treemap/dist/ej2-react-treemap.umd.min.js\",\r\n        \"@syncfusion/ej2-react-circulargauge\": \"syncfusion:ej2-react-circulargauge/dist/ej2-react-circulargauge.umd.min.js\",\r\n        \"@syncfusion/ej2-react-lineargauge\": \"syncfusion:ej2-react-lineargauge/dist/ej2-react-lineargauge.umd.min.js\",\r\n        \"@syncfusion/ej2-react-calendars\": \"syncfusion:ej2-react-calendars/dist/ej2-react-calendars.umd.min.js\",\r\n        \"@syncfusion/ej2-react-dropdowns\": \"syncfusion:ej2-react-dropdowns/dist/ej2-react-dropdowns.umd.min.js\",\r\n        \"@syncfusion/ej2-react-grids\": \"syncfusion:ej2-react-grids/dist/ej2-react-grids.umd.min.js\",\r\n        \"@syncfusion/ej2-react-inputs\": \"syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js\",\r\n        \"@syncfusion/ej2-react-lists\": \"syncfusion:ej2-react-lists/dist/ej2-react-lists.umd.min.js\",\r\n        \"@syncfusion/ej2-react-navigations\": \"syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js\",\r\n        \"@syncfusion/ej2-react-popups\": \"syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js\",\r\n        \"@syncfusion/ej2-react-schedule\": \"syncfusion:ej2-react-schedule/dist/ej2-react-schedule.umd.min.js\",\r\n        \"@syncfusion/ej2-react-documenteditor\": \"syncfusion:ej2-react-documenteditor/dist/ej2-react-documenteditor.umd.min.js\",\r\n        \"@syncfusion/ej2-react-notifications\": \"syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.min.js\",\r\n        \"@syncfusion/ej2-react-richtexteditor\": \"syncfusion:ej2-react-richtexteditor/dist/ej2-react-richtexteditor.umd.min.js\",\r\n        \"@syncfusion/ej2-react-pivotview\": \"syncfusion:ej2-react-pivotview/dist/ej2-react-pivotview.umd.min.js\",\r\n        \"@syncfusion/ej2-react-heatmap\": \"syncfusion:ej2-react-heatmap/dist/ej2-react-heatmap.umd.min.js\",\r\n        \"react-dom\":\"https://unpkg.com/react-dom@15.5.4/dist/react-dom.min.js\",\r\n        \"react\":\"https://unpkg.com/react@15.5.4/dist/react.min.js\",\r\n    },\r\n    packages: {\r\n        'app': { main: 'index', defaultExtension: 'tsx' },\r\n    }\r\n});\r\n\r\nSystem.import('app');","index.html":"<!DOCTYPE html>\r\n<html>\r\n<head>\r\n    <title>Listview · GroupTemplate · Essential JS 2 for React · Syncfusion</title>\r\n    <meta charset=\"utf-8\" />\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\" />\r\n    <meta http-equiv=\"x-ua-compatible\" content=\"ie=edge\">\r\n    <!-- {{:meta}} -->\r\n    <meta name=\"author\" content=\"Syncfusion\" />\r\n    <script type=\"text/javascript\">\r\n        var themeName = location.hash || 'material';\r\n        themeName = themeName.replace('#','');\r\n        window.ripple = (themeName === \"material\")\r\n        document.write('<link href=\"http://cdn.syncfusion.com/ej2/' + themeName + '.css\" rel=\"stylesheet\">');\r\n    </script>\r\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\" />\r\n    <script src=\"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js\"></script>\r\n    <script src=\"systemjs.config.js\"></script>\r\n    <link href=\"index.css\" rel=\"stylesheet\" />\r\n     <style>\r\n        #loader {\r\n            color: #008cff;\r\n            height: 40px;\r\n            left: 45%;\r\n            position: absolute;\r\n            top: 45%;\r\n            width: 30%;\r\n        }\r\n        body {\r\n            touch-action:none;\r\n        }\r\n        .body {\r\n            font-family: \"Roboto\", \"Segoe UI\", \"GeezaPro\", \"DejaVu Serif\", \"sans-serif\";\r\n        }\r\n\r\n        .e-view {\r\n            bottom: 0;\r\n            left: 0;\r\n            overflow: hidden;\r\n            position: absolute;\r\n            right: 0;\r\n            top: 0;\r\n        }\r\n\r\n        .sb-left {\r\n            float: left;\r\n        }\r\n\r\n        .sb-right {\r\n            float: right;\r\n        }\r\n\r\n        .sb-block {\r\n            display: block;\r\n        }\r\n\r\n        .sb-table {\r\n            display: table;\r\n        }\r\n\r\n        .sb-table-cell {\r\n            display: table-cell;\r\n            vertical-align: middle;\r\n        }\r\n\r\n        /*sample header*/\r\n\r\n\r\n        .sb-header {\r\n            height: 48px;\r\n            background: #FFFFFF;\r\n            box-shadow: 0 2px 4px 0 rgba(0,0,0,0.12);\r\n            z-index: 1001;\r\n            opacity: 100;\r\n        }\r\n\r\n\r\n        .sb-header-left, .sb-header-right {\r\n            height: 100%;\r\n        }\r\n\r\n        #sb-header-text {\r\n            padding-left: 22px;\r\n            opacity: 0.87;\r\n            font-family: Roboto;\r\n            font-weight: 500;\r\n            font-size: 15px;\r\n            color: #000000;\r\n            text-align: left;\r\n        }\r\n\r\n        .header-logo {\r\n            float: left;\r\n            padding-left: 8px;\r\n            padding-right: 22px;\r\n        }\r\n\r\n        .footer-logo {\r\n            background: url(https://ej2.syncfusion.com/home/images/footer-logo.svg) no-repeat right;\r\n            height: 40px;\r\n            width: 140px;\r\n        }\r\n\r\n        .sb-header-splitter {\r\n            float: left;\r\n            border-left: 1px solid rgb(196, 196, 196);\r\n            height: 32px;\r\n            margin-top: 8px;\r\n            padding-left: 22 px;\r\n        }\r\n\r\n        .sb-header-settings {\r\n            display: none;\r\n        }\r\n\r\n        .product-style a{\r\n        padding-right: 15px;\r\n        font-family:Roboto;\r\n        font-weight: 500;\r\n        font-size: 13px;\r\n        color: #363636;\r\n        text-align: center;\r\n        text-decoration: none;\r\n        }\r\n        .product-style a:hover {\r\n            color:#3C78EF;\r\n        }\r\n\r\n        .sb-download-btn a {\r\n            text-decoration: none;\r\n        }\r\n\r\n        .sb-download-text {\r\n            color: #FFFFFF;\r\n        }\r\n\r\n        .sb-download-wrapper {\r\n            padding-right: 27px;\r\n        }\r\n\r\n        .sb-download-btn:hover .sb-download-btn:focus .sb-download-btn.active {\r\n            border-radius: 2px;\r\n            font-family: \"Roboto\";\r\n            font-weight: bold;\r\n            color: #FFFFFF;\r\n        }\r\n\r\n        .sb-download-btn:hover {\r\n            background: #006CE6;\r\n        }\r\n\r\n        .sb-download-btn:focus {\r\n            background: #0051CB;\r\n        }\r\n\r\n        .sb-download-btn.active {\r\n            background: #0036B1;\r\n        }\r\n\r\n        .sb-download-btn {\r\n            background-color: #3C78EF;\r\n            opacity: 100;\r\n            border-radius: 2px;\r\n            font-family: \"Roboto\", \"Segoe UI\", \"GeezaPro\", \"DejaVu Serif\", \"sans-serif\";\r\n            font-weight: 500;\r\n            line-height: 18px;\r\n            height: 32px;\r\n            border-color: transparent;\r\n        }\r\n\r\n        .sb-bread-crumb {\r\n            padding-left: 20px;\r\n            padding-top: 24px;\r\n            padding-bottom: 10px;\r\n        }\r\n\r\n        .category-allcontrols a, .category-text a, .crumb-sample {\r\n            display: table;\r\n            opacity: 0.87;\r\n            font-family: Roboto;\r\n            font-weight: 500;\r\n            font-size: 15px;\r\n            color: #3C78EF;\r\n            text-align: left;\r\n            text-decoration: none;\r\n        }\r\n\r\n        .sb-bread-crumb .sb-bread-crumb-text>div {\r\n            font-size: 15px;\r\n            font-weight: 500;\r\n            padding-right: 8px;\r\n            cursor: default;\r\n            display: table-cell;\r\n        }\r\n\r\n        .sb-bread-crumb-text>div.seperator {\r\n            font-weight: 700;\r\n            font-size: 15px;\r\n            vertical-align: bottom;\r\n        } \r\n\r\n        .content {\r\n        overflow: auto;\r\n        height: calc(100% - 50px);\r\n        top: 50px;\r\n        }\r\n\r\n\r\n        .sample-content {\r\n            top: 48px;\r\n            background: #FFFFFF;\r\n        }\r\n\r\n        .div {\r\n        display: block;\r\n        }\r\n\r\n        .control-section {\r\n            padding-left: 4px;\r\n        }\r\n\r\n        .crumb-sample {\r\n            color: #000000;\r\n            line-height: 18px;\r\n        }\r\n\r\n        #description {\r\n            padding-bottom: 16px;\r\n            padding-left: 20px;\r\n            opacity: 0.75;\r\n            font-family: Roboto;\r\n            font-size: 13px;\r\n            color: #000000;\r\n            text-align: left;\r\n            padding-top: 14px;\r\n        }\r\n\r\n        #action-description {\r\n            padding-left: 20px;\r\n            padding-bottom: 15px;\r\n            opacity: 0.75;\r\n            font-family: Roboto;\r\n            font-size: 13px;\r\n            color: #000000;\r\n            text-align: left;\r\n        }\r\n\r\n        #description-section {\r\n            padding-left: 20px;\r\n            padding-top: 30px;\r\n            opacity: 0.87;\r\n            font-family:Roboto;\r\n            font-weight: 700;\r\n            font-size: 15px;\r\n            color: #000000;\r\n            text-align: left;\r\n        }\r\n\r\n\r\n\r\n    </style>\r\n</head>\r\n\r\n<body class='e-view ej2-new' aria-busy=\"true\">\r\n        <div class=\"sample-browser\">\r\n            <div id='sample-header' class=\"sb-header\" role=\"banner\">\r\n                <div class='sb-header-left sb-left sb-table'>\r\n                    <div class='sb-header-item sb-table-cell'>\r\n                        <div class=\"header-logo\">\r\n                            <a href=\"https://ej2.syncfusion.com/home/react.html\" target=\"\" rel=\"noopener noreferrer\">\r\n                                <div class=\"footer-logo\"> </div>\r\n                            </a>\r\n                        </div>\r\n    \r\n                    </div>\r\n                    <div class=\"sb-header-splitter sb-download-splitter\"></div>\r\n                    <div class='sb-header-item sb-table-cell'>\r\n                        <div id='sb-header-text' class='e-sb-header-text'>\r\n    \r\n                            <span class='sb-header-text-left'>Essential JS 2 for React</span>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class='sb-header-right sb-right sb-table'>\r\n                    <div class='sb-header-item sb-table-cell'>\r\n                        <div class='product-style'>\r\n                            <div><a href=\"https://www.syncfusion.com/products/react/listview\">PRODUCT DETAILS</a></div>\r\n                        </div>\r\n                    </div>\r\n                    <div class='sb-header-item sb-table-cell'>\r\n                        <div class=\"sb-header-item sb-table-cell sb-download-wrapper\">\r\n                            <a href=\"https://www.syncfusion.com/downloads/essential-js2\" target=\"_blank\">\r\n                                <button id=\"download-now\" class=\"sb-download-btn\">\r\n                                    <span class=\"sb-download-text\">DOWNLOAD</span>\r\n                                </button>\r\n                            </a>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n    \r\n            </div>\r\n            <div class ='content e-view'>\r\n            <div class='sample-content'>\r\n                <div id=\"sample-bread-crumb\" class=\"sb-bread-crumb\">\r\n                    <div class=\"sb-bread-crumb-text\">\r\n                        <div class=\"category-allcontrols\"><a href=\"https://ej2.syncfusion.com/react/demos\"><span>All Controls</span></a></div>\r\n                        <div class=\"category-seperator sb-icons\"> / </div>\r\n                        <div class=\"category-text bread-ctext\"><a href=\"https://ej2.syncfusion.com/react/demos/#/material/listview/default.html\"><span>Listview</span></a></div>\r\n                        <div class=\"category-seperator sb-icons\"> / </div>\r\n                        <div class=\"crumb-sample\">GroupTemplate</div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"control-content\">\r\n                <div id=\"action-description\">\r\n                        <p>\r\n                            \n                    <p>This sample demonstrates the Group Templates functionalities of ListView. Click any list item from the settings option to select and highlight an option.\n                    </p>\n                \r\n                        </p>\r\n                    </div>\r\n                    <div class=\"container-fluid\">\r\n                        <div class=\"control-section\">\r\n                            <div id='sample'>\r\n                                <div id='loader'>Loading....</div>\r\n                            </div>\r\n                    \r\n                        </div>\r\n                    </div>\r\n                    <div id=\"description-section\">Description</div>    \r\n                    <div id=\"description\">\r\n                        <p>\r\n                           \n                    <p>ListView component has an option to custom design the group header title with the help of <code>groupTemplate</code> property.</p>\n                    <p>In this example, both the group header and list item is customized using the\n                    <code>groupTemplate</code> and <code>template</code> property.</p>\n                \r\n                         </p>     \r\n                    </div>    \r\n                </div>             \r\n            </div>\r\n                \r\n            </div>\r\n        </div>\r\n          \r\n</body>\r\n</html>\r\n","app/index.tsx":"/**\r\n * ListView GroupTemplate Sample\r\n */\r\n\r\nimport * as ReactDOM from 'react-dom';\r\nimport * as React from 'react';\r\nimport { ListViewComponent } from '@syncfusion/ej2-react-lists';\r\nimport { SampleBase } from './sample-base';\r\n\r\nimport { groupDataSource } from '../newsData';\r\n\r\nexport class GroupTemplate extends SampleBase<{}, {}> {\r\n\r\n    private listviewInstance: ListViewComponent;\r\n\r\n    //Map the appropriate columns to fields property\r\n    public fields: Object = { text: 'Name', groupBy: 'order' };\r\n\r\n    //Set customized list template\r\n    listTemplate(data: any): JSX.Element {\r\n        return(\r\n            <div className=\"settings e-list-wrapper e-list-multi-line e-list-avatar\">\r\n            <span className={`icon ${data.class} e-avatar`}></span>\r\n            <span className=\"e-list-item-header\">{data.Name}</span>\r\n            <span className=\"e-list-content\">{data.content}</span>\r\n        </div>\r\n        );\r\n    }\r\n\r\n    //Set customized group-header template\r\n    groupTemplate(data: any): JSX.Element {\r\n        return(\r\n            <div className=\"e-list-wrapper\"><span className=\"e-list-item-content\">{data.items[0].category}</span></div>\r\n        );\r\n    }\r\n    render() {\r\n        return (\r\n            <div className='control-pane'>\r\n                <div className='control-section'>\r\n                    {/* ListView element */}\r\n                    <ListViewComponent id='groupedList' dataSource={groupDataSource} headerTitle='Settings' showHeader={true} fields={this.fields}\r\n                        cssClass=\"e-list-template\" template={this.listTemplate as any} groupTemplate={this.groupTemplate as any}\r\n                        ref={(listview) => { this.listviewInstance = listview }}></ListViewComponent>\r\n                </div>\r\n\r\n\r\n            </div>\r\n        )\r\n    }\r\n}\nReactDOM.render(<GroupTemplate />, document.getElementById('sample'));","app/sample-base.tsx":"import * as ReactDOM from 'react-dom';\r\nimport * as React from 'react';\r\nimport { RouteComponentProps } from 'react-router-dom';\r\nimport { enableRipple } from '@syncfusion/ej2-base';\r\n\r\nenableRipple((window as any).ripple);\r\nexport class SampleBase<P, S> extends React.PureComponent<RouteComponentProps<any> & P, S>{\r\n    public rendereComplete(): void {\r\n        /**custom render complete function */\r\n    }\r\n    componentDidMount(): void {\r\n        setTimeout(() => {\r\n            this.rendereComplete();\r\n        }\r\n        );\r\n    }\r\n}"}