KoolReport's Forum

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

Creating form datatable #2615

Open DVBI opened this topic on on Mar 15, 2022 - 5 comments

DVBI commented on Mar 15, 2022

I need to create a server-side datatable with forms like here https://datatables.net/examples/api/form.html can you please suggest?

Sebastian Morales commented on Mar 16, 2022

I think you can use the Map process to convert your row data to input/select html, pipe to a datastore then create DataTables with that datastore:

//MyReport.php
...
->pipe(new \koolreport\processes\Map(array(
    "{value}" => function($row, $meta, $index) {
        $editColumnNames = ["age", "position"];
        foreach ($editColumnNames as $editColumnName) {
            $value = $row[$editColumnName];
            $row[$editColumnName] = "<input type='text' id='row-{$index}-{$editColumnName}' name=row-{$index}-{$editColumnName}' value='{$value}'>";
        }
        return $row;
    }
)))
->pipe($this->dataStore("ds"));

//MyReport.view.php
DataTables::create(array(
    "dataSource" => $this->dataStore("ds"),
    ...
));

The submit button could be outside of DataTables or you could add a custom button using Buttons plugin. Your form most likely should use post method since get can only submit limited data. You can check for a post submit in your report setup to decide whether to apply Map conversion from data to input/select. If you have any question let us know. Rgds,

DVBI commented on Mar 16, 2022

Thanks for your response it works with the map.... i have another doubt i need to trigger a change event of those dropdowns in the data table... i can get elements on the first page when i changed the page, events are not triggered with the dropdown elements on the next page.. can you suggest how can i get "page changed" event and then initialize change events to the dropdown element?

DVBI commented on Mar 17, 2022

Hi Sebastian can i have an update on the above query asap, please... Thanks in advance

DVBI commented on Mar 17, 2022

Hi Sebastian, i got the answer from here https://www.koolreport.com/forum/topics/1756 Thanks

Sebastian Morales commented on Mar 17, 2022

Another option is to attach onchange event directly to your select instead of using "drawCallback" option:

//MyReport.php
->pipe(new \koolreport\processes\Map(array(
    "{value}" => function($row, $meta, $index) {
        $selectColumnNames = ["age", "position"];
        foreach ($selectColumnNames as $selectColumnName) {
            $value = $row[$selectColumnName];
            $row[$selectColumnName] = "<select onchange='selectChanged(this)' id='row-{$index}-{$selectColumnName}' name=row-{$index}-{$selectColumnName}' > ... </select>";
        }
        return $row;
    }
))) 

//MyReport.view.php
<script>
    function selectChanged(select) {
        ...
    }
</script>

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