jQuery UI Widgets › Forums › Grid › cell value with cellsrenderer not gettng text middle align if row height is more
Tagged: align, Cell, cellsrenderer, grid, jqxgrid, middle, text, vertical align
This topic contains 6 replies, has 3 voices, and was last updated by Dimitar 9 years, 9 months ago.
-
Author
-
October 15, 2014 at 10:43 am cell value with cellsrenderer not gettng text middle align if row height is more #61160
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,
AkshatOctober 16, 2014 at 7:10 am cell value with cellsrenderer not gettng text middle align if row height is more #61229Hello 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,
DimitarjQWidgets team
http://www.jqwidgets.com/October 20, 2014 at 11:07 am cell value with cellsrenderer not gettng text middle align if row height is more #61376Thanks 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,
AkshatOctober 20, 2014 at 11:43 am cell value with cellsrenderer not gettng text middle align if row height is more #61380Hi 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,
DimitarjQWidgets team
http://www.jqwidgets.com/January 13, 2015 at 6:07 am cell value with cellsrenderer not gettng text middle align if row height is more #65287Thanks for the update and sorry for delay response. Let me check that.
Akshat
April 28, 2015 at 7:42 am cell value with cellsrenderer not gettng text middle align if row height is more #70348i 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/BTGnwEApril 28, 2015 at 10:02 am cell value with cellsrenderer not gettng text middle align if row height is more #70367Hello raja,
Could you, please, post your source code or, preferably, reproduce the issue in a JSFiddle and share it with us?
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.