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')

×

            <h4 class="modal-title">Report amministratore | [[details[0].name]] [[details[0].zone]]</h4>
        </div>
        <div class="modal-body">
            <div class="col-md-5">
                <div class="form-group has-feedback">
                    <label>Mese</label>
                    <select class="form-control" ng-model="selectedMonth" convert-to-number required data-error="Campo obbligatorio" id="monthFilter">
									<option value="">-- seleziona --</option>
									<option  ng-value="01">Gennaio</option>
                                    <option  ng-value="02">Febbraio</option>
                                    <option  ng-value="03">Marzo</option>
                                    <option  ng-value="04">Aprile</option>
                                    <option  ng-value="05">Maggio</option>
                                    <option  ng-value="06">Giugno</option>
                                    <option  ng-value="07">Luglio</option>
                                    <option  ng-value="08">Agosto</option>
                                    <option  ng-value="09">Settembre</option>
                                    <option  ng-value="10">Ottobre</option>
                                    <option  ng-value="11">Novembre</option>
                                    <option  ng-value="12">Dicembre</option>
								</select>
                    <div class="help-block with-errors"></div>
                </div>
            </div>
            <br />
            <div class="col-md-2">
                <button id="filter-report" type="button" class="btn btn-primary btn-flat" ng-repeat="gym in gyms" ng-click="showGymDetailsFiltered([[gym.id]],[[selectedMonth]] );">Cerca</button>
            </div>
            <div ng-show="details.length > 0 && !coursesLoader">
                <table class="table table-stripped col-md-12">
                    <thead>
                        <tr>
                            <!--  <th>Palestra</th>
                <th>Zona</th> -->
                            <th>Colonna1</th>
                            <th>Colonna2</th>
                            <th>Colonna3</th>
                            <th>Colonna4</th>
                            <th>Colonna5 </th>
                            <th>Colonna6</th>
                            <th>Colonna7</th>
                            <th>Colonna8</th>
                        </tr>
                    </thead>
                    <tbody ng-repeat="g in details">
                        <tr ng-repeat="c in g.courses ">
                            <!--  <td>[[gym.name]]</td>
                    <td>[[gym.zone]]</td> -->
                            <td>[[c.name]]</td>
                            <td>[[c.instructors[0].instructor.first_name]] [[c.instructors[0].instructor.last_name]]</td>
                            <td>[[c.iscritti]]</td>
                            <td>[[c.percentage_paid || 0]] %</td>
                            <td>[[c.unpaid || 0 ]]</td>
                            <td>[[c.paid || 0]] €</td>
                            <td>[[g.economics.amount * c.paying_attendants || 0 ]] €</td>
                            <td ng-show="c.mensile_istruttore">[[c.mensile_istruttore || 0 ]] €</td>
                            <td ng-show="c.guadagno_fisso_istruttore">[[c.guadagno_fisso_istruttore || 0]] €</td>
                            <td ng-show="c.guadagno_percentuale_istruttore ">[[c.guadagno_percentuale_istruttore || 0 ]] €</td>
                           <!-- <td>[[c.mensile_istruttore || 0 ]] €</td>
                            <td>[[c.guadagno_fisso_istruttore || 0]] €</td>
                            <td>[[c.guadagno_percentuale_istruttore || 0]] €</td> -->
                        </tr>
                    </tbody>
                </table>

                <!-- Filtered TABLE -->



            </div>

        </div>
    </div>
</div>

`

[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

Ultimate-DataTable/src/directives/udt-cell.js

Line 234 in 5b3aad3

if(angular.isFunction(col.render)){