Focus

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:250px;" id="grid-parent">
    <div data-ax5grid="first-grid" data-ax5grid-config="{}" style="height: 100%;"></div>
</div>
<div style="padding: 5px;">
    <button type="button" class="btn btn-default" data-grid-control="focus-up">focus-up</button>
    <button type="button" class="btn btn-default" data-grid-control="focus-down">focus-down</button>
    <button type="button" class="btn btn-default" data-grid-control="focus-home">focus-home</button>
    <button type="button" class="btn btn-default" data-grid-control="focus-end">focus-end</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"]'),
            showLineNumber: true,
            showRowSelector: false,
            header: {align: 'center'},
            columns: [
                {key: "id", label: "ID", width: 80, align: "center"},
                {key: "name", label: "Name", align: "left", width: 200},
                {key: "isChecked", label: "Checkbox", width: 50, sortable: false, align: "center", editor: {
                    type: "checkbox", config: {height: 17, trueValue: "Y", falseValue: "N"}
                }},
                {key: "saleType", label: "saleType", align: "center"},
                {key: "saleDt", label: "saleDt", align: "center"},
                {key: "customer", label: "Customer", align: "center"}
            ],
            body: {
                columnHeight: 26
            }
        });

        var sampleData = [
            {id: 0, name: "Thomas Jang", price: 1000, amount: null, saleDt: "2016-08-29", customer: "장기영", saleType: "A", isChecked: "Y"},
            {id: "2", name: "Seowoo", price: 1100, amount: 11, saleDt: "2016-08-28", customer: "장서우", saleType: "B", isChecked: "N"},
            {id: "3", name: "Mondo", price: 1200, amount: 10, saleDt: "2016-08-27", customer: "이영희", saleType: "A", isChecked: "N"},
            {id: "4", name: "Brant", price: 1300, amount: 8, saleDt: "2016-08-25", customer: "황인서", saleType: "C", isChecked: "Y"},
            {id: "5", name: "Tiffany", price: 1500, amount: 2, saleDt: "2016-08-26", customer: "이서연", saleType: "A", isChecked: "N"},
            {id: "6", name: "Edward", price: 1400, amount: 5, saleDt: "2016-08-29", customer: "황세진", saleType: "D", isChecked: "Y"},
            {id: "7", name: "Bill", price: 1400, amount: 5, saleDt: "2016-08-29", customer: "이하종", saleType: "B", isChecked: "N"},
            {id: "8", name: "Aeei", price: 1400, amount: 5, saleDt: "2016-08-29", customer: "김혜미", saleType: "C", isChecked: "Y"},
            {id: 9, name: "Thomas Jang", price: 1000, amount: null, saleDt: "2016-08-29", customer: "장기영", saleType: "A", isChecked: "Y"},
            {id: "10", name: "Seowoo", price: 1100, amount: 11, saleDt: "2016-08-28", customer: "장서우", saleType: "B", isChecked: "N"},
            {id: "11", name: "Mondo", price: 1200, amount: 10, saleDt: "2016-08-27", customer: "이영희", saleType: "A", isChecked: "N"},
            {id: "12", name: "Brant", price: 1300, amount: 8, saleDt: "2016-08-25", customer: "황인서", saleType: "C", isChecked: "Y"},
            {id: 13, name: "Tiffany", price: 1500, amount: 2, saleDt: "2016-08-26", customer: "이서연", saleType: "A", isChecked: "N"},
            {id: 14, name: "Edward", price: 1400, amount: 5, saleDt: "2016-08-29", customer: "황세진", saleType: "D", isChecked: "Y"},
            {id: 15, name: "Bill", price: 1400, amount: 5, saleDt: "2016-08-29", customer: "이하종", saleType: "B", isChecked: "N"},
            {id: 16, name: "Aeei", price: 1400, amount: 5, saleDt: "2016-08-29", customer: "김혜미", saleType: "C", isChecked: "Y"}
        ];
        firstGrid.setData(sampleData);

        $('[data-grid-control]').on("click", function (e) {
            switch (this.getAttribute("data-grid-control")) {
                case "focus-up":
                    firstGrid.focus("UP");
                    break;
                case "focus-down":
                    firstGrid.focus("DOWN");
                    break;
                case "focus-home":
                    firstGrid.focus("HOME");
                    break;
                case "focus-end":
                    firstGrid.focus("END");
                    break;
            }
        });
    });
</script>