resize image collumn and keep aspect ration

[agelospanagiotakisParticipant]

i am trying to resize the image in the image column cell with no luck
any tips on how to do this ?

function resetImagesRatio() {
            //$('.imageContainer').on('load', function () {
            //$('.imageContainer').on('load', function () {
            $('.imageContainer').each(function() {
                if ($(this).parent() != null) {
                    var css;
                    var ratio = $(this).width() / $(this).height();
                    var pratio = $(this).parent().width() / $(this).parent().height();
                    if (ratio < pratio) {
                        css = { width: 'auto', height: '100%' };
                    }
                    else {
                        css = { width: '100%', height: 'auto' };
                    }
                    //css = { width: "'" + $(this).parent().width() + "px'", height: "'" + $(this).parent().height() + "px'" };
                    css = { width: "'" + $(this).parent().width() + "px'", height: "'" + $(this).parent().height() + "px'" };
                    console.log("RESETING IMAGE SIZE");
                    console.log(css);
                 
                    $(this).css(css);
                  
                }
            });
        };

    var imageCellsRenderer = function (rowIndex, datafield, value) {
            var datarow1 = $("#jqxTechGrid").jqxGrid('getrowdata', rowIndex);
            var str1 = '';
            str1 += '<div><img class="imageContainer" style="position: absolute;margin: auto;top: 0;left: 0;right: 0;bottom: 0;"  src="' + value + '" /></div>'
            return str1;
        };

and in which event ?

$("#jqxTechGrid").on("pagechanged", function (event) {
                resetImagesRatio();
                console.log("pagechanged");
            });
            $("#jqxTechGrid").on("pagesizechanged", function (event) {
                resetImagesRatio();
                console.log("pagesizechanged");
            });
            $("#jqxTechGrid").on("groupschanged", function (event) {
                //resetImagesRatio();
                console.log("groupschanged");
            });
            $('#jqxTechGrid').on('initialized', function () {
                //resetImagesRatio();
                console.log("initialized");
            });
            $("#jqxTechGrid").on('cellselect', function (event) {
                //resetImagesRatio();
                console.log("cellselect");
            });

[Peter StoevKeymaster]

Hi agelospanagiotakis,

The Image column is rendered through the “cellsrenderer” callback. If you want to make some custom rendering, that is the function where you should do it.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[Author]

Posts