How do I get "data" in a click event handler?

Shawellaby

In the below code I'm trying to put a button (icon) in the cell(column) and trigger page location change on the Controller. I cannot seem to get "data" in the .click function on line 22. New in this arena so info help is appreciated.

    columnDefs: [
                    {
                        className: 'control responsive',
                        orderable: false,
                        render: function () {
                            return '';
                        },
                        targets: 0
                    },
                    {
                        targets: 1,
                        data: null,
                        orderable: false,
                        defaultContent: '',
                        rowAction: {
                            element: $("<div/>")
                                .addClass("text-center")
                                .append($("<button/>")
                                    .addClass("btn btn-outline-primary btn-sm btn-icon")
                                    .attr("title", app.localize("Open Document"))
                                    .append($("<i/>").addClass("la la-search"))
                                ).click(function (data) {
                                    document.location.href = abp.appPath + "App/CustomersAndAccounts/ViewCustomerDetail?id=1";
                                })
                        }
                    },

colin

rowAction isn't a configuration option so that won't work. This example shows how to add things to cells - in this case a link but buttons would be trivial with this.

and trigger page location change on the Controller.

I don't understand that, sorry. Could you give more details, please.

Colin

Shawellaby

Apologies.
"and trigger page location change on the Controller" is referring to the ASP.Net MVC architecture.

In the example below, in the RowAction, I have access to the "data.record" object.
However, in this example the action lives within a pop-up button labeled "Actions". I just don't want the pop-up button at all. Just a simple icon/button, not a collection of buttons ("items:")

                    rowAction: {
                        text: '<i class="fa fa-cog"></i>Actions<span class="caret"></span>',
                        items: [{                                
                            text: app.localize('LaunchItem),                               
                            action: function (data) {
                                document.location.href = "ThisController/ControllerMethod?id=" + data.record.id;
                            }
                        },

Shawellaby

btw, the answer you provided DOES work for me, i'm just lacking the understanding of why the "data" object becomes null in a click handler on my first example.

Thank you for the response.

kthorngren

I've seen rowAction in this forum before. Like Colin said its not a Datatables option. Its specific to a library you are using with Datatables. To debug problems with rowAction you should contact the developer of the library that includes it.

Kevin