jQWidgets Forums

Tagged: br, break, cellsrenderer, grid, jqxgrid, json, line, new line

This topic contains 12 replies, has 3 voices, and was last updated by Jane 11 years, 6 months ago.

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

Author

JSON and newline char Posts

August 27, 2013 at 12:56 pm JSON and newline char #27795

Jane

Participant

Hi,

Is it possible create a grid from JSON data they contain a newline character? We tried html tag but when we move the scrollbar was displayed :

“text text”

and when you load the grid is showing

“text
text”

Can you help me?

Thanks
Jane

August 28, 2013 at 7:19 am JSON and newline char #27835

Dimitar

Participant

Hello Jane,

Yes, it is possible. Please check the following example, based on the demo Binding to JSON:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.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/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.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="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getDemoTheme();
            var url = "../sampledata/beverages.txt";
            // prepare the data
            var source =
            {
                datatype: "json",
                datafields: [
                    { name: 'name', type: 'string' },
                    { name: 'type', type: 'string' },
                    { name: 'calories', type: 'int' },
                    { name: 'totalfat', type: 'string' },
                    { name: 'protein', type: 'string' }
                ],
                id: 'id',
                url: url
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: dataAdapter,
                theme: theme,
                columnsresize: true,
                autorowheight: true,
                autoheight: true,
                columns: [
                  { text: 'Name', datafield: 'name', width: 250 },
                  { text: 'Beverage Type', datafield: 'type', width: 250 },
                  { text: 'Calories', datafield: 'calories', width: 180 },
                  { text: 'Total Fat', datafield: 'totalfat', width: 120 },
                  { text: 'Protein', datafield: 'protein', minwidth: 120 }
              ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid">
        </div>
    </div>
</body>
</html>

excerpt from beverages.txt:

[{
    "id": "1",
    "name": "Hot Chocolate",
    "type": "Chocolate Beverage",
    "calories": "370",
    "totalfat": "16g",
    "protein": "14g"
}, {
    "id": 2,
    "name": "Peppermint<br />Hot Chocolate",
    "type": "Chocolate Beverage",
    "calories": "440",
    "totalfat": "16g",
    "protein": "13g"
}, {
    "id": "3",
    "name": "Salted Caramel<br />Hot Chocolate",
    "type": "Chocolate Beverage",
    "calories": "450",
    "totalfat": "16g",
    "protein": "13g"
}, {
...

Best Regards,
Dimitar

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

September 6, 2013 at 7:45 am JSON and newline char #28422

Jane

Participant

Thank you,

we tested but the problem is in scrollbar. When you move scroollbar, jqxGrid show this data as follows:

Peppermint < br Hot Chocolate (show br)

When the data load. The jgxGrid show this data as follows:

Peppermint
Hot Chocolate

Excuse my English, it is not good
Jane

September 6, 2013 at 2:06 pm JSON and newline char #28456

Peter Stoev

Keymaster

Hi guys,

Just an update from me on this topic. It is not possible to display HTML Content in the Grid cells unless you set the “cellsrenderer” callback of the column. The built-in cells rendering is for displaying Text only.

Best Regards,
Peter Stoev

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

September 9, 2013 at 7:57 am JSON and newline char #28564

Jane

Participant

Hi,

I do not use “cellsrenderer” and the result is same. When I move scollbar the grid show BR tag . I think it is not independent on function “cellsrenderer”. It happens in the example above. This example shows a br tag with parentheses and without a backslash when you move scrollbar.

Jane

September 9, 2013 at 8:13 am JSON and newline char #28568

Peter Stoev

Keymaster

Hi Jane,

The problem is that you do not use “cellsrenderer” and you want to display Tags within the cells. The built-in rendering works with Text, not with Tags.

Best Regards,
Peter Stoev

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

September 9, 2013 at 8:31 am JSON and newline char #28572

Jane

Participant

Hi,

Is there any other way how to display new line without html tag br?

Thanks
Jane

September 12, 2013 at 10:08 am JSON and newline char #28845

Dimitar

Participant

Hi Jane,

In cellsrenderer you may also have other HTML tags which add a new line after their content, such as div or p.

Best Regards,
Dimitar

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

September 12, 2013 at 12:30 pm JSON and newline char #28853

Jane

Participant

Hi,

my problem is independent of the HTML tag. When I use br, div or p HTML tag the result is same. First rendering is good, but when I move horizontal scrollbar the grid is rendering bad, becouse it shows HTML tags. End tag shows without backslah. You can also try the example presented here and second rendering will be bad. We have HTML tags include in JSON.

We use jqwidgets version 3.0.1.

September 12, 2013 at 12:35 pm JSON and newline char #28854

Dimitar

Participant

Hi Jane,

The only way to effectively insert HTML tags in a grid cell is through the cellsrenderer callback function.

Best Regards,
Dimitar

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

September 12, 2013 at 12:52 pm JSON and newline char #28856

Jane

Participant

Hi,

Thanks. Do you think about support for HTML tags in JSON?

Jane

September 12, 2013 at 12:58 pm JSON and newline char #28857

Dimitar

Participant

Hi Jane,

The functionality is supported through cellsrenderer. Here is an updated version of the example with it:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.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/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.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="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getDemoTheme();
            var url = "../sampledata/beverages.txt";
            // prepare the data
            var source =
            {
                datatype: "json",
                datafields: [
                    { name: 'name', type: 'string' },
                    { name: 'type', type: 'string' },
                    { name: 'calories', type: 'int' },
                    { name: 'totalfat', type: 'string' },
                    { name: 'protein', type: 'string' }
                ],
                id: 'id',
                url: url
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties) {
                return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + ';">' + value + '</span>';
            };
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: dataAdapter,
                theme: theme,
                columnsresize: true,
                autorowheight: true,
                autoheight: true,
                columns: [
                  { text: 'Name', datafield: 'name', width: 250, cellsrenderer: cellsrenderer },
                  { text: 'Beverage Type', datafield: 'type', width: 250 },
                  { text: 'Calories', datafield: 'calories', width: 180 },
                  { text: 'Total Fat', datafield: 'totalfat', width: 120 },
                  { text: 'Protein', datafield: 'protein', minwidth: 120 }
              ]
            });
        });
    </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,
Dimitar

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

September 12, 2013 at 1:08 pm JSON and newline char #28858

Jane

Participant

Hi,

the example was very helpfull for me. Thanks. Me code works good now

Thanks
Jane

Author

Posts

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

You must be logged in to reply to this topic.