Grid Height

Paste the following code into the head section of your site’s HTML.

<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/ax5ui/ax5ui-grid/master/dist/ax5grid.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/ax5ui/ax5core/master/dist/ax5core.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/ax5ui/ax5ui-grid/master/dist/ax5grid.min.js"></script>

<div style="position: relative;height:400px;" id="grid-parent">
    <div data-ax5grid="first-grid" data-ax5grid-config="{
                    showLineNumber: true,
                    showRowSelector: true,
                    header: {align:"center"}
                    }" style="height: 100%;"></div>
</div>

<div style="padding: 10px;">
    <button class="btn btn-default" data-set-height="300">setHeight(300px)</button>
    <button class="btn btn-default" data-set-height="400">setHeight(400px)</button>
    <button class="btn btn-default" data-set-height="800">setHeight(800px)</button>
    <button class="btn btn-default" data-set-height="100%">setHeight(100%)</button>
</div>

<script type="text/javascript">
    $(document.body).ready(function () {
        var API_SERVER = "http://api-demo.ax5.io";
        var firstGrid = new ax5.ui.grid({
            target: $('[data-ax5grid="first-grid"]'),
            columns: [
                {key: "a", label: "field A", width: 80},
                {key: "b", label: "field B", width: 80},
                {key: "d", label: "field D"},
                {key: "c", label: "field C", width: 100},
                {key: "g", label: "field G", width: 100},
                {key: "h", label: "field H"}
            ]
        });
        firstGrid.setData(gridList);

        // 그리드 데이터 가져오기
        /*
        $.ajax({
            method: "GET",
            url: API_SERVER + "/api/v1/ax5grid",
            success: function (res) {
                firstGrid.setData(res);
            }
        });
        */
        $('[data-set-height]').click(function () {
            var height = this.getAttribute("data-set-height");
            if (height == "100%") {
                $("#grid-parent").css({height: 500});
            } else {
                $("#grid-parent").css({height: "auto"});
            }
            firstGrid.setHeight(height);
        });
    });
</script>