JSON string rendering - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: datagridview, jqxgrid, row details

This topic contains 4 replies, has 2 voices, and was last updated by sergeyr 11 years, 12 months ago.

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

Author

JSON string rendering Posts

October 17, 2012 at 3:03 pm JSON string rendering #9618

Member

Hello.

I have to render stringified JSON object, how can I implement this?
I tried cellsrenderer option of columns property but the value that comes there is already just string ‘[object Object]’
Should i do smth with dataAdapter?

var wikiExamplesSource =
            {
                datatype: "json",
                datafields: [
                    { name: 'exampleName'},
                    { name: 'exampleJson'}
                ],
                root: "jsonExample",
                 localdata: wikiJSON
            };
var wikiExampleDataAdapter = new $.jqx.dataAdapter(wikiExamplesSource);
$("#wikiExampleTable").jqxGrid(
		            {
		                width: 670,
		                height: 250,
		                source: wikiExampleDataAdapter,
		                theme: theme,
		                rowdetails: true,
		                rowdetailstemplate: { rowdetails: "<div> See this? </div>", rowdetailsheight: 200 },
		                ready: function () {
		                	$("#wikiExampleTable").jqxGrid('showrowdetails', 0);
		                    $("#wikiExampleTable").jqxGrid('showrowdetails', 
		                columns : [ { text : 'Message name', datafield : 'exampleName', width : 250 },
              				            { text : 'Example', datafield : 'exampleJson', cellsrenderer: function (row, columnfield, value, defaulthtml, columnproperties) {
						            	
return JSON.stringify(value);
						            } , width : 250 }
		                ],
		            });

October 17, 2012 at 5:35 pm JSON string rendering #9633

Peter Stoev

Keymaster

Hi sergeyr,

What is the JSON that you want to load in jqxGrid? The provided code is not enough for testing the reported behavior.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

October 17, 2012 at 5:59 pm JSON string rendering #9645

sergeyr

Member

var wikiJSON = {
   "id":"507d51c1e51bd01492f38e03",
   "key":"UMS-AuthenticationService-Login",
   "title":"Login to UMS Message",
   "description":"This is description for UMS Login message",
   "fields":[
      {
         "name":"username",
         "description":"represents username",
         "type":"String",
         "required":true
      },
      {
         "name":"password",
         "description":"represents password",
         "type":"String",
         "required":true
      }
   ],
   "jsonExample":[
      {
         "exampleName":"Login Request",
         "exampleJson":{
            "userName":"YODA116"
         }
      },
      {
         "exampleName":"Login Response",
         "exampleJson":{
            "token":{
               "secretKey":"F53615B2BBB5A99B9D416C5AA3954F19"
            },
            "ID":10002
         }
      }
   ],
   "diagramText":":actor :OpenAPI OpenAPI>getTemporaryAuthenticationTokenRequest(10001){actor>getTemporaryAuthenticationTokenResponse(10002)}",
   "author":"L. N. Tolstoy",
   "build":"1.0.0",
   "vresion":null
}

October 18, 2012 at 5:13 am JSON string rendering #9656

Peter Stoev

Keymaster

Hi sergeyr,

Here’s a working code:

<!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.8.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/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/jqxtabs.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 data = new Array();
            var wikiJSON = {
                "id": "507d51c1e51bd01492f38e03",
                "key": "UMS-AuthenticationService-Login",
                "title": "Login to UMS Message",
                "description": "This is description for UMS Login message",
                "fields": [
                   {
                       "name": "username",
                       "description": "represents username",
                       "type": "String",
                       "required": true
                   },
                   {
                       "name": "password",
                       "description": "represents password",
                       "type": "String",
                       "required": true
                   }
                ],
                "jsonExample": [
                   {
                       "exampleName": "Login Request",
                       "exampleJson": {
                           "userName": "YODA116"
                       }
                   },
                   {
                       "exampleName": "Login Response",
                       "exampleJson": {
                           "token": {
                               "secretKey": "F53615B2BBB5A99B9D416C5AA3954F19"
                           },
                           "ID": 10002
                       }
                   }
                ],
                "diagramText": ":actor :OpenAPI OpenAPI>getTemporaryAuthenticationTokenRequest(10001){actor>getTemporaryAuthenticationTokenResponse(10002)}",
                "author": "L. N. Tolstoy",
                "build": "1.0.0",
                "vresion": null
            };
            var wikiExamplesSource =
                        {
                            datatype: "json",
                            datafields: [
                                { name: 'exampleName' },
                                { name: 'exampleJson', map: 'exampleJson>userName' }
                            ],
                            root: "jsonExample",
                            localdata: wikiJSON
                        };
            var wikiExampleDataAdapter = new $.jqx.dataAdapter(wikiExamplesSource);
            $("#wikiExampleTable").jqxGrid(
            {
                width: 670,
                height: 250,
                source: wikiExampleDataAdapter,
                theme: theme,
                rowdetails: true,
                rowdetailstemplate: { rowdetails: "<div> See this? </div>", rowdetailsheight: 200 },
                ready: function () {
                    $("#wikiExampleTable").jqxGrid('showrowdetails', 0);
                },
                columns: [{ text: 'Message name', datafield: 'exampleName', width: 250 },
                                {
                                    text: 'Example', datafield: 'exampleJson', cellsrenderer: function (row, columnfield, value, defaulthtml, columnproperties) {
                                        return JSON.stringify(value);
                                    }
                                }
                ],
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="wikiExampleTable"></div>
    </div>
</body>
</html>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

October 18, 2012 at 8:15 am JSON string rendering #9670

sergeyr

Member

thanks, that works , but I wonder if there is any way to render all the JSON as string, in particular – all the ‘exampleJson’ fields, like:

{
                           "token": {
                               "secretKey": "F53615B2BBB5A99B9D416C5AA3954F19"
                           },
                           "ID": 10002
                       }

Author

Posts

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

You must be logged in to reply to this topic.