KoolReport's Forum

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

How to show Details modal within DrillDown? #2833

Closed GHSix opened this topic on on Sep 23, 2022 - 8 comments

GHSix commented on Sep 23, 2022

When

Panel::create()
                    ->sub([
                        DrillChart::create()->lazyLoading(true)->detailShowable(true),
                    ])

Error

Message: Call undefined detailShowable() method

1- How to get a DrillDown chart to have a detail modal like the other chart classes?

1a- Just found FlexView widget in Dashboard demo. Is it a replacement to DrillDown made the right way for Dashboard?

2- Is it possible to have a button on details modal to export it as PDF or CSV?

GHSix commented on Sep 26, 2022

BTW, what's the Dashboard v4 w/ FlexView over composer ETA?

KoolReport commented on Sep 28, 2022

The FlexView can used to replace the DrillDown with so much more flexibility. FlexView is native dashboard widget so your above issue can be solved.

GHSix commented on Sep 28, 2022

Nice, it's very good to know.

And about point 2, is it possible to have a button on details modal to export it as PDF or CSV?

KoolReport commented on Sep 29, 2022

It is possible, please follow our example here

By providing the "detailModal()" in the widget (in our example is the CustomerTable), you will be able to overwrite the default detail modal and provide the detail modal with exporting button.

GHSix commented on Sep 29, 2022

It just shows the loading for a couple seconds and does nothing.

Could this problem be related to it being inside a FlexView within the content function?

When I click an export button, I get this in the Network inspect tool:

{"panels":[],"scripts":["KoolReport.dashboard.dboard.setState({\"ArchiveDocQtdA\":{\"detailModalParams\":[]}});"]}

What I did was:

I have copy/paste the detailModal from TDefaultModal.php and added the buttons

protected function detailModal($params = [])
    {
        $modal = Modal::create();
        $dataView = $this->dataView();
        return $modal
            ->title(Lang::t("Details"))
            ->type("info")
            ->size("lg")
            ->sub([
                Table::create($this->name() . "DetailTable")
                    ->pageSize(10)
                    ->dataSource($dataView->data())
                    ->fields(function () use ($dataView) {
                        //We need to copy columns like this because
                        //of extra fields only be set at creation of fields
                        //The fields here is for Google Chart and
                        //may not be use inside Table
                        return array_map(
                            function ($field) {
                                return $field->clone();
                            },
                            $dataView->fields()
                        );
                    })
            ])
            ->footer([
                Button::create()
                    ->text("Exportar CSV")
                    ->type("primary")
                    ->icon("fa fa-file-csv")
                    ->onClick(
                        Client::showLoader().
                        Client::widget($this->name() . "DetailTable")->exportToCSV()
                    ),
                Button::create()
                    ->text("Exportar PDF")
                    ->type("primary")
                    ->icon("far fa-file-pdf")
                    ->onClick(
                        Client::showLoader().
                        Client::widget($this->name() . "DetailTable")->exportToPDF()
                    ),
                Button::create()
                    ->text(Lang::t("Done"))
                    ->type("success")
                    ->onClick(Modal::hide($modal))
            ]);
    }

And turned feature on:

ArchiveDocQtdA::create()
                                        ->detailShowable(true)
                                        ->pdfExportable(true)
                                        ->csvExportable(true),
KoolReport commented on Sep 29, 2022

Did you try my suggestion on the post #2837?

GHSix commented on Sep 29, 2022

Yep, the JS snipet worked there to call showDetail, but it did not changed the status of exportToCSV and exportToPDF, they are still doing nothing after a couple seconds of loading.

GHSix commented on Sep 29, 2022

I find out what the problem was, I forget the ->pdfExportable(true)->csvExportable(true) in the detailModel Table::create.

It is working now, thanks.

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

Dashboard