Rapport-Laravel/resources/views/contact/aggrid.blade.php

@extends('layouts.vertical', ["page_title"=> "Datatables"])

@section('css')
<!-- third party css -->
<link href="{{asset('assets/libs/datatables/datatables.min.css')}}" rel="stylesheet" type="text/css" />
<link href="{{asset('assets/libs/bootstrap-datepicker/bootstrap-datepicker.min.css')}}" rel="stylesheet" type="text/css" />
<link href="https://cdn.jsdelivr.net/npm/ag-grid-community/styles/ag-grid.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.jsdelivr.net/npm/ag-grid-community/styles/ag-theme-alpine.css" rel="stylesheet" type="text/css" />
<!-- third party css end -->
@endsection

@section('content')
<!-- Start Content-->
<div class="container-fluid">

    <!-- start page title -->
    <div class="row">
        <div class="col-md-6 p-2">
            <h4 class="page-title">{{$title}} Management</h4>
        </div>
        <div class="col-md-6 p-2">
            @if(isset($buttons))
                @foreach($buttons as $button)
                    <a href="{{$button['link']}}" class="btn btn-{{$button['title']=='Add New'?'success':'dark'}} waves-effect waves-light float-end me-2" id="btn-{{strtolower(str_replace(' ', '-', $button['title']))}}">{{$button['title']}}</a>
                @endforeach
            @endif
        </div>
    </div>
    <!-- end page title -->
@if(session()->has('message'))
    <div class="alert alert-success">
        {{ session()->get('message') }}
    </div>
@endif
@if(session()->has('error'))
    <div class="alert alert-danger">
        {{ session()->get('error') }}
    </div>
@endif
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <div id="myGrid" class="ag-theme-alpine"></div>
                </div> <!-- end card body-->
            </div> <!-- end card -->
        </div><!-- end col-->
    </div>
    <!-- end row-->
</div> <!-- container -->
<style>
    .ag-theme-alpine {
        height:calc(100vh - 200px)
    }
</style>
@endsection

@section('script')
<!-- third party js -->
<script src="https://cdn.jsdelivr.net/npm/ag-grid-community/dist/ag-grid-community.min.noStyle.js"></script>
<script type="text/javascript">
    var fields = {!! json_encode($fields) !!}
    class CustomTextElements {
      eGui;

      init(params) {
        console.log(params)
        this.eGui = document.createElement('div');
        //this.eGui.classList.add('custom-element');
        this.eGui.innerHTML = `<input name="${params.colDef.field}" value="${params.value ? params.value : ''}" class="form-control form-control-sm mt-1"/>`;
      }

      getGui() {
        return this.eGui;
      }

      refresh(params) {
        return false;
      }
    }

    class CustomSelectElements {
      eGui;

      init(params) {
        console.log(params)
        this.eGui = document.createElement('div');
        //this.eGui.classList.add('custom-element');
        let text = `<select name="${params.colDef.field}" value="${params.value ? params.value : ''}" class="form-control form-control-sm mt-1"/>`
            text = text + `<option value="">-- Select --</option>`;
            for(let option of fields[params.colDef.field].options) {
                text = text + `<option value="${option.value}" ${params.value==option.value ? 'selected' : ''}>${option.display}</option>`;
            }
            text = text + `<select>`
        this.eGui.innerHTML = text;
      }

      getGui() {
        return this.eGui;
      }

      refresh(params) {
        return false;
      }
    }

    function cellEditorSelector(params) {
      return {
          component: 'agSelectCellEditor',
          params: {
            values: ['Male', 'Female'],
          },
          popup: true,
        };
    }

        // Function to demonstrate calling grid's API
        function deselect(){
            gridOptions.api.deselectAll()
        }

        // Grid Options are properties passed to the grid
        const gridOptions = {
            components: {
                CustomTextElements: CustomTextElements,
                CustomSelectElements: CustomSelectElements
            },
            pagination: true, // Enable client-side pagination
              paginationPageSize: 10, // Number of rows per page
              cacheBlockSize: 10,
          // each entry here represents one column
          columnDefs: [
            @foreach($fields as $field => $props)
                @if($props['editable'])
                    { "field": "{{$field}}", "headerName": '{{$props['title']}}',editable: true, cellEditorSelector: cellEditorSelector, },
                @else
                    { "field": "{{$field}}", "headerName": '{{$props['title']}}'  },
                @endif
            @endforeach
          ],

          // default col def properties get applied to all columns
          defaultColDef: {sortable: true, filter: true, singleClickEdit: true},

          rowSelection: 'multiple', // allow rows to be selected
          animateRows: true, // have rows animate to new positions when sorted

          // example event handler
          onCellClicked: params => {
            console.log('cell was clicked', params)
          }
        };

        // get div to host the grid
        const eGridDiv = document.getElementById("myGrid");
        // new grid instance, passing in the hosting DIV and Grid Options
        new agGrid.Grid(eGridDiv, gridOptions);

        // Fetch data from server
        fetch("{{$base_url}}/aggridajaxlist")
        .then(response => response.json())
        .then(data => {
          // load fetched data into grid
            console.log(data)
          gridOptions.api.setRowData(data);
        });
    </script>
@endsection