jQWidgets Forums

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.

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

Author

Multline column Posts

June 8, 2012 at 5:31 pm Multline column #4723

hardcode

Member

I want cells in my grid to be multiline or textarea
Please help me out
Thanks

June 9, 2012 at 9:23 pm Multline column #4740

Peter Stoev

Keymaster

Hi 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 Stoev

jQWidgets Team
http://www.jqwidgets.com

June 10, 2012 at 2:26 pm Multline column #4771

hardcode

Member

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…

June 10, 2012 at 4:08 pm Multline column #4773

hardcode

Member

this was the code i used but anytime i past it does not appear
” + value + ”;

June 10, 2012 at 4:09 pm Multline column #4774

hardcode

Member

“” + value + ”;”

Is there another way i could do this other than what i have done…

June 10, 2012 at 4:09 pm Multline column #4775

hardcode

Member

'' + value + '';

June 10, 2012 at 4:23 pm Multline column #4776

hardcode

Member

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
thanks

June 11, 2012 at 12:54 pm Multline column #4801

Peter Stoev

Keymaster

Hi 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 Stoev

jQWidgets Team
http://www.jqwidgets.com

Author

Posts

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

You must be logged in to reply to this topic.