Menampilkan Magnific Popup di dalam kendo grid, dengan hasil seperti di bawah ini
Model
[code language=”csharp”]
public class OrderMediaMagazinePresentationStub
{
//…
//design & evidence
public List<OrderMediaMagazineDesignPresentationStub> DesignList { get; set; }
}
[/code]
javascript
[code language=”javascript”]
$("#grid").kendoGrid({
//…
dataBound: function(e) {
$(‘.lightbox-image-container’).magnificPopup({
delegate: ‘a’,
type: ‘image’,
gallery: {
enabled: true
},
});
},
columns: [
//…
{
field: "DesignList",
title: "Desain",
width: 125,
template: kendo.template($("#design-template").html()),
filterable: false,
sortable: false,
},
],
});
<script type="text/x-kendo-template" id="design-template">
# if(DesignList.length > 0) { #
<div class="lightbox-image-container">
# var cssClass = ""; #
# for (var i = 0; i < DesignList.length; i++) { #
# if (i == 0) { #
# cssClass = ""; #
# } else { #
# cssClass = "hide"; #
# } #
<a href="#= DesignList[i].AbsoluteUrl #" title="#= DesignList[i].Remarks #" class="#= cssClass #"><img src="#= DesignList[i].AbsoluteUrl #" alt="" class="img-thumbnail img-grid-thumbnail"></a>
# } #
</div>
# } else { #
–
# } #
</script>
[/code]
