MM Landing Pg

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.dataviz.default.min.css">
<script src="http://cdn.kendostatic.com/2014.1.528/js/kendo.all.min.js"></script>
<script src="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600"></script>
<div class="pgheader">Logo Area</div>
<div class="subheader">Sub Heading Area
    <div class="btn-group">
        <button type="button" class="btn dropdown-toggle bg-trans" data-toggle="dropdown" style="border: 0px;"><i class="fa fa-chevron-circle-down fa-lg"></i>

        </button>
        <ul class="dropdown-menu sub-menu" role="menu">
            <li><a href="#">MM Sub-menu item 1</a>
            </li>
            <li><a href="#">MM Sub-menu item 2</a>
            </li>
            <li class="divider"></li>
            <li><a href="#">MM Sub-menu item 3</a>
            </li>
            <li><a href="#">MM Sub-menu item 4</a>
            </li>
            <li><a href="#">MM Sub-menu item 5</a>
            </li>
            <li class="divider"></li>
            <li><a href="#">MM Sub-menu item 6</a>
            </li>
            <li><a href="#">MM Sub-menu item 7</a>
            </li>
        </ul>
    </div>
</div>
<div id="menu"></div>
<div id="folders">folders</div>
<div id="categories">
    <div CLASS="panel_title"><a href="#"><small>Close</small> <i class="fa fa-times-circle"></i></a>

    </div>
    <div class="folder-data k-header">
        <div id="treeview"></div>
    </div>
</div>
<div class="col-lg-11...

CSS

body {
    font-family:'Open Sans', sans-serif;
    font-weight: 400;
}
* {
    -webkit-border-radius: 0px !important;
    -moz-border-radius: 0px !important;
    border-radius: 0px !important;
}
.pgheader {
    height: 50px;
    background-color: #000000;
    color: #fff;
    line-height: 50px;
    padding-left: 10px;
    font-size: 18pt;
    font-weight: 300;
}
.subheader {
    height: 35px;
    background-color: #0A427E;
    color: #fff;
    line-height: 35px;
    padding-left: 10px;
    font-size: 11pt;
}
#menu {
    float: left;
    padding: 10px;
    width: 30px;
    background: #000000;
    margin: 0px 0px 0px 0px;
    position:relative;
}
#folders {
    float: left;
    padding: 10px;
    width: 110px;
    background: #D4D4D4;
    text-align: center;
    color: #000;
    margin: 35px 0px 0px -35px;
    position:relative;
    transform:rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(-90deg);
    -sand-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    text-transform:uppercase;
}
.folder-data {
    display: inline-block;
    vertical-align: top;
    min-width: 290px;
    min-height: 210px;
    max-width: 290px;
    max-height: 210px;
    text-align: left;
    margin: 0px;
    overflow: auto;
    background: #E7E7E7;
}
.folder-display {
    color : #428BCA;
}
.filters {
    width: 600px;
    text-align: right;
    padding-top: 5px;
    font-size: 8pt;
}
#categories {
    display: none;
    background: #E7E7E7;
    width: 300px;
    margin-left: 30px;
    float: left;
    position:absolute;
    padding: 5px;
    z-index: 1;
}
ul.dropdown-menu-form {
    padding: 5px 10px 0px 10px;
    max-height: 300px;
    overflow-y: none;
}
.panel_title {
    text-align:right;
}
.contentarea-left {
    margin: 20px 0px 0px 80px;
    float: left;
    position:fixed;
}
.spacing {
    margin-top:15px;
}
.spacingright {
    padding-right: 5px;
}
.btn-grey {
    background: #E6E6E6;
    border: solid 1px #BDBDBD;
}
.btn-grey:hover {
  ...

JavaScript

var duration = 'slow';

$('#folders').click(function () {
    $('#folders').hide(duration, function () {
        $('#categories').show('slide', {
            direction: 'left'
        }, duration);
    });
});

$('.panel_title').click(function () {
    $('#categories').hide('slide', {
        direction: 'left'
    }, duration, function () {
        $('#folders').show(duration);
    });
});

var i = 0;
$('#btn-filter').click(function () {
    $('#filters').append('filter ' + i + ' <i class="fa fa-times-circle"></i>&nbsp;&nbsp;');
    i++;
    if (i == 11) {
        alert('max filter reacherd');
        $('#btn-filter').prop("disabled", true);
    }
});

$("#hidecol").click(function () {
    $("#coldata :checked").each(function () {
        //alert($(this).val()); //this.id
        $("#grid").data("kendoGrid").hideColumn(parseInt($(this).val()));
    })
});

$("#showcol").click(function () {
    $("#coldata :checked").each(function () {
        //alert($(this).val()); //this.id
        $("#grid").data("kendoGrid").showColumn(parseInt($(this).val()));
    })
});


$('.dropdown-menu').on('click', function (e) {
    if ($(this).hasClass('dropdown-menu-form')) {
        e.stopPropagation();
    }
});

$("#btn-excel").click(function () {
    alert('Export to excel function goes here.');
});

$("#btn-pdf").click(function () {
    alert('Export to pdf function goes here.');
});

$(document).ready(function () {
    $('#menu').height($(document).height() - 105);
    var grid = $("#grid").kendoGrid({
        dataSource: {
            type: "odata",
            transport: {
                read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
            },
            pageSize: 20
        },

        height: $(document).height() - 200,
        dataBound: onDataBound,
        groupable: true,
        sortable: true,
        pageable: {
            refresh: true,
            pageSizes: true,
            buttonCount: 3
        },
        columns: [{
        ...