orientation-plnkr.json

{"index.html":"<!DOCTYPE html><html><head>\n<meta charset=\"UTF-8\">\n<link href=\"http://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n<link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n<script type=\"text/javascript\">\n   if (/MSIE d|Trident.*rv:/.test(navigator.userAgent)) {\n       document.write(\"<script src='https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.3.5/bluebird.min.js'><\\/script>\");\n   }\n</script>\n<script src=\"http://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n</head>\n<body>\n<div class=\"e-tab-section\">\n<div class=\"col-lg-8 content-wrapper control-section\">\n    <div class=\"e-sample-resize-container\">\n        <div id=\"tab_orientation\">\n            <div class=\"e-tab-header\">\n                <div>Rome</div>\n                <div>Paris</div>\n                <div>London</div>\n            </div>\n            <div class=\"e-content\">\n                <div>\n                    <div class=\"content-title\">\n                        <div class=\"cnt-text\">Employee Info</div>\n                    </div>\n                    <div id=\"rome\"></div>\n                </div>\n                <div>\n                    <div class=\"content-title\">\n                        <div class=\"cnt-text\">Employee Info</div>\n                    </div>\n                    <div id=\"paris\"></div>\n                </div>\n                <div>\n                    <div class=\"content-title\">\n                        <div class=\"cnt-text\">Employee Info</div>\n                    </div>\n                    <div id=\"london\"></div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n<div class=\"col-lg-4 property-section\">\n    <table id=\"property\" title=\"Properties\">\n        <tbody><tr>\n            <td style=\"width: 50%;\">\n                <div>Header Placement</div>\n            </td>\n            <td style=\"width: 50%;\">\n                <div>\n                    <select id=\"orientation\" class=\"form-control\">\n                        <option value=\"Top\">Top</option>\n                        <option value=\"Bottom\">Bottom</option>\n                        <option value=\"Left\">Left</option>\n                        <option value=\"Right\">Right</option>\n                    </select>\n                </div>\n            </td>\n        </tr>\n        <tr>\n            <td style=\"width: 50%;\">\n                <div>Header Styles</div>\n            </td>\n            <td style=\"width: 50%;\">\n                <div>\n                    <select id=\"headerStyles\" class=\"form-control\">\n                        <option value=\"default\">Default</option>\n                        <option value=\"fill\">Fill</option>\n                        <option value=\"accent\">Accent</option>\n                    </select>\n                </div>\n            </td>\n        </tr>\n    </tbody></table>\n</div>\n</div>\n\n\n<style>\n    .e-content .e-item {\n        font-size: 12px;\n        padding: 10px;\n        text-align: justify;\n    }\n    .e-bigger .e-tab .e-list-item {\n        border-bottom: 1px solid gainsboro;\n    }\n    .e-tab .e-list-item {\n        height: 63px;\n        border-bottom: 1px solid gainsboro;\n    }\n    .e-bigger .e-tab .e-list-item {\n        height: 63px;\n    }\n    .e-tab .e-list-item:last-child {\n        border-bottom: 1px solid gainsboro;\n    }\n    .template-container {\n        height: 100%;\n        padding-top: 7px;\n    }\n    .left {\n        display: inline-block;\n        vertical-align: top;\n    }\n    .empImg {\n        height: 48px;\n        width: 48px;\n    }\n    .name, .role {\n        line-height: normal;\n    }\n    .name {\n        font-weight: 500;\n    }\n    .role {\n        color: grey;\n        font-weight: 100;\n    }\n    .info {\n        padding: 7px 0 0 15px;\n    }\n    .content-title {\n        height: 50px;\n        display: table;\n        margin: 0 auto;\n    }\n    .cnt-text {\n        vertical-align: middle;\n        display: table-cell;\n        font-size: 18px;\n        font-weight: 600;\n    }\n    .e-tab .e-listview .e-header {\n        height: 50px;\n    }\n    .e-tab .e-listview .e-text {\n        display: block;\n        text-align: center;\n    }\n    .property-panel-content {\n        padding: 10px;\n    }\n    #tab_orientation .e-listview:not(.e-list-template) .e-list-item {\n        height: 63px;\n    }\n\n    #tab_orientation .e-tab-text {\n        display: inherit;\n    }\n\n    .e-vertical-tab .e-content .e-item.e-active,\n    .e-vertical-tab .e-content .e-item.e-active ul.e-list-parent {\n        width: 100%;\n    }\n\n\n    @media screen and (min-width: 768px) {\n        .e-sample-resize-container {\n            width: 75%;\n            margin: 0 auto;\n        }\n    }\n\n    @media screen and (max-width: 481px) {\n        .control-section.e-tab-section,\n        .container-fluid,\n        .e-tab-section .content-wrapper,\n        .sb-sample-content-area .e-active {\n            padding-left: 0;\n            padding-right: 0;\n        }\n    }\n    @media screen and (max-width: 376px) {\n        #tab_orientation .e-listview:not(.e-list-template) .e-list-item {\n            padding: 0;\n        }\n        .e-tab-section {\n            padding: 0 5px;\n        }\n        .e-tab .e-content.sb-sample-content-area .e-item.e-active {\n            padding-left: 0;\n            padding-right: 0;\n        }\n        .template-container {\n            padding: 7px 5px 0;\n        }\n        #tab_orientation .e-content .e-item.e-active {\n            padding: 10px 0;\n        }\n        .info {\n            padding: 7px 0 0 8px;\n        }\n    }\n</style>\n\n<script src=\"index.js\" type=\"text/javascript\"></script>\n\n</body></html>","index.js":"ej.base.enableRipple(true)\n/**\r\n *  Tab orientation sample\r\n */\r\nvar romeEmployees = [\r\n    { id: '1', name: 'Anne Dodsworth', role: 'Product Manager' },\r\n    { id: '2', name: 'Laura Callahan', role: 'Team Lead' },\r\n    { id: '3', name: 'Andrew Fuller', role: 'Developer' }\r\n];\r\nvar parisEmployees = [\r\n    { id: '4', name: 'Robert King', role: 'Team Lead' },\r\n    { id: '5', name: 'Michael Suyama', role: 'Developer' },\r\n    { id: '6', name: 'Margaret Peacock', role: 'Developer' }\r\n];\r\nvar londonEmployees = [\r\n    { id: '7', name: 'Janet Leverling', role: 'CEO' },\r\n    { id: '8', name: 'Steven Buchanan', role: 'HR' },\r\n    { id: '9', name: 'Nancy Davolio', role: 'Product Manager' }\r\n];\r\n\r\n//Initialize ListView component\r\n var listObj1 = new ej.lists.ListView({\r\n      dataSource: romeEmployees,\r\n      template: '<div class=\"template-container\"><div class=\"left\"><img class=\"empImg\" src=\"http://ej2.syncfusion.com/javascript/demos/src/tab/images/${id}.png\" ' +\r\n        'alt=\"${id}\" /></div><div class=\"left info\"><div class=\"name\">${name}</div> <div class=\"role\">${role}</div></div></div>'\r\n });\r\n\r\n //Initialize ListView component\r\n var listObj2 = new ej.lists.ListView({\r\n      dataSource: parisEmployees,\r\n      template: '<div class=\"template-container\"><div class=\"left\"><img class=\"empImg\" src=\"http://ej2.syncfusion.com/javascript/demos/src/tab/images/${id}.png\" ' +\r\n        'alt=\"${id}\" /></div><div class=\"left info\"><div class=\"name\">${name}</div> <div class=\"role\">${role}</div></div></div>'\r\n });\r\n\r\n //Initialize ListView component\r\n var listObj3 = new ej.lists.ListView({\r\n      dataSource: londonEmployees,\r\n      template: '<div class=\"template-container\"><div class=\"left\"><img class=\"empImg\" src=\"http://ej2.syncfusion.com/javascript/demos/src/tab/images/${id}.png\" ' +\r\n        'alt=\"${id}\" /></div><div class=\"left info\"><div class=\"name\">${name}</div> <div class=\"role\">${role}</div></div></div>'\r\n });\r\n\r\n\r\n    //Initialize Tab component\r\n    var tabObj = new ej.navigations.Tab({\r\n        heightAdjustMode: 'None',\r\n        height: 320,\r\n        showCloseButton: true\r\n    });\r\n    //Render initialized Tab component\r\n    tabObj.appendTo('#tab_orientation');\r\n\r\n    //Render initialized ListView component\r\n    listObj1.appendTo('#rome');\r\n\r\n    //Render initialized ListView component\r\n    listObj2.appendTo('#paris');\r\n\r\n    //Render initialized ListView component\r\n    listObj3.appendTo('#london');\r\n\r\n    //Initialize DropDownList component\r\n    var headerPositions = new ej.dropdowns.DropDownList({\r\n        width: '90%',\r\n        change: changeHeaderPosition\r\n    });\r\n    //Render initialized DropDownList component\r\n    headerPositions.appendTo('#orientation');\r\n\r\n    //Initialize DropDownList component\r\n    var headerStyles = new ej.dropdowns.DropDownList({\r\n        width: '90%',\r\n        change: changeHeaderStyle\r\n    });\r\n    //Render initialized DropDownList component\r\n    headerStyles.appendTo('#headerStyles');\r\n\r\n    // Change event function for DropDownList component\r\n    function changeHeaderPosition(args) {\r\n        tabObj.headerPlacement = args.itemData.value;\r\n        tabObj.dataBind();\r\n    }\r\n\r\n    // Change event function for DropDownList component\r\n    function changeHeaderStyle(args){\r\n        removeStyleClass();\r\n        var name = args.itemData.value;\r\n        if (name === 'fill') {\r\n            tabObj.element.classList.add('e-fill');\r\n        } else if (name === 'accent') {\r\n            tabObj.element.classList.add('e-background');\r\n            tabObj.element.classList.add('e-accent');\r\n        }\r\n    }\r\n    function removeStyleClass() {\r\n        tabObj.element.classList.remove('e-fill');\r\n        tabObj.element.classList.remove('e-background');\r\n        tabObj.element.classList.remove('e-accent');\r\n    }\r\n"}