jQuery UI Widgets Forums Grid cell value with cellsrenderer not gettng text middle align if row height is more

This topic contains 6 replies, has 3 voices, and was last updated by  Dimitar 9 years, 1 month ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author

  • akshatn
    Participant

    Hi,

    I am trying to render the cell of jqxGrid using cellsrenderer with simple function like below.

    var textrenderer = function (row, datafield, value) {
    return ‘<span style=”vertical-align: middle;”>’ + value + ‘</span>’;
    }

    I have increased the height of rows to lets say 50px. Above text verticle middle styling is not working.

    Here is the modified demo code of grid [jqwidgets-ver3.5.0/demos/jqxgrid/imagecolumn.htm] where i tried to see if that works. [I could do it using style display=inline-block, but this makes ellipses disappear which i required]

    I tried to make Title middle align with textrenderer

    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title id='Description'>This example shows how to use the Grid API to customize a column's rendering.</title>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> 
        <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>    
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>      
        <script type="text/javascript" src="../../scripts/demos.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                var movies = new Array();
    
                // Avatar
                movies[0] = { Image: 'avatar.png', Title: 'Avatar', Year: 2009 };
                movies[1] = { Image: 'priest.png', Title: 'Priest', Year: 2006 };
                movies[2] = { Image: 'endgame.png', Title: 'End Game', Year: 2006 };
                movies[3] = { Image: 'unknown.png', Title: 'Unknown', Year: 2011 };
                movies[4] = { Image: 'unstoppable.png', Title: 'Unstoppable', Year: 2010 };
                movies[5] = { Image: 'twilight.png', Title: 'Twilight', Year: 2008 };
                movies[6] = { Image: 'kungfupanda.png', Title: 'Kung Fu Panda', Year: 2008 };
                movies[7] = { Image: 'knockout.png', Title: 'Knockout', Year: 2011 };
                movies[8] = { Image: 'theplane.png', Title: 'The Plane', Year: 2010 };
                movies[9] = { Image: 'bigdaddy.png', Title: 'Big Daddy', Year: 1999 };
    
                var imagerenderer = function (row, datafield, value) {
                    return '<img style="margin-left: 5px;" height="60" width="50" src="../../images/' + value + '"/>';
                }
    			
    	   var textrenderer = function (row, datafield, value) {
                    return '<span style="vertical-align: middle;">' + value + '</span>';
                }
    
                var source = { localdata: movies, datatype: "array" };
                var dataAdapter = new $.jqx.dataAdapter(source);
                // Create jqxGrid.
                $("#jqxgrid").jqxGrid(
                {
                    width: 400,
                    source: dataAdapter,
                    rowsheight: 60,
                    columns: [
                      { text: 'Image', datafield: 'Image', width: 60, cellsrenderer: imagerenderer },
                      { text: 'Title', datafield: 'Title', width: 200 , cellsrenderer: textrenderer },
                      { text: 'Year', datafield: 'Year' }
                   ]
                });
            });
        </script>
    </head>
    <body class='default'>
        <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
            <div id="jqxgrid">
            </div>
        </div>
    </body>
    </html>
    

    Thanks,
    Akshat

    • This topic was modified 9 years, 8 months ago by  akshatn.
    • This topic was modified 9 years, 8 months ago by  akshatn.

    Dimitar
    Participant

    Hello Akshat,

    If you do not apply any cellsrenderer to the “Title” column, the text would be aligned in the middle automatically. If you need, you may modify the original HTML of the cell and preserve its style (keep it in the middle). Here is how to return the original HTML by cellsrenderer:

    var textrenderer = function (row, columnfield, value, defaulthtml, columnproperties) {
        return defaulthtml;
    }

    Best Regards,
    Dimitar

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


    akshatn
    Participant

    Thanks Dimitar,

    What if i am returning some value from textrenderer itself. I can not send defaulthtml in that case. Like below,

    var textrenderer = function (row, datafield, value) {
                    return '<span style="vertical-align: middle;">' + value + '</span>';
     }

    Thanks,
    Akshat


    Dimitar
    Participant

    Hi Akshat,

    Here is a possible solution:

    var textrenderer = function (row, columnfield, value, defaulthtml, columnproperties) {
        var defaultHTMLObject = $(defaulthtml);
        var outputObject = $("<div><div id='result'>jQWidgets</div></div>");
        outputObject.find("div").css({ "overflow": defaultHTMLObject.css("overflow"), "text-overflow": defaultHTMLObject.css("text-overflow"), "padding-bottom": defaultHTMLObject.css("padding-bottom"), "text-align": defaultHTMLObject.css("text-align"), "margin-right": defaultHTMLObject.css("margin-right"), "margin-left": defaultHTMLObject.css("margin-left"), "margin-top": defaultHTMLObject.css("margin-top") });
        return outputObject.html();
    }

    Best Regards,
    Dimitar

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


    akshatn
    Participant

    Thanks for the update and sorry for delay response. Let me check that.

    Akshat


    apj
    Participant

    i faced an issue in cell alignment when data comes in 2 lines alignment have an issue can you find the below url
    http://tbf.me/a/BTGnwE


    Dimitar
    Participant

    Hello raja,

    Could you, please, post your source code or, preferably, reproduce the issue in a JSFiddle and share it with us?

    Best Regards,
    Dimitar

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

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.