jQWidgets Forums

jQuery UI Widgets Forums Grid Multline column

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 #4723

    hardcode
    Member

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

    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

    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…

    Multline column #4773

    hardcode
    Member

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

    Multline column #4774

    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…

    Multline column #4775

    hardcode
    Member

    '' + value + '';

    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

    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

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

You must be logged in to reply to this topic.