jeudi 27 décembre 2018

Ag-grid - Data does not load in laravel view

I am using Laravel Framework 5.7.19 and the latest version of ag-grid.

I am loading the needed libraries from the example in my app.blade.php:

<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="">

    <title></title>

    <!-- Scripts -->
    <script src="" defer></script>

    <!-- Fonts -->
    <link rel="dns-prefetch" href="//fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet" type="text/css">

    <!-- Styles -->
    <link href="" rel="stylesheet">

    <!-- ag-grid -->
    <script src="https://unpkg.com/ag-grid-enterprise/dist/ag-grid-enterprise.min.noStyle.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/ag-grid-community/dist/styles/ag-grid.css">
    <link rel="stylesheet" href="https://unpkg.com/ag-grid-community/dist/styles/ag-theme-balham.css">

</head>
<body>
<div id="app">
    @include('layouts.nav.mainNav')

    <main class="py-4">
        @yield('content')
    </main>
</div>
</body>
</html>

My grid.blade.php looks like the following:

@extends('layouts.app')

@section('content')
    <div class="container">
        <div class="row justify-content-center">
            <div class="">

                <h1>Hello from ag-grid!</h1>
                <button onclick="getSelectedRows()">Get Selected Rows</button>
                <div id="myGrid" style="height: 600px;width:500px;" class="ag-theme-balham"></div>

                <script type="text/javascript" charset="utf-8">
                    // specify the columns
                    var columnDefs = [
                        {headerName: "Make", field: "make", rowGroupIndex: 0 },
                        {headerName: "Price", field: "price"}
                    ];

                    var autoGroupColumnDef = {
                        headerName: "Model",
                        field: "model",
                        cellRenderer:'agGroupCellRenderer',
                        cellRendererParams: {
                            checkbox: true
                        }
                    }

                    // let the grid know which columns and what data to use
                    var gridOptions = {
                        columnDefs: columnDefs,
                        enableSorting: true,
                        enableFilter: true,
                        autoGroupColumnDef: autoGroupColumnDef,
                        groupSelectsChildren: true,
                        rowSelection: 'multiple'
                    };

                    // lookup the container we want the Grid to use
                    var eGridDiv = document.querySelector('#myGrid');

                    // create the grid passing in the div to use together with the columns & data we want to use
                    new agGrid.Grid(eGridDiv, gridOptions);

                    fetch('https://api.myjson.com/bins/ly7d1').then(function(response) {
                        return response.json();
                    }).then(function(data) {
                        gridOptions.api.setRowData(data);
                    })

                    function getSelectedRows() {
                        const selectedNodes = gridOptions.api.getSelectedNodes()
                        const selectedData = selectedNodes.map( function(node) { return node.data })
                        const selectedDataStringPresentation = selectedData.map( function(node) { return node.make + ' ' + node.model }).join(', ')
                        alert('Selected nodes: ' + selectedDataStringPresentation);
                    }
                </script>

            </div>
        </div>
    </div>
@endsection

It is basically the simple example from the Ag-grid JS example.

enter image description here

The data does not load within the example. Any suggestions what I am doing wrong?

I appreciate your replies!



via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire