jQWidgets Forums
jQuery UI Widgets › Forums › Grid › Multline column
Tagged: grid cells, Multiline, text wrapping
This topic contains 7 replies, has 2 voices, and was last updated by Peter Stoev 12 years, 9 months ago.
-
AuthorMultline column Posts
-
I want cells in my grid to be multiline or textarea
Please help me out
ThanksHi hardcode,
If you want to make the cells multiline, you will need to customize the built-in rendering by providing custom rendering function. For more information about that functionality, take a look at this help topic: jquery-grid-cellsrendering.htm.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comPlease is there a way you can demonstrate this to me. I have to tried to implement the textarea using CSS but it does not work. I have tried to render it using the code below but the cells seems not be expanding interms of number of rows..
” + value + ”;
Is there another way i could do this other than what i have done…
this was the code i used but anytime i past it does not appear
” + value + ”;Please is there a way you can demonstrate this to me. I have to tried to implement the textarea using CSS but it does not work. I have tried to render it using the code below but the cells seems not be expanding interms of number of rows..
“” + value + ”;”
Is there another way i could do this other than what i have done…
'' + value + '';
Anytime I paste the code I have implemented, the codes are truncated and only halve of it appears… May please help me out with a sample code of this multiline textarea.
counting your consideration please
thanksHi hardcode,
To format HTML code or JavaScript in the Forum, please take a look at this post: http://www.jqwidgets.com/community/topic/code-tags/
Here’s an example of Grid Cells text-wrapping. The feed.xml is included in the download package in the ‘demos/sampledata’ folder.
<!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.7.2.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="../../jqwidgets/jqxgrid.columnsresize.js"></script> <script type="text/javascript" src="../../scripts/gettheme.js"></script> <script type="text/javascript"> $(document).ready(function () { var theme = getTheme(); // prepare the data var url = "../sampledata/feed.xml"; var parentsLength = $("#jqxWidget").parents().length; if (parentsLength > 3) { url = 'demos/sampledata/feed.xml'; } var source = { datatype: "xml", datafields: [ { name: 'title' }, { name: 'link' }, { name: 'pubDate', type: 'date' }, { name: 'creator', map: 'dc\\:creator' }, ], root: "channel", record: "item", url: url, async: false }; var renderer = function (row, column, value) { return '<div style="width: ' + '90%' + '; margin: 4px; white-space: normal;">' + value + '</div>'; } // Create jqxGrid. $("#jqxgrid").jqxGrid( { width: 670, source: source, theme: theme, sortable: true, pageable: true, autoheight: true, columnsresize: true, rowsheight: 70, columns: [ { text: 'Link', datafield: 'link', width: 150, cellsrenderer: renderer }, { text: 'Title', datafield: 'title', width: 200, cellsrenderer: renderer }, { text: 'Publish Date', datafield: 'pubDate', width: 250, cellsrenderer: renderer, cellsformat: "D" }, { text: 'Creator', datafield: 'creator', width: 200, cellsrenderer: renderer } ] }); }); </script></head><body class='default'> <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;"> <div id="jqxgrid"> </div> </div></body></html>
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com -
AuthorPosts
You must be logged in to reply to this topic.