igGrid two one for filter other for data

by georgianastasov

HTML

<script src="https://igniteui.com/js/modernizr.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
<script src="https://igniteui.com/data-files/adventureworks.min.js"></script>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>

<!-- Grid for Filters -->
<div class="grid-container">
    <div id="grdFilter"></div>
</div>

<!-- Grid for Data -->
<div class="grid-container">
    <div id="grdData"></div>
</div>

CSS

.grid-container {
            margin-bottom: 20px;
}

JavaScript

$(function () {
            var data = [
            { "Column1": "Data 1", "Column2": "Data 2", "Column3": "Data 3", "Column4": "Data 4", "Column5": "Data 5", "Column6": "Data 6", "Column7": "Data 7", "Column8": "Data 8", "Column9": "Data 9", "Column10": "Data 10" },
            { "Column1": "Data 11", "Column2": "Data 12", "Column3": "Data 13", "Column4": "Data 14", "Column5": "Data 15", "Column6": "Data 16", "Column7": "Data 17", "Column8": "Data 18", "Column9": "Data 19", "Column10": "Data 20" },
            { "Column1": "Data 21", "Column2": "Data 22", "Column3": "Data 23", "Column4": "Data 24", "Column5": "Data 25", "Column6": "Data 26", "Column7": "Data 27", "Column8": "Data 28", "Column9": "Data 29", "Column10": "Data 30" },
            { "Column1": "Data 31", "Column2": "Data 32", "Column3": "Data 33", "Column4": "Data 34", "Column5": "Data 35", "Column6": "Data 36", "Column7": "Data 37", "Column8": "Data 38", "Column9": "Data 39", "Column10": "Data 40" },
        ];

        // Initialize the filters grid
        $("#grdFilter").igGrid({
            columns: [
                { headerText: "Column 1", key: "Column1", width: "150px" },
                { headerText: "Column 2", key: "Column2", width: "150px" },
                { headerText: "Column 3", key: "Column3", width: "150px" },
                { headerText: "Column 4", key: "Column4", width: "150px" },
                { headerText: "Column 5", key: "Column5", width: "150px" },
                { headerText: "Column 6", key: "Column6", width: "150px" },
                { headerText: "Column 7", key: "Column7", width: "150px" },
                { headerText: "Column 8", key: "Column8", width: "150px" },
                { headerText: "Column 9", key: "Column9", width: "150px" },
                { headerText: "Column 10", key: "Column10", width: "150px" }
            ],
            autofitLastColumn: false,
            features: [
                {
                    name: 'Filtering',
               ...