Issue with render function and modal details window

[gabriele86]

Hello I have some problems to get modal window with details working with ultimate datatable.

In my tabel i have a details column that using render function to show a button that on click call an angular function that open a bootstrap modal with details.

The ng-click trigger work as aspected but modal content is empty.

Same logic using datatable.js directly working correctelly

[galbini]

Can you add your render config and your modal definition ?

[gabriele86]

Sure

Render function: "render": "<button class='btn btn-primary fa fa-plus' ng-click='showDetails([[cellValue]])'></button>",

Modal definition:

`

@include('components.loader_small')

×

Report amministratore | [[details[0].name]] [[details[0].zone]]

Mese -- seleziona -- Gennaio Febbraio Marzo Aprile Maggio Giugno Luglio Agosto Settembre Ottobre Novembre Dicembre

Cerca

Colonna1	Colonna2	Colonna3	Colonna4	Colonna5	Colonna6	Colonna7	Colonna8
[[c.name]]	[[c.instructors[0].instructor.first_name]] [[c.instructors[0].instructor.last_name]]	[[c.iscritti]]	[[c.percentage_paid || 0]] %	[[c.unpaid || 0 ]]	[[c.paid || 0]] €	[[g.economics.amount * c.paying_attendants || 0 ]] €	[[c.mensile_istruttore || 0 ]] €	[[c.guadagno_fisso_istruttore || 0]] €	[[c.guadagno_percentuale_istruttore || 0 ]] €

`

[galbini]

Why put you cellValue inside [[]] ? Are you try : "render": "<button class='btn btn-primary fa fa-plus' ng-click='showDetails(cellValue)'></button>" ?

Are you try to add a breakpoint inside your function showDetails to see what'a happen ?

[gabriele86]

Why put you cellValue inside [[]] ?

Because i'm using a template engine that use {} to render server side element

Are you try : "render": "" ?

Yes but no value printed it print click="showDetails(cellValue)"

Are you try to add a breakpoint inside your function showDetails to see what'a happen ?

Yes and all work fine ajax call return code 200 and details info

[galbini]

See below the render used inside UDT to open an image inside a modal

'<div  ng-click="udtTableFunctions.setImage(cellValue.value,cellValue.fullname,cellValue.width,cellValue.height)" class="thumbnail" ng-if="cellValue !== undefined" >
<div data-target="#udtModalImage" role="button" data-toggle="modal" ><a href="#"><img ng-src="data:image/{{cellValue.extension}};base64,{{cellValue.value}}" width="{{cellValue.width*0.1}}" height="{{cellValue.height*0.1}}"/></a></div></div>'

I hope that's help you.

[gabriele86]

Is it possible call a jquery click event instead an ng-click event?

to move modal population logic outside angular.

I have tryed changing the button code like this

"render": "<button class='btn btn-primary fa fa-plus' onclick='showDetails(cellValue)'></button>"

But instead printing the cell value it print the string (cellValue)

[galbini]

I don't known if it's possible to call JQuery from Angular.

[ydeshayes]

Hello,

can you try "render": "<button class='btn btn-primary fa fa-plus' ng-click='showDetails(value.data)'></button>" like the doc here? https://ultimate-datatable.readthedocs.io/en/latest/columns-configuration/#render

[ydeshayes]

You can also try

"render": function(value) {
   return "<button class='btn btn-primary fa fa-plus' ng-click='showDetails("+value+")'></button>";
}

The code for this option is here https://github.com/institut-de-genomique/Ultimate-DataTable/blob/5b3aad307037016e7d3c5bcf4cb0ab022b364e34/src/directives/udt-cell.js#L234