KoolReport's Forum

Official Support Area, Q&As, Discussions, Suggestions and Bug reports.
Forum's Guidelines

Need help to add Custom Edit/Delete link in datagrid Datatable #2454

Open Anjali opened this topic on on Nov 22 - 11 comments

Anjali commented on Nov 22

Hello, I have used Datatable to show records, but i am not able to add edit delete links in datatable. Please provide some doc or example to add action column with edit delete link in datatable.

Sebastian Morales commented on Nov 23

We are going to add options and support for Add/Edit/Delete buttons/columns in future versions of Datagrid's DataTables. In the meantime we can only give an outline of how to achieve that:

<?php
DataTables::create(array(
    ...
    "columns" => array(
        ...
        "Edit" => [
            "formatValue" => function() { 
                return "<button type='button' onclick='editRow(this);'>Edit</button>
                        <button type='button' onclick='updateRow(this);' style='display: none' >Update</button>
                ";
            }
        ],
        "Delete" => [
            "formatValue" => function() { 
                return "<button type='button' onclick='deleteRow(this);'>Delete</button>";
            }
        ],
    ),
));
?>
<script>
    function deleteRow(btn) {
        //Get row from btn
        //Get row's column id data 
        //Submit row id data via either form submit or XHR to delete it
        //If using form submit, DataTables should be refreshed as well
        //If using XHR, delete this row with DataTables api: https://datatables.net/reference/api/row().remove()
    }
    function editRow(btn) {
        //Get row from btn
        //Hide button Edit, show button Update,
        //Loop through row's td to change its text to input type text, type number, etc
    }
    function updateRow(btn) {
        //Get row from btn
        //Get row's column data
        //Submit row data via either form submit or XHR to update it
        //If using form submit, DataTables should be refreshed as well
        //If using XHR, hide Update button, show Edit button
        //Loop through row's td to change its input to edited value if request succeeds, old value  if request fails
    }
</script>
Anjali commented on Nov 29

We have added action column by following your method but it is not working when trying to render data using serverSide => true. It shows warning like action column issue in datatable.

Sebastian Morales commented on Nov 30

In case you use "serverSide" => true pls try to add the Edit, Delete columns like this:

    DataTables::create(array(
        'dataSource' => function() {
            return $this->src('mySrc')
            ->query('select * from ...')
            ->pipe(new \koolreport\processes\Map([
                "{value}" => function($row) {
                    $row["Edit"] = "<button class='btn btn-secondary' type='button' onclick='editRow(this);'>Edit</button>
                            <button type='button' onclick='updateRow(this);' style='display: none' >Update</button>";
                    $row["Delete"] = "<button class='btn btn-secondary' type='button' onclick='deleteRow(this);'>Delete</button>";
                    return $row;
                }
            ]))
            ;
        },
        "columns"=>array(
            ...
            "Edit" => array(),
            "Delete" => array(),
        ), 
        "serverSide"=>true,
        "method"=>'post', //default method = 'get'
Anjali commented on Nov 30

Thank you its working, but faced again issue with search. Now search is not working on server side it shows error for ajax in datagrid datatable. ALso says error

SQLSTATE[42S22]: Column not found: 1054 Unknown column 'Actions' in 'where clause'

Anjali commented on Nov 30

Also faced issue with sorting on server side.

  "options" => [
                "order" => [[0, 'desc']],
                'columnDefs' => array(
                    array(
                        'orderable' => false,
                        'targets' => [4],
                    ),
                ),
                "paging" => true,
                "searching" => true,
            ],

Sebastian Morales commented on Nov 30

Oh, I see. Pls add the following column meta for fake columns which you don't want to filer/search or sort/order on server side:

    "columns" => array(
            ...
            "Actions" => array(
                "searchable" => false,
                "orderable" => false,
            )
    )

Let us know if there's any issue left. Tks,

Anjali commented on Nov 30

Thanks search works perfect but sorting columns stops working. here is the code:

  "options" => [
        'columnDefs' => array(
            array(
                'orderable' => true,
            ),
        ),
        "paging" => true,
        "searching" => true,
    ],
Sebastian Morales commented on Nov 30

Please comment out "orderable" => false for "Actions" column. Just don't click on Sort icon in that column. Other columns could be sorted. We will fix this server side's "orderable" meta in the next version of DataTables. Tks,

Anjali commented on Nov 30

Thanks.

Anjali commented on Nov 30

Hello, I got one more issue with sort. I need search and sort for fake column . then how can i enable that ? Also instant search got disabled on server side. I need to press enter to search. Please have a look

"Author" => array(
                    "searchable" => true,
                    "orderable" => true,
                ),

This is not working on server side.

Sebastian Morales commented on Dec 1

So you want to search on server side both real and fake columns, don't you? Real columns could be searched using sql where clause but for fake columns we would have to use KoolReport's Filter process.

Build Your Excellent Data Report

Let KoolReport help you to make great reports. It's free & open-source released under MIT license.

Download KoolReport View demo
help needed

DataGrid